فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۰ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<div class="category-grid">
<html>
  <div class="category-card">[[مراکز بهداشتی و درمانی|مراکز بهداشتی و درمانی]]</div>
<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;">
  <div class="category-card">[[پوشاک، خیاطی و مد|پوشاک، خیاطی و مد]]</div>
 
  <div class="category-card">[[ادارات و خدمات عمومی|ادارات و خدمات عمومی]]</div>
    <!-- بخش جستجو -->
  <div class="category-card">[[لوازم خانه و دکوراسیون|لوازم خانه و دکوراسیون]]</div>
    <div class="search-box" style="margin-bottom: 15px; text-align: center;">
  <div class="category-card">[[فناوری، دیجیتال و خدمات اداری|فناوری، دیجیتال و خدمات اداری]]</div>
        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
  <div class="category-card">[[حمل‌ونقل، باربری و لجستیک|حمل‌ونقل، باربری و لجستیک]]</div>
              style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 15px; transition: all 0.3s ease;">
  <div class="category-card">[[مواد غذایی و خرید روزمره|مواد غذایی و خرید روزمره]]</div>
    </div>
  <div class="category-card">[[صنعت، تولید و کارگاه|صنعت، تولید و کارگاه]]</div>
 
  <div class="category-card">[[طلا، جواهر و هدایا|طلا، جواهر و هدایا]]</div>
    <!-- بخش فیلترها -->
  <div class="category-card">[[ساختمان، املاک و تأسیسات|ساختمان، املاک و تأسیسات]]</div>
    <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px;">
  <div class="category-card">[[چاپ، نشر و تبلیغات|چاپ، نشر و تبلیغات]]</div>
        <button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 14px; font-weight: bold;">همه</button>
  <div class="category-card">[[کشاورزی، دام و شیلات|کشاورزی، دام و شیلات]]</div>
        <button class="filter-btn" onclick="filterSelection(event, 'tech')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">تکنولوژی</button>
  <div class="category-card">[[سفر، گردشگری و اقامت|سفر، گردشگری و اقامت]]</div>
        <button class="filter-btn" onclick="filterSelection(event, 'art')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">هنر</button>
  <div class="category-card">[[حقوق و دفاتر رسمی|حقوق و دفاتر رسمی]]</div>
        <button class="filter-btn" onclick="filterSelection(event, 'science')" style="padding: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">علوم</button>
  <div class="category-card">[[تجارت، بازرگانی و مرز|تجارت، بازرگانی و مرز]]</div>
    </div>
  <div class="category-card">[[هتل، مراسم و تشریفات|هتل، مراسم و تشریفات]]</div>
 
  <div class="category-card">[[آموزش و پرورش|آموزش و پرورش]]</div>
    <!-- شبکه کارت‌های مستطیلی باریک -->
  <div class="category-card">[[پزشکان و متخصصین|پزشکان و متخصصین]]</div>
    <div id="categoryGrid" class="category-grid">
  <div class="category-card">[[ورزش، بازی و تفریح|ورزش، بازی و تفریح]]</div>
       
  <div class="category-card">[[خدمات منزل و نظافت|خدمات منزل و نظافت]]</div>
        <!-- کارت نمونه 1 -->
  <div class="category-card">[[زیبایی و آرایشی|زیبایی و آرایشی]]</div>
        <div class="category-card tech" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
  <div class="category-card">[[رستوران، کافه و پذیرایی|رستوران، کافه و پذیرایی]]</div>
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">هوش مصنوعی</span>
  <div class="category-card">[[روانشناسان و مشاوره|روانشناسان و مشاوره]]</div>
            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۱۲ مقاله</span>
  <div class="category-card">[[خودرو و موتورسیکلت|خودرو و موتورسیکلت]]</div>
        </div>
  <div class="category-card">[[فرهنگ، هنر و رسانه|فرهنگ، هنر و رسانه]]</div>
 
        <!-- کارت نمونه 2 -->
        <div class="category-card art" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #ff9f43;">
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">نقاشی دیجیتال</span>
            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۸ مقاله</span>
        </div>
 
        <!-- کارت نمونه 3 -->
        <div class="category-card science" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #54a0ff;">
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">فیزیک کوانتوم</span>
            <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span>
        </div>
 
        <!-- کارت نمونه 4 -->
        <div class="category-card tech" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">برنامه‌نویسی</span>
            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۲۵ مقاله</span>
        </div>
 
        <!-- کارت نمونه 5 -->
        <div class="category-card art" style="background: white; padding: 8px 15px; border-radius: 10px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 6px rgba(0,0,0,0.05); border-right: 5px solid #ff9f43;">
            <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">طراحی گرافیک</span>
            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۱۰ مقاله</span>
        </div>
 
    </div>
</div>
</div>
<style>
/* تنظیمات گرید اصلی */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
    gap: 12px;
}
/* حالت موبایل: ۲ ستون */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* استایل‌ها */
.category-card { transition: all 0.2s ease; cursor: pointer; }
.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.filter-btn:hover { opacity: 0.8; }
/* کلاس مخفی سازی برای حل مشکل جستجو */
.is-hidden {
    display: none !important;
}
</style>
<script>
// تابع فیلتر
function filterSelection(event, category) {
    const cards = document.getElementsByClassName("category-card");
    const buttons = document.getElementsByClassName("filter-btn");
    // ریست کردن دکمه‌ها
    for (let btn of buttons) {
        btn.style.background = "#eee";
        btn.style.color = "black";
    }
    // فعال کردن دکمه کلیک شده
    event.currentTarget.style.background = "#16bd78";
    event.currentTarget.style.color = "white";
    for (let card of cards) {
        if (category === 'all') {
            card.classList.remove("is-hidden");
        } else {
            if (card.classList.contains(category)) {
                card.classList.remove("is-hidden");
            } else {
                card.classList.add("is-hidden");
            }
        }
    }
}
// تابع جستجو
document.getElementById('categorySearch').addEventListener('keyup', function() {
    const searchValue = this.value.toLowerCase().trim();
    const cards = document.getElementsByClassName("category-card");
    for (let card of cards) {
        const titleElement = card.querySelector('.card-title');
        const titleText = titleElement.innerText.toLowerCase();
        if (titleText.includes(searchValue)) {
            card.classList.remove("is-hidden");
        } else {
            card.classList.add("is-hidden");
        }
    }
});
</script>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی/دسته_بندی_موضوعی»