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