فراغیب

الگو:صفحه اصلی مغازه شما/دسته بندی موضوعی: تفاوت میان نسخه‌ها

→ تفاوت با ویرایش قدیمی‌ترتفاوت با ویرایش جدیدتر ←
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۱: خط ۱:
<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="mediawiki-category-container" style="direction: rtl; font-family: tahoma, arial; max-width: 800px; 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: 20px; 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: 80%; padding: 12px 20px; border: 2px solid #e0e0e0; border-radius: 25px; outline: none; font-size: 16px; transition: all 0.3s ease;">
               style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 14px; transition: all 0.3s ease;">
     </div>
     </div>


     <!-- بخش فیلترها (دکمه‌ها) -->
     <!-- بخش فیلترها -->
     <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 25px;">
     <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('all')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #16bd78; color: white; cursor: pointer;">همه</button>
         <button class="filter-btn active" onclick="filterSelection('all')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 13px;">همه</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('tech')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">تکنولوژی</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('art')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">هنر</button>
         <button class="filter-btn" onclick="filterSelection('science')" style="padding: 8px 18px; border-radius: 20px; border: none; background: #eee; cursor: pointer;">علوم</button>
         <button class="filter-btn" onclick="filterSelection('science')" style="padding: 5px 15px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 13px;">علوم</button>
     </div>
     </div>


     <!-- شبکه کارت‌ها (Grid) -->
     <!-- لیست کارت‌های ظریف (تغییر یافته برای کوچیک شدن) -->
     <div id="categoryGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
     <div id="categoryGrid" style="display: flex; flex-direction: column; gap: 10px;">
          
          
         <!-- کارت نمونه 1 -->
         <!-- کارت نمونه 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;">
         <div class="category-card tech" style="display: flex; align-items: center; justify-content: space-between; background: white; padding: 10px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
             <h3 style="margin: 0; color: #333;">هوش مصنوعی</h3>
             <div style="display: flex; align-items: center; gap: 15px;">
             <p style="font-size: 13px; color: #777;">12 مقاله</p>
                <span style="font-weight: bold; color: #333; font-size: 15px;">هوش مصنوعی</span>
             </div>
            <span style="font-size: 12px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px;">۱۲ مقاله</span>
         </div>
         </div>


         <!-- کارت نمونه 2 -->
         <!-- کارت نمونه 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;">
         <div class="category-card art" style="display: flex; align-items: center; justify-content: space-between; background: white; padding: 10px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-right: 5px solid #ff9f43;">
             <h3 style="margin: 0; color: #333;">نقاشی دیجیتال</h3>
             <div style="display: flex; align-items: center; gap: 15px;">
             <p style="font-size: 13px; color: #777;">8 مقاله</p>
                <span style="font-weight: bold; color: #333; font-size: 15px;">نقاشی دیجیتال</span>
             </div>
            <span style="font-size: 12px; color: #777; background: #fff7ed; padding: 2px 8px; border-radius: 10px;">۸ مقاله</span>
         </div>
         </div>


         <!-- کارت نمونه 3 -->
         <!-- کارت نمونه 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;">
         <div class="category-card science" style="display: flex; align-items: center; justify-content: space-between; background: white; padding: 10px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-right: 5px solid #54a0ff;">
             <h3 style="margin: 0; color: #333;">فیزیک کوانتوم</h3>
             <div style="display: flex; align-items: center; gap: 15px;">
             <p style="font-size: 13px; color: #777;">5 مقاله</p>
                <span style="font-weight: bold; color: #333; font-size: 15px;">فیزیک کوانتوم</span>
             </div>
            <span style="font-size: 12px; color: #777; background: #eff6ff; padding: 2px 8px; border-radius: 10px;">۵ مقاله</span>
         </div>
         </div>


         <!-- کارت نمونه 4 -->
         <!-- کارت نمونه 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;">
         <div class="category-card tech" style="display: flex; align-items: center; justify-content: space-between; background: white; padding: 10px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); border-right: 5px solid #16bd78;">
             <h3 style="margin: 0; color: #333;">برنامه‌نویسی</h3>
             <div style="display: flex; align-items: center; gap: 15px;">
             <p style="font-size: 13px; color: #777;">25 مقاله</p>
                <span style="font-weight: bold; color: #333; font-size: 15px;">برنامه‌نویسی</span>
             </div>
            <span style="font-size: 12px; color: #777; background: #f0fdf4; padding: 2px 8px; border-radius: 10px;">۲۵ مقاله</span>
         </div>
         </div>


خط ۴۷: خط ۵۵:


<script>
<script>
// تابع فیلتر بر اساس دسته‌بندی
function filterSelection(category) {
function filterSelection(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.classList.remove("active");
         btn.style.background = "#eee";
         btn.style.background = "#eee";
         btn.style.color = "black";
         btn.style.color = "black";
     }
     }
    event.currentTarget.classList.add("active");
     event.currentTarget.style.background = "#16bd78";
     event.currentTarget.style.background = "#16bd78";
     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 = "block";
             card.style.display = "flex";
         } else {
         } else {
             if (card.classList.contains(category)) {
             if (card.classList.contains(category)) {
                 card.style.display = "block";
                 card.style.display = "flex";
             } else {
             } else {
                 card.style.display = "none";
                 card.style.display = "none";
خط ۷۶: خط ۷۹:
}
}


// تابع جستجو (جستجوی متنی در عنوان کارت‌ها)
document.getElementById('categorySearch').addEventListener('keyup', function() {
document.getElementById('categorySearch').addEventListener('keyup', function() {
     const searchValue = this.value.toLowerCase();
     const searchValue = this.value.toLowerCase();
خط ۸۲: خط ۸۴:


     for (let card of cards) {
     for (let card of cards) {
         const title = card.querySelector('h3').innerText.toLowerCase();
         const title = card.querySelector('span').innerText.toLowerCase();
         if (title.includes(searchValue)) {
         if (title.includes(searchValue)) {
             card.style.display = "block";
             card.style.display = "flex";
         } else {
         } else {
             card.style.display = "none";
             card.style.display = "none";
خط ۹۳: خط ۹۵:


<style>
<style>
/* استایل‌های تکمیلی برای زیبایی بیشتر */
.filter-btn:hover { opacity: 0.8; }
.filter-btn:hover {
.category-card { transition: all 0.2s ease; cursor: pointer; }
    opacity: 0.8;
.category-card:hover { transform: translateX(-5px); background: #fdfdfd; }
}
.category-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}
</style>
</style>


</html>
</html>
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی»