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

→ تفاوت با ویرایش قدیمی‌تر تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

نسخهٔ ‏۷ اوت ۲۰۲۶، ساعت ۱۵:۳۸

هوش مصنوعی ۱۲ مقاله

نقاشی دیجیتال ۸ مقاله

فیزیک کوانتوم ۵ مقاله

برنامه‌نویسی ۲۵ مقاله

طراحی گرافیک ۱۰ مقاله

@@ خط ۱: / خط ۱: @@
 <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="search-box" style="margin-bottom: 15px; text-align: center;">
+        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
+               style="width: 90%; padding: 8px 15px; border: 1px solid #c9e4d5; border-radius: 20px; outline: none; font-size: 13px; transition: all 0.3s ease;">
+    </div>
+    <!-- بخش فیلترها -->
+    <div class="filter-bar" style="display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 15px;">
+        <button class="filter-btn active" onclick="filterSelection(event, 'all')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #16bd78; color: white; cursor: pointer; font-size: 12px;">همه</button>
+        <button class="filter-btn" onclick="filterSelection(event, 'tech')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">تکنولوژی</button>
+        <button class="filter-btn" onclick="filterSelection(event, 'art')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">هنر</button>
+        <button class="filter-btn" onclick="filterSelection(event, 'science')" style="padding: 4px 12px; border-radius: 12px; border: none; background: #eee; cursor: pointer; font-size: 12px;">علوم</button>
+    </div>
+    <!-- شبکه کارت‌ها -->
+    <div id="categoryGrid" class="category-grid">
+        <!-- کارت نمونه 1 -->
+        <div class="category-card tech" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #16bd78;">
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">هوش مصنوعی</span>
+            <span style="font-size: 10px; color: #777; background: #f0fdf4; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۱۲ مقاله</span>
+        </div>
+        <!-- کارت نمونه 2 -->
+        <div class="category-card art" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #ff9f43;">
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">نقاشی دیجیتال</span>
+            <span style="font-size: 10px; color: #777; background: #fff7ed; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۸ مقاله</span>
+        </div>
+        <!-- کارت نمونه 3 -->
+        <div class="category-card science" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #54a0ff;">
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">فیزیک کوانتوم</span>
+            <span style="font-size: 10px; color: #777; background: #eff6ff; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۵ مقاله</span>
+        </div>
+        <!-- کارت نمونه 4 -->
+        <div class="category-card tech" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #16bd78;">
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">برنامه‌نویسی</span>
+            <span style="font-size: 10px; color: #777; background: #f0fdf4; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۲۵ مقاله</span>
+        </div>
+        <div class="category-card art" style="background: white; padding: 8px; border-radius: 10px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.05); border-bottom: 3px solid #ff9f43;">
+            <span class="card-title" style="font-weight: bold; color: #333; font-size: 12px; display: block;">طراحی گرافیک</span>
+            <span style="font-size: 10px; color: #777; background: #fff7ed; padding: 1px 6px; border-radius: 8px; display: inline-block; margin-top: 3px;">۱۰ مقاله</span>
+        </div>
+    </div>
+</div>
 <style>
-  .wiki-province-container {
+/* تنظیمات گرید */
-    direction: rtl;
+.category-grid {
-    margin: 5px auto;
+     display: grid;
-    max-width: 1200px;
+     grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
-    padding: 10px;
+     gap: 10px;
-  }
+}
-  .wiki-province-grid {
-     display: grid !important;
+/* واکنش‌گرایی برای موبایل */
-     grid-template-columns: repeat(4, 1fr) !important;
+@media (max-width: 768px) {
-    gap: 15px !important;
+     .category-grid {
-  }
+        grid-template-columns: repeat(2, 1fr); /* ۲ ستون در موبایل */
-  .wiki-province-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(14px, 1.2vw, 17px) !important;
-    /* جلوگیری از شکستن متن و دوخطی شدن */
-    white-space: nowrap !important;
-    overflow: hidden !important;
-    text-overflow: ellipsis !important;
-    display: block !important;
-  }
-  .wiki-province-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) {
-     .wiki-province-grid {
-      grid-template-columns: repeat(2, 1fr) !important; /* ۲ کادر در هر ردیف */
-      gap: 10px !important;
      }
-    .wiki-province-card {
+}
-      padding: 12px 4px !important;
-      /* در موبایل اندازه فونت به صورت پویا با توجه به عرض صفحه بین 10.5px تا 14.5px تغییر می‌کند */
+/* استایل‌های کمکی */
-      font-size: clamp(10.5px, 3.5vw, 14.5px) !important;
+.category-card { transition: transform 0.2s ease; cursor: pointer; }
-    }
+.category-card:hover { transform: translateY(-3px); }
-  }
+.filter-btn:hover { opacity: 0.7; }
+/* کلاس برای مخفی کردن کارت‌ها بدون خراب کردن گرید */
+.is-hidden {
+    display: none !important;
+}
 </style>
