الگو:صفحه اصلی/دسته بندی موضوعی: تفاوت میان نسخهها
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: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 15px; 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: 8px; justify-content: center; margin-bottom: 20px;"> | ||
<button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: | <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: | <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: | <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: | <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> | ||
<!-- شبکه | <!-- شبکه کارتهای مستطیلی باریک --> | ||
<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 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: | <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">هوش مصنوعی</span> | ||
<span style="font-size: | <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۱۲ مقاله</span> | ||
</div> | </div> | ||
<!-- کارت نمونه 2 --> | <!-- کارت نمونه 2 --> | ||
<div class="category-card art" style="background: white; padding: | <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: | <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">نقاشی دیجیتال</span> | ||
<span style="font-size: | <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۸ مقاله</span> | ||
</div> | </div> | ||
<!-- کارت نمونه 3 --> | <!-- کارت نمونه 3 --> | ||
<div class="category-card science" style="background: white; padding: | <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: | <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">فیزیک کوانتوم</span> | ||
<span style="font-size: | <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span> | ||
</div> | </div> | ||
<!-- کارت نمونه 4 --> | <!-- کارت نمونه 4 --> | ||
<div class="category-card tech" style="background: white; padding: | <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: | <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">برنامهنویسی</span> | ||
<span style="font-size: | <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۲۵ مقاله</span> | ||
</div> | </div> | ||
<div class="category-card art" style="background: white; padding: | <!-- کارت نمونه 5 --> | ||
<span class="card-title" style="font-weight: bold; color: #333; font-size: | <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 style="font-size: | <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> | </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: | gap: 12px; | ||
} | } | ||
/* | /* حالت موبایل: ۲ ستون */ | ||
@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: | .category-card { transition: all 0.2s ease; cursor: pointer; } | ||
.category-card:hover { transform: translateY(- | .category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } | ||
.filter-btn:hover { opacity: 0. | .filter-btn:hover { opacity: 0.8; } | ||
/* کلاس برای | /* کلاس مخفی سازی برای حل مشکل جستجو */ | ||
.is-hidden { | .is-hidden { | ||
display: none !important; | display: none !important; | ||
| خط ۷۸: | خط ۷۹: | ||
<script> | <script> | ||
// تابع فیلتر | // تابع فیلتر | ||
function filterSelection(event, 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"); | ||
// | // ریست کردن دکمهها | ||
for (let btn of buttons) { | for (let btn of buttons) { | ||
btn.style.background = "#eee"; | btn.style.background = "#eee"; | ||
btn.style.color = "black"; | btn.style.color = "black"; | ||
} | } | ||
// فعال کردن دکمه کلیک شده | |||
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') { | ||
| خط ۱۲۴: | خط ۱۲۳: | ||
}); | }); | ||
</script> | </script> | ||
</html> | </html> | ||