الگو:صفحه اصلی مغازه شما/دسته بندی موضوعی: تفاوت میان نسخهها
Esfandiari (بحث | مشارکتها) صفحهای تازه حاوی «<html> <html> <!-- بخش استایلهای اختصاصی و واکنشگرا --> <style> .wiki-province-container { direction: rtl; margin: 5px auto; max-width: 1200px; padding: 10px; } .wiki-province-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 15px !important; } .wiki-province-card { background: #ffffff; border: 1.5px solid #8ee0d8; /*...» ایجاد کرد |
Esfandiari (بحث | مشارکتها) بدون خلاصۀ ویرایش |
||
| خط ۱: | خط ۱: | ||
<html> | <html> | ||
< | <div class="mediawiki-category-container" style="direction: rtl; font-family: tahoma, arial; max-width: 900px; margin: 20px auto; padding: 15px; background: #f9f9f9; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);"> | ||
<!-- بخش جستجو --> | |||
<div class="search-box" style="margin-bottom: 20px; text-align: center;"> | |||
<input type="text" id="categorySearch" placeholder="جستجوی دستهبندی یا موضوع..." | |||
style="width: 80%; padding: 12px 20px; border: 2px solid #e0e0e0; border-radius: 25px; outline: none; font-size: 16px; transition: all 0.3s ease;"> | |||
</div> | |||
<!-- بخش فیلترها (دکمهها) --> | |||
<div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 25px;"> | |||
<button class="filter-btn active" onclick="filterSelection('all')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #16bd78; color: white; cursor: pointer;">همه</button> | |||
<button class="filter-btn" onclick="filterSelection('tech')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #eee; cursor: pointer;">تکنولوژی</button> | |||
<button class="filter-btn" onclick="filterSelection('art')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #eee; cursor: pointer;">هنر</button> | |||
<button class="filter-btn" onclick="filterSelection('science')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #eee; cursor: pointer;">علوم</button> | |||
</ | |||
<!-- | |||
<div class=" | |||
< | |||
< | |||
</div> | </div> | ||
< | <!-- شبکه کارتها (Grid) --> | ||
< | <div id="categoryGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;"> | ||
<!-- کارت نمونه 1 --> | |||
<div class="category-card tech" style="background: white; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;"> | |||
<h3 style="margin: 0; color: #333;">هوش مصنوعی</h3> | |||
<p style="font-size: 13px; color: #777;">12 مقاله</p> | |||
</div> | |||
<!-- کارت نمونه 2 --> | |||
<div class="category-card art" style="background: white; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-bottom: 4px solid #ff9f43;"> | |||
<h3 style="margin: 0; color: #333;">نقاشی دیجیتال</h3> | |||
<p style="font-size: 13px; color: #777;">8 مقاله</p> | |||
</div> | |||
<!-- کارت نمونه 3 --> | |||
<div class="category-card science" style="background: white; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-bottom: 4px solid #54a0ff;"> | |||
<h3 style="margin: 0; color: #333;">فیزیک کوانتوم</h3> | |||
<p style="font-size: 13px; color: #777;">5 مقاله</p> | |||
</div> | |||
<!-- کارت نمونه 4 --> | |||
<div class="category-card tech" style="background: white; padding: 20px; border-radius: 15px; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); border-bottom: 4px solid #16bd78;"> | |||
<h3 style="margin: 0; color: #333;">برنامهنویسی</h3> | |||
<p style="font-size: 13px; color: #777;">25 مقاله</p> | |||
</div> | |||
</div> | |||
</div> | </div> | ||
<script> | |||
// تابع فیلتر بر اساس دستهبندی | |||
function filterSelection(category) { | |||
const cards = document.getElementsByClassName("category-card"); | |||
const buttons = document.getElementsByClassName("filter-btn"); | |||
// تغییر استایل دکمه فعال | |||
for (let btn of buttons) { | |||
btn.classList.remove("active"); | |||
btn.style.background = "#eee"; | |||
btn.style.color = "black"; | |||
} | |||
event.currentTarget.classList.add("active"); | |||
event.currentTarget.style.background = "#16bd78"; | |||
event.currentTarget.style.color = "white"; | |||
// منطق فیلتر کردن کارتها | |||
for (let card of cards) { | |||
if (category === 'all') { | |||
card.style.display = "block"; | |||
} else { | |||
if (card.classList.contains(category)) { | |||
card.style.display = "block"; | |||
} else { | |||
card.style.display = "none"; | |||
} | |||
} | |||
} | |||
} | |||
// تابع جستجو (جستجوی متنی در عنوان کارتها) | |||
document.getElementById('categorySearch').addEventListener('keyup', function() { | |||
const searchValue = this.value.toLowerCase(); | |||
const cards = document.getElementsByClassName("category-card"); | |||
for (let card of cards) { | |||
const title = card.querySelector('h3').innerText.toLowerCase(); | |||
if (title.includes(searchValue)) { | |||
card.style.display = "block"; | |||
} else { | |||
card.style.display = "none"; | |||
} | |||
} | |||
}); | |||
</script> | |||
<style> | |||
/* استایلهای تکمیلی برای زیبایی بیشتر */ | |||
.filter-btn:hover { | |||
opacity: 0.8; | |||
} | |||
.category-card:hover { | |||
transform: translateY(-5px); | |||
transition: transform 0.3s ease; | |||
} | |||
</style> | |||
</html> | </html> | ||