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