پرش به محتوا

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

از فراغیب
دیداریویکی‌متن
صفحه‌ای تازه حاوی «<html> <!-- بخش استایل‌های اختصاصی و واکنش‌گرا (در صورت استفاده همزمان در یک صفحه، کدهای CSS مشترک هستند) --> <style> .wiki-category-container { direction: rtl; margin: 40px auto; max-width: 1200px; padding: 10px; } .wiki-category-grid { display: grid !important; grid-template-columns: repeat(6, 1fr) !important; gap: 15px !im...» ایجاد کرد
 
بدون خلاصۀ ویرایش
 
(۲۱ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<html>
<html>
<!-- بخش استایل‌های اختصاصی و واکنش‌گرا (در صورت استفاده همزمان در یک صفحه، کدهای CSS مشترک هستند) -->
<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;">
<style>
  .wiki-category-container {
    direction: rtl;
    margin: 40px auto;
    max-width: 1200px;
    padding: 10px;
  }
 
  .wiki-category-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 15px !important;
  }
 
  .wiki-category-card {
    background: #ffffff;
    border: 1.5px solid #8ee0d8; /* رنگ پایه با ۲۵ درصد روشنایی بیشتر */
    border-radius: 8px;
    padding: 15px 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #2d3748;
    font-weight: 600;
   
    /* استفاده از clamp برای تغییر اندازه فونت پویا بین 14px تا 17px متناسب با عرض صفحه */
    font-size: clamp(13px, 1.1vw, 16px) !important;
   
    /* جلوگیری از شکستن متن و دوخطی شدن */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
 
  .wiki-category-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15);
    border-color: #65c3ba; /* تغییر رنگ به رنگ پایه در حالت هاور */
    color: #65c3ba;
  }


  /* تنظیمات نمایشگر موبایل و تبلت‌های کوچک */
    <!-- بخش جستجو -->
  @media (max-width: 768px) {
     <div class="search-box" style="margin-bottom: 15px; text-align: center;">
     .wiki-category-grid {
        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
      grid-template-columns: repeat(2, 1fr) !important; /* ۲ کادر در هر ردیف */
              style="width: 90%; padding: 10px 18px; border: 1px solid #c9e4d5; border-radius: 25px; outline: none; font-size: 15px; transition: all 0.3s ease;">
      gap: 10px !important;
     </div>
    }
   
    .wiki-category-card {
      padding: 12px 4px !important;
      /* تغییر اندازه فونت داینامیک در موبایل جهت جلوگیری از شکستن کلمات طولانی */
      font-size: clamp(10px, 3.2vw, 13.5px) !important;
     }
  }
</style>


<!-- بدنه اصلی ساختار دسته‌بندی موضوعی مشاغل -->
    <!-- بخش فیلترها -->
