پرش به محتوا

صفحه اصلی مغازه شما/دسته بندی موضوعی - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<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="faraghaib-custom-container">


     <!-- بخش جستجو -->
     <!-- بخش جستجو -->
     <div class="search-box" style="margin-bottom: 20px; text-align: center;">
     <div class="fz-search-wrapper">
         <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;">
     </div>
     </div>


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


     <!-- شبکه کارت‌ها (Grid) -->
     <!-- شبکه کارت‌ها -->
     <div id="categoryGrid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px;">
     <div id="categoryGrid" class="fz-category-grid">
       
 
         <!-- کارت نمونه 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="fz-card tech">
             <h3 style="margin: 0; color: #333;">هوش مصنوعی</h3>
             <span class="fz-title">هوش مصنوعی</span>
            <p style="font-size: 13px; color: #777;">12 مقاله</p>
         </div>
         </div>


        <!-- کارت نمونه 2 -->
         <div class="fz-card art">
         <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;">
             <span class="fz-title">نقاشی دیجیتال</span>
             <h3 style="margin: 0; color: #333;">نقاشی دیجیتال</h3>
            <p style="font-size: 13px; color: #777;">8 مقاله</p>
         </div>
         </div>


        <!-- کارت نمونه 3 -->
         <div class="fz-card science">
         <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;">
             <span class="fz-title">فیزیک کوانتوم</span>
             <h3 style="margin: 0; color: #333;">فیزیک کوانتوم</h3>
            <p style="font-size: 13px; color: #777;">5 مقاله</p>
         </div>
         </div>


         <!-- کارت نمونه 4 -->
         <div class="fz-card tech">
         <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;">
            <span class="fz-title">برنامه‌نویسی</span>
            <h3 style="margin: 0; color: #333;">برنامه‌نویسی</h3>
        </div>
             <p style="font-size: 13px; color: #777;">25 مقاله</p>
 
         <div class="fz-card art">
            <span class="fz-title">طراحی گرافیک</span>
        </div>
 
        <div class="fz-card tech">
             <span class="fz-title">امنیت شبکه</span>
         </div>
         </div>


     </div>
     </div>
</div>
</div>
<style>
/* کانتینر اصلی */
.faraghaib-custom-container {
    direction: rtl !important;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    max-width: 1000px !important;
    margin: 20px auto !important;
    padding: 15px !important;
    background: #f9f9f9 !important;
    border-radius: 15px !important;
    border: 1px solid #c9e4d5 !important;
    display: block !important;
    box-sizing: border-box !important;
}
/* استایل ورودی جستجو */
.fz-search-wrapper { margin-bottom: 15px; text-align: center; }
.fz-search-wrapper input {
    width: 90%;
    padding: 10px 18px;
    border: 1px solid #c9e4d5;
    border-radius: 25px;
    outline: none;
    font-size: 15px;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    transition: 0.3s;
}
.fz-search-wrapper input:focus { border-color: #16bd78; box-shadow: 0 0 5px rgba(22, 189, 120, 0.2); }
/* استایل دکمه‌های فیلتر */
.fz-filter-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.fz-filter-btn {
    padding: 6px 18px;
    border-radius: 20px;
    border: none;
    background: #eee;
    cursor: pointer;
    font-size: 14px;
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    transition: 0.3s;
}
.fz-filter-btn.active { background: #16bd78 !important; color: white !important; font-weight: bold; }
/* چیدمان شبکه کارت‌ها */
.fz-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    width: 100% !important;
}
/* استایل کارت نهایی */
.fz-card {
    background: white !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    border-bottom: 4px solid #ddd !important; /* خط رنگی پایین */
    box-sizing: border-box !important;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 0 !important;
}
.fz-card:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; }
/* استایل فونت داخل کارت (بزرگ شده) */
.fz-title {
    font-family: 'IRANSans', 'IRANSansWeb', Tahoma, Arial, sans-serif !important;
    font-weight: 500 !important;
    color: #333 !important;
    font-size: 16px !important; /* اندازه فونت بزرگ شده */
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* رنگ‌بندی دسته‌بندی‌ها */
.fz-card.tech { border-bottom-color: #16bd78 !important; }
.fz-card.art { border-bottom-color: #ff9f43 !important; }
.fz-card.science { border-bottom-color: #54a0ff !important; }
/* واکنش‌گرایی موبایل */
@media (max-width: 768px) {
    .fz-category-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* کلاس مخفی‌سازی برای فیلتر و جستجو */
.is-hidden { display: none !important; }
</style>


<script>
<script>
// تابع فیلتر بر اساس دسته‌بندی
// تابع فیلتر دسته‌بندی
function filterSelection(category) {
function filterSelection(event, category) {
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("fz-card");
     const buttons = document.getElementsByClassName("filter-btn");
     const buttons = document.getElementsByClassName("fz-filter-btn");
 
   
     // تغییر استایل دکمه فعال
     // حذف حالت فعال از همه دکمه‌ها
     for (let btn of buttons) {
     for (let btn of buttons) btn.classList.remove("active");
        btn.classList.remove("active");
     // اضافه کردن حالت فعال به دکمه کلیک شده
        btn.style.background = "#eee";
        btn.style.color = "black";
     }
     event.currentTarget.classList.add("active");
     event.currentTarget.classList.add("active");
    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.classList.contains(category)) {
             card.style.display = "block";
             card.classList.remove("is-hidden");
         } else {
         } else {
             if (card.classList.contains(category)) {
             card.classList.add("is-hidden");
                card.style.display = "block";
            } else {
                card.style.display = "none";
            }
         }
         }
     }
     }
}
}


// تابع جستجو (جستجوی متنی در عنوان کارت‌ها)
// تابع جستجوی زنده
document.getElementById('categorySearch').addEventListener('keyup', function() {
document.getElementById('categorySearch').addEventListener('keyup', function() {
     const searchValue = this.value.toLowerCase();
     const val = this.value.toLowerCase().trim();
     const cards = document.getElementsByClassName("category-card");
     const cards = document.getElementsByClassName("fz-card");


     for (let card of cards) {
     for (let card of cards) {
         const title = card.querySelector('h3').innerText.toLowerCase();
         const title = card.querySelector('.fz-title').innerText.toLowerCase();
         if (title.includes(searchValue)) {
         if (title.includes(val)) {
             card.style.display = "block";
             card.classList.remove("is-hidden");
         } else {
         } else {
             card.style.display = "none";
             card.classList.add("is-hidden");
         }
         }
     }
     }
خط ۹۲: خط ۱۸۰:
</script>
</script>


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


</html>
</html>

نسخهٔ کنونی تا ‏۷ اوت ۲۰۲۶، ساعت ۱۸:۰۴

هوش مصنوعی
نقاشی دیجیتال
فیزیک کوانتوم
برنامه‌نویسی
طراحی گرافیک
امنیت شبکه

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=الگو:صفحه_اصلی_مغازه_شما/دسته_بندی_موضوعی&oldid=5582»