-<!-- بدنه اصلی ساختار دسته‌بندی استان‌ها -->
-<div class="wiki-province-container">
-    <div style="text-align: center; margin-bottom: 15px;">
-        <h2 style="color: #2c3e50; border-bottom: 2px solid #65c3ba; display: inline-block; padding-bottom: 10px; font-weight: bold; font-size: 24px;"> دسته بندی موضوعی</h2>
-        <p style="color: #7f8c8d; font-size: 14px; margin-top: 10px;">برای مشاهده کسب‌وکارها، موضوع مورد نظر خود را انتخاب کنید.</p>
-    </div>
-<div class="wiki-province-container">
-  <div class="wiki-province-grid">
-    <a class="wiki-province-card" href="/wiki/مراکز_بهداشتی_و_درمانی">مراکز بهداشتی و درمانی</a>
-    <a class="wiki-province-card" href="/wiki/پوشاک_خیاطی_و_مد">پوشاک، خیاطی و مد</a>
-    <a class="wiki-province-card" href="/wiki/ادارات_و_خدمات_عمومی">ادارات و خدمات عمومی</a>
-    <a class="wiki-province-card" href="/wiki/لوازم_خانه_و_دکوراسیون">لوازم خانه و دکوراسیون</a>
-    <a class="wiki-province-card" href="/wiki/فناوری_دیجیتال_و_خدمات_اداری">فناوری، دیجیتال و خدمات اداری</a>
-    <a class="wiki-province-card" href="/wiki/حمل‌ونقل_باربری_و_لجستیک">حمل‌ونقل، باربری و لجستیک</a>
+<script>
-     <a class="wiki-province-card" href="/wiki/مواد_غذایی_و_خرید_روزمره">مواد غذایی و خرید روزمره</a>
+// تابع فیلتر دسته‌بندی
-     <a class="wiki-province-card" href="/wiki/صنعت_تولید_و_کارگاه">صنعت، تولید و کارگاه</a>
+function filterSelection(event, category) {
-     <a class="wiki-province-card" href="/wiki/طلا_جواهر_و_هدایا">طلا، جواهر و هدایا</a>
+     const cards = document.getElementsByClassName("category-card");
-     <a class="wiki-province-card" href="/wiki/ساختمان_املاک_و_تأسیسات">ساختمان، املاک و تأسیسات</a>
+     const buttons = document.getElementsByClassName("filter-btn");
+    // تغییر استایل دکمه‌ها
+     for (let btn of buttons) {
+        btn.style.background = "#eee";
+        btn.style.color = "black";
+    }
+     if(event) {
+        event.currentTarget.style.background = "#16bd78";
+        event.currentTarget.style.color = "white";
+    }
-     <a class="wiki-province-card" href="/wiki/چاپ_نشر_و_تبلیغات">چاپ، نشر و تبلیغات</a>
+     // فیلتر کردن کارت‌ها با استفاده از کلاس مخفی‌ساز
-     <a class="wiki-province-card" href="/wiki/کشاورزی_دام_و_شیلات">کشاورزی، دام و شیلات</a>
+     for (let card of cards) {
-    <a class="wiki-province-card" href="/wiki/سفر_گردشگری_و_اقامت">سفر، گردشگری و اقامت</a>
+        if (category === 'all') {
-    <a class="wiki-province-card" href="/wiki/حقوق_و_دفاتر_رسمی">حقوق و دفاتر رسمی</a>
+            card.classList.remove("is-hidden");
-     <a class="wiki-province-card" href="/wiki/تجارت_بازرگانی_و_مرز">تجارت، بازرگانی و مرز</a>
+        } else {
+            if (card.classList.contains(category)) {
+                card.classList.remove("is-hidden");
+            } else {
+                card.classList.add("is-hidden");
+            }
+        }
+     }
+}
-    <a class="wiki-province-card" href="/wiki/هتل_مراسم_و_تشریفات">هتل، مراسم و تشریفات</a>
+// تابع جستجو
-    <a class="wiki-province-card" href="/wiki/آموزش_و_پرورش">آموزش و پرورش</a>
+document.getElementById('categorySearch').addEventListener('keyup', function() {
-    <a class="wiki-province-card" href="/wiki/پزشکان_و_متخصصین">پزشکان و متخصصین</a>
+     const searchValue = this.value.toLowerCase().trim();
-     <a class="wiki-province-card" href="/wiki/ورزش_بازی_و_تفریح">ورزش، بازی و تفریح</a>
+     const cards = document.getElementsByClassName("category-card");
-     <a class="wiki-province-card" href="/wiki/خدمات_منزل_و_نظافت">خدمات منزل و نظافت</a>
-     <a class="wiki-province-card" href="/wiki/زیبایی_و_آرایشی">زیبایی و آرایشی</a>
+     for (let card of cards) {
-    <a class="wiki-province-card" href="/wiki/رستوران_کافه_و_پذیرایی">رستوران، کافه و پذیرایی</a>
+        const titleElement = card.querySelector('.card-title');
-    <a class="wiki-province-card" href="/wiki/روانشناسان_و_مشاوره">روانشناسان و مشاوره</a>
+        const titleText = titleElement.innerText.toLowerCase();
-    <a class="wiki-province-card" href="/wiki/خودرو_و_موتورسیکلت">خودرو و موتورسیکلت</a>
-    <a class="wiki-province-card" href="/wiki/فرهنگ_هنر_و_رسانه">فرهنگ، هنر و رسانه</a>
-  </div>
-</div>
+        if (titleText.includes(searchValue)) {
+            card.classList.remove("is-hidden");
+        } else {
+            card.classList.add("is-hidden");
+        }
+    }
+});
+</script>
 </html>