<div class="wiki-category-container">
    <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>
    <div style="text-align: center; margin-bottom: 30px;">
        <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>
         <h2 style="color: #2c3e50; border-bottom: 2px solid #65c3ba; display: inline-block; padding-bottom: 10px; font-weight: bold; font-size: 24px;">دسته‌بندی موضوعی مشاغل</h2>
         <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>
         <p style="color: #7f8c8d; font-size: 14px; margin-top: 10px;">برای مشاهده کسب‌وکارها، حوزه فعالیت مورد نظر خود را انتخاب کنید.</p>
        <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 class="wiki-category-grid">
     <div id="categoryGrid" class="category-grid">
          
          
         <!-- آموزش و پرورش -->
         <!-- کارت نمونه 1 -->
         <a href="/wiki/Category:آموزش_و_پرورش" style="text-decoration: none;">
         <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;">
             <div class="wiki-category-card" title="آموزش و پرورش">آموزش و پرورش</div>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">هوش مصنوعی</span>
         </a>
            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۱۲ مقاله</span>
         </div>


         <!-- ادارات و خدمات عمومی -->
         <!-- کارت نمونه 2 -->
         <a href="/wiki/Category:ادارات_و_خدمات_عمومی" style="text-decoration: none;">
         <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;">
             <div class="wiki-category-card" title="ادارات و خدمات عمومی">ادارات و خدمات عمومی</div>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">نقاشی دیجیتال</span>
         </a>
            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۸ مقاله</span>
         </div>


         <!-- پزشکان و متخصصین -->
         <!-- کارت نمونه 3 -->
         <a href="/wiki/Category:پزشکان_و_متخصصین" style="text-decoration: none;">
         <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;">
             <div class="wiki-category-card" title="پزشکان و متخصصین">پزشکان و متخصصین</div>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">فیزیک کوانتوم</span>
         </a>
            <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span>
         </div>


         <!-- پوشاک، خیاطی و مد -->
         <!-- کارت نمونه 4 -->
         <a href="/wiki/Category:پوشاک،_خیاطی_و_مد" style="text-decoration: none;">
         <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;">
             <div class="wiki-category-card" title="پوشاک، خیاطی و مد">پوشاک، خیاطی و مد</div>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">برنامه‌نویسی</span>
         </a>
            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۲۵ مقاله</span>
         </div>


         <!-- تجارت، بازرگانی و مرز -->
         <!-- کارت نمونه 5 -->
         <a href="/wiki/Category:تجارت،_بازرگانی_و_مرز" style="text-decoration: none;">
         <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;">
             <div class="wiki-category-card" title="تجارت، بازرگانی و مرز">تجارت، بازرگانی و مرز</div>
             <span class="card-title" style="font-weight: bold; color: #333; font-size: 16px;">طراحی گرافیک</span>
         </a>
            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۱۰ مقاله</span>
         </div>


        <!-- چاپ، نشر و تبلیغات -->
    </div>
        <a href="/wiki/Category:چاپ،_نشر_و_تبلیغات" style="text-decoration: none;">
</div>
            <div class="wiki-category-card" title="چاپ، نشر و تبلیغات">چاپ، نشر و تبلیغات</div>
        </a>


        <!-- حقوق و دفاتر رسمی -->
<style>
        <a href="/wiki/Category:حقوق_و_دفاتر_رسمی" style="text-decoration: none;">
/* تنظیمات گرید اصلی */
            <div class="wiki-category-card" title="حقوق و دفاتر رسمی">حقوق و دفاتر رسمی</div>
.category-grid {
        </a>
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
    gap: 12px;
}


        <!-- حمل‌ونقل، باربری و لجستیک -->
/* حالت موبایل: ۲ ستون */
         <a href="/wiki/Category:حمل‌ونقل،_باربری_و_لجستیک" style="text-decoration: none;">
@media (max-width: 768px) {
            <div class="wiki-category-card" title="حمل‌ونقل، باربری و لجستیک">حمل‌ونقل، باربری و لجستیک</div>
    .category-grid {
        </a>
         grid-template-columns: repeat(2, 1fr);
    }
}


        <!-- خدمات منزل و نظافت -->
/* استایل‌ها */
        <a href="/wiki/Category:خدمات_منزل_و_نظافت" style="text-decoration: none;">
.category-card { transition: all 0.2s ease; cursor: pointer; }
            <div class="wiki-category-card" title="خدمات منزل و نظافت">خدمات منزل و نظافت</div>
.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
        </a>
.filter-btn:hover { opacity: 0.8; }


        <!-- خودرو و موتورسیکلت -->
/* کلاس مخفی سازی برای حل مشکل جستجو */
        <a href="/wiki/Category:خودرو_و_موتورسیکلت" style="text-decoration: none;">
.is-hidden {
            <div class="wiki-category-card" title="خودرو و موتورسیکلت">خودرو و موتورسیکلت</div>
    display: none !important;
        </a>
}
</style>


        <!-- رستوران، کافه و پذیرایی -->
