الگو:صفحه اصلی مغازه شما/دسته بندی موضوعی: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
<div class="mediawiki-category-container" style="direction: rtl; font-family: tahoma, arial; max-width: | |||
<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> | </div> | ||
<!-- | <!-- شبکه کارتها (Grid) --> | ||
<div id="categoryGrid" | <div id="categoryGrid" class="category-grid"> | ||
<!-- کارت نمونه 1 --> | <!-- کارت نمونه 1 --> | ||
<div class="category-card tech" style=" | <div class="category-card tech" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;"> | ||
<span style="font-weight: bold; color: #333; font-size: 14px; display: block;">هوش مصنوعی</span> | |||
<span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۲ مقاله</span> | |||
<span style="font-size: | |||
</div> | </div> | ||
<!-- کارت نمونه 2 --> | <!-- کارت نمونه 2 --> | ||
<div class="category-card art" style=" | <div class="category-card art" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #ff9f43;"> | ||
<span style="font-weight: bold; color: #333; font-size: 14px; display: block;">نقاشی دیجیتال</span> | |||
<span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۸ مقاله</span> | |||
<span style="font-size: | |||
</div> | </div> | ||
<!-- کارت نمونه 3 --> | <!-- کارت نمونه 3 --> | ||
<div class="category-card science" style=" | <div class="category-card science" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #54a0ff;"> | ||
<span style="font-weight: bold; color: #333; font-size: 14px; display: block;">فیزیک کوانتوم</span> | |||
<span style="font-size: 11px; color: #777; background: #eff6ff; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۵ مقاله</span> | |||
<span style="font-size: | |||
</div> | </div> | ||
<!-- کارت نمونه 4 --> | <!-- کارت نمونه 4 --> | ||
<div class="category-card tech" style=" | <div class="category-card tech" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;"> | ||
<div style=" | <span style="font-weight: bold; color: #333; font-size: 14px; display: block;">برنامهنویسی</span> | ||
<span style="font-size: 11px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۲۵ مقاله</span> | |||
</div> | |||
<span style="font-size: | |||
<!-- اضافه کردن کارتهای بیشتر برای تست نمایش ردیفها --> | |||
<div class="category-card art" style="background: white; padding: 15px 10px; border-radius: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-bottom: 4px solid #ff9f43;"> | |||
<span style="font-weight: bold; color: #333; font-size: 14px; display: block;">طراحی گرافیک</span> | |||
<span style="font-size: 11px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px; display: inline-block; margin-top: 5px;">۱۰ مقاله</span> | |||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
<style> | |||
/* تنظیمات اصلی گرید */ | |||
.category-grid { | |||
display: grid; | |||
/* حالت دسکتاپ: ۴ ستون مساوی */ | |||
grid-template-columns: repeat(4, 1fr); | |||
gap: 15px; | |||
} | |||
/* حالت تبلت یا موبایلهای بزرگ (اختیاری اما برای زیبایی) */ | |||
@media (max-width: 768px) { | |||
.category-grid { | |||
/* حالت موبایل: ۲ ستون مساوی */ | |||
grid-template-columns: repeat(2, 1fr); | |||
} | |||
} | |||
/* حالت خیلی کوچک (موبایلهای قدیمی) */ | |||
@media (max-width: 480px) { | |||
.category-grid { | |||
grid-template-columns: repeat(2, 1fr); /* طبق درخواست تو ۲ ستونه باقی بماند */ | |||
gap: 10px; | |||
} | |||
} | |||
.filter-btn:hover { opacity: 0.8; } | |||
.category-card { transition: all 0.2s ease; cursor: pointer; } | |||
.category-card:hover { transform: translateY(-5px); } | |||
</style> | |||
<script> | <script> | ||
| خط ۵۹: | خط ۸۸: | ||
const buttons = document.getElementsByClassName("filter-btn"); | const buttons = document.getElementsByClassName("filter-btn"); | ||
// تغییر استایل دکمهها | |||
for (let btn of buttons) { | for (let btn of buttons) { | ||
btn.style.background = "#eee"; | btn.style.background = "#eee"; | ||
| خط ۶۶: | خط ۹۶: | ||
event.currentTarget.style.color = "white"; | event.currentTarget.style.color = "white"; | ||
// فیلتر کارتها | |||
for (let card of cards) { | for (let card of cards) { | ||
if (category === 'all') { | if (category === 'all') { | ||
card.style.display = " | card.style.display = "block"; | ||
} else { | } else { | ||
if (card.classList.contains(category)) { | if (card.classList.contains(category)) { | ||
card.style.display = " | card.style.display = "block"; | ||
} else { | } else { | ||
card.style.display = "none"; | card.style.display = "none"; | ||
| خط ۸۶: | خط ۱۱۷: | ||
const title = card.querySelector('span').innerText.toLowerCase(); | const title = card.querySelector('span').innerText.toLowerCase(); | ||
if (title.includes(searchValue)) { | if (title.includes(searchValue)) { | ||
card.style.display = " | card.style.display = "block"; | ||
} else { | } else { | ||
card.style.display = "none"; | card.style.display = "none"; | ||
| خط ۹۳: | خط ۱۲۴: | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> | ||