الگو:صفحه اصلی مشاغل/دسته بندی موضوعی: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) صفحهای تازه حاوی «<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> </d...» ایجاد کرد |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۳۷۰: | خط ۳۷۰: | ||
<a href="جواهر فروشی های نسیم شهر" class="fz-card all"> | <a href="جواهر فروشی های نسیم شهر" class="fz-card all"> | ||
<span class="fz-title"> | <span class="fz-title">جواهرات</span> | ||
</a> | </a> | ||
| خط ۶۵۱: | خط ۶۵۱: | ||
.fz-search-wrapper input { | .fz-search-wrapper input { | ||
width: 90%; | width: 90%; | ||
padding: | padding: 12px 20px; | ||
border: 1px solid #c9e4d5; | border: 1px solid #c9e4d5; | ||
border-radius: 25px; | border-radius: 25px; | ||
outline: none; | outline: none; | ||
font-size: | font-size: 26px; /* ۲ برابر شدن اندازه فونت فیلد سرچ */ | ||
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-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 { | .fz-filter-btn { | ||
padding: | padding: 10px 24px; | ||
border-radius: | border-radius: 30px; | ||
border: none; | border: none; | ||
background: #eee; | background: #eee; | ||
cursor: pointer; | cursor: pointer; | ||
font-size: | font-size: 24px; /* ۲ برابر شدن اندازه فونت دکمه فیلتر */ | ||
font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important; | font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important; | ||
transition: 0.3s; | transition: 0.3s; | ||
| خط ۶۷۹: | خط ۶۷۹: | ||
display: grid !important; | display: grid !important; | ||
grid-template-columns: repeat(4, 1fr) !important; | grid-template-columns: repeat(4, 1fr) !important; | ||
gap: | gap: 15px !important; | ||
width: 100% !important; | width: 100% !important; | ||
} | } | ||
/* استایل کارت نهایی | /* استایل کارت نهایی */ | ||
.fz-card { | .fz-card { | ||
background: white !important; | background: white !important; | ||
height: | height: 72px !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 | padding: 0 15px !important; | ||
border-radius: | border-radius: 10px !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-bottom: | border-bottom: 5px 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; | margin: 0 !important; | ||
text-decoration: none !important; | text-decoration: none !important; | ||
} | } | ||
.fz-card:hover { transform: translateY(- | .fz-card:hover { transform: translateY(-4px); box-shadow: 0 5px 15px rgba(0,0,0,0.12) !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: | font-weight: bold !important; | ||
color: #333 !important; | color: #333 !important; | ||
font-size: | font-size: 28px !important; /* فونت کارتها از ۱۴ پیکسل به ۲۸ پیکسل (۲ برابر) تغییر یافت */ | ||
text-align: center; | text-align: center; | ||
white-space: nowrap; | white-space: nowrap; | ||
overflow: hidden; | overflow: hidden; | ||
text-overflow: ellipsis; | text-overflow: ellipsis; | ||
width: 100%; | |||
} | } | ||
/* واکنشگرایی موبایل */ | /* واکنشگرایی موبایل متناسب با اندازه فونت بزرگ جدید */ | ||
@media (max-width: | @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: | @media (max-width: 900px) { | ||
.fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; } | .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; } | ||
} | } | ||
@media (max-width: | @media (max-width: 600px) { | ||
.fz-category-grid { grid-template-columns: repeat(1, 1fr) !important; } | .fz-category-grid { grid-template-columns: repeat(1, 1fr) !important; } | ||
} | } | ||
| خط ۷۳۶: | خط ۷۳۷: | ||
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)) { | ||