<script>
        <a href="/wiki/Category:رستوران،_کافه_و_پذیرایی" style="text-decoration: none;">
// تابع فیلتر
            <div class="wiki-category-card" title="رستوران، کافه و پذیرایی">رستوران، کافه و پذیرایی</div>
function filterSelection(event, category) {
        </a>
    const cards = document.getElementsByClassName("category-card");
    const buttons = document.getElementsByClassName("filter-btn");


        <!-- روانشناسان و مشاوره -->
    // ریست کردن دکمه‌ها
         <a href="/wiki/Category:روانشناسان_و_مشاوره" style="text-decoration: none;">
    for (let btn of buttons) {
            <div class="wiki-category-card" title="روانشناسان و مشاوره">روانشناسان و مشاوره</div>
         btn.style.background = "#eee";
        </a>
        btn.style.color = "black";
    }
    // فعال کردن دکمه کلیک شده
    event.currentTarget.style.background = "#16bd78";
    event.currentTarget.style.color = "white";


        <!-- زیبایی و آرایشی -->
    for (let card of cards) {
         <a href="/wiki/Category:زیبایی_و_آرایشی" style="text-decoration: none;">
         if (category === 'all') {
             <div class="wiki-category-card" title="زیبایی و آرایشی">زیبایی و آرایشی</div>
            card.classList.remove("is-hidden");
         </a>
        } else {
             if (card.classList.contains(category)) {
                card.classList.remove("is-hidden");
            } else {
                card.classList.add("is-hidden");
            }
         }
    }
}


        <!-- ساختمان، املاک و تأسیسات -->
// تابع جستجو
        <a href="/wiki/Category:ساختمان،_املاک_و_تأسیسات" style="text-decoration: none;">
document.getElementById('categorySearch').addEventListener('keyup', function() {
            <div class="wiki-category-card" title="ساختمان، املاک و تأسیسات">ساختمان، املاک و تأسیسات</div>
    const searchValue = this.value.toLowerCase().trim();
        </a>
    const cards = document.getElementsByClassName("category-card");


        <!-- سفر، گردشگری و اقامت -->
    for (let card of cards) {
         <a href="/wiki/Category:سفر،_گردشگری_و_اقامت" style="text-decoration: none;">
         const titleElement = card.querySelector('.card-title');
            <div class="wiki-category-card" title="سفر، گردشگری و اقامت">سفر، گردشگری و اقامت</div>
        const titleText = titleElement.innerText.toLowerCase();
        </a>


         <!-- صنعت، تولید و کارگاه -->
         if (titleText.includes(searchValue)) {
        <a href="/wiki/Category:صنعت،_تولید_و_کارگاه" style="text-decoration: none;">
             card.classList.remove("is-hidden");
             <div class="wiki-category-card" title="صنعت، تولید و کارگاه">صنعت، تولید و کارگاه</div>
         } else {
        </a>
             card.classList.add("is-hidden");
 
         }
        <!-- طلا، جواهر و هدایا -->
    }
        <a href="/wiki/Category:طلا،_جواهر_و_هدایا" style="text-decoration: none;">
});
            <div class="wiki-category-card" title="طلا، جواهر و هدایا">طلا، جواهر و هدایا</div>
</script>
        </a>
 
        <!-- فرهنگ، هنر و رسانه -->
         <a href="/wiki/Category:فرهنگ،_هنر_و_رسانه" style="text-decoration: none;">
             <div class="wiki-category-card" title="فرهنگ، هنر و رسانه">فرهنگ، هنر و رسانه</div>
        </a>
 
        <!-- فناوری، دیجیتال و خدمات اداری -->
        <a href="/wiki/Category:فناوری،_دیجیتال_و_خدمات_اداری" style="text-decoration: none;">
            <div class="wiki-category-card" title="فناوری، دیجیتال و خدمات اداری">فناوری، دیجیتال و خدمات اداری</div>
         </a>
 
    </div>
</div>




</html>
</html>

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

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

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