فراغیب

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

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۶۴۱: خط ۶۴۱:
     padding: 15px !important;
     padding: 15px !important;
     background: #f9f9f9 !important;
     background: #f9f9f9 !important;
     border-radius: 15px !important;
     border-radius: 12px !important;
     border: 1px solid #c9e4d5 !important;
     border: 1px solid #c9e4d5 !important;
     display: block !important;
     display: block !important;
خط ۶۵۱: خط ۶۵۱:
.fz-search-wrapper input {
.fz-search-wrapper input {
     width: 90%;
     width: 90%;
     padding: 12px 20px;
     padding: 10px 15px;
     border: 1px solid #c9e4d5;
     border: 1px solid #c9e4d5;
     border-radius: 25px;
     border-radius: 20px;
     outline: none;
     outline: none;
     font-size: 26px; /* ۲ برابر شدن اندازه فونت فیلد سرچ */
     font-size: 16px;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     transition: 0.3s;
     transition: 0.3s;
}
}
.fz-search-wrapper input:focus { border-color: #16bd78; box-shadow: 0 0 5px rgba(22, 189, 120, 0.2); }
.fz-search-wrapper input:focus { border-color: #16bd78; }


/* استایل دکمه‌های فیلتر */
/* استایل دکمه‌های فیلتر */
.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: 15px; }
.fz-filter-btn {
.fz-filter-btn {
     padding: 10px 24px;
     padding: 6px 18px;
     border-radius: 30px;
     border-radius: 20px;
     border: none;
     border: none;
     background: #eee;
     background: #eee;
     cursor: pointer;
     cursor: pointer;
     font-size: 24px; /* ۲ برابر شدن اندازه فونت دکمه فیلتر */
     font-size: 15px;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     transition: 0.3s;
     transition: 0.3s;
}
}
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; font-weight: bold; }
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; }


/* چیدمان شبکه کارت‌ها */
/* چیدمان شبکه کارت‌ها */
خط ۶۷۹: خط ۶۷۹:
     display: grid !important;
     display: grid !important;
     grid-template-columns: repeat(4, 1fr) !important;
     grid-template-columns: repeat(4, 1fr) !important;
     gap: 15px !important;
     gap: 12px !important;
     width: 100% !important;
     width: 100% !important;
}
}


/* استایل کارت نهایی */
/* استایل کارت */
.fz-card {
.fz-card {
     background: white !important;
     background: white !important;
     height: 72px !important; /* افزایش ارتفاع کارت متناسب با فونت بزرگ‌تر */
     height: 50px !important;
     display: flex !important;
     display: flex !important;
     align-items: center !important;
     align-items: center !important;
     justify-content: center !important;
     justify-content: center !important;
     padding: 0 15px !important;
     padding: 0 10px !important;
     border-radius: 10px !important;
     border-radius: 8px !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
     border-bottom: 5px solid #16bd78 !important; /* افزایش ضخامت خط پایین کارت */
     border-bottom: 3px solid #16bd78 !important;
     box-sizing: border-box !important;
     box-sizing: border-box !important;
     cursor: pointer;
     cursor: pointer;
     transition: all 0.2s ease;
     transition: all 0.2s ease;
    margin: 0 !important;
     text-decoration: none !important;
     text-decoration: none !important;
}
}


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


/* استایل فونت داخل کارت */
/* استایل فونت داخل کارت (۲۰ درصد بزرگتر از ۱۴) */
.fz-title {
.fz-title {
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
     font-weight: bold !important;
     font-weight: bold !important;
     color: #333 !important;
     color: #444 !important;
     font-size: 28px !important; /* فونت کارت‌ها از ۱۴ پیکسل به ۲۸ پیکسل (۲ برابر) تغییر یافت */
     font-size: 17px !important; /* تنظیم شده روی ۱۷ پیکسل */
     text-align: center;
     text-align: center;
     white-space: nowrap;
     white-space: nowrap;
خط ۷۱۶: خط ۷۱۵:
}
}


/* واکنش‌گرایی موبایل متناسب با اندازه فونت بزرگ جدید */
/* واکنش‌گرایی */
@media (max-width: 1200px) {
@media (max-width: 1200px) { .fz-category-grid { grid-template-columns: repeat(3, 1fr) !important; } }
    .fz-category-grid { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 850px) { .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; } }
}
@media (max-width: 500px) { .fz-category-grid { grid-template-columns: repeat(1, 1fr) !important; } }
@media (max-width: 900px) {
    .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
    .fz-category-grid { grid-template-columns: repeat(1, 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();
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی_مشاغل/دسته_بندی_موضوعی»