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

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

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

@@ خط ۱: / خط ۱: @@
 <html>
-.wiki-province-container {
+<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;">
-  direction: rtl;
-  margin: 5px auto;
+    <!-- بخش جستجو -->
-  max-width: 1400px;
+    <div class="search-box" style="margin-bottom: 15px; text-align: center;">
-  padding: 10px;
+        <input type="text" id="categorySearch" placeholder="جستجو در دسته‌بندی‌ها..."
+               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 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>
+        <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: 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: 6px 16px; border-radius: 15px; border: none; background: #eee; cursor: pointer; font-size: 14px;">علوم</button>
+    </div>
+    <!-- شبکه کارت‌های مستطیلی باریک -->
+    <div id="categoryGrid" class="category-grid">
+        <!-- کارت نمونه 1 -->
+        <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: 16px;">هوش مصنوعی</span>
+            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۱۲ مقاله</span>
+        </div>
+        <!-- کارت نمونه 2 -->
+        <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: 16px;">نقاشی دیجیتال</span>
+            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۸ مقاله</span>
+        </div>
+        <!-- کارت نمونه 3 -->
+        <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: 16px;">فیزیک کوانتوم</span>
+            <span style="font-size: 13px; color: #555; background: #eff6ff; padding: 2px 10px; border-radius: 10px;">۵ مقاله</span>
+        </div>
+        <!-- کارت نمونه 4 -->
+        <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: 16px;">برنامه‌نویسی</span>
+            <span style="font-size: 13px; color: #555; background: #f0fdf4; padding: 2px 10px; border-radius: 10px;">۲۵ مقاله</span>
+        </div>
+        <!-- کارت نمونه 5 -->
+        <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: 16px;">طراحی گرافیک</span>
+            <span style="font-size: 13px; color: #555; background: #fff7ed; padding: 2px 10px; border-radius: 10px;">۱۰ مقاله</span>
+        </div>
+    </div>
+</div>
+<style>
+/* تنظیمات گرید اصلی */
+.category-grid {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr); /* ۴ ستون در دسکتاپ */
+    gap: 12px;
 }
-.wiki-province-grid {
+/* حالت موبایل: ۲ ستون */
-  display: grid !important;
+@media (max-width: 768px) {
-  grid-template-columns: repeat(5, 1fr) !important;
+    .category-grid {
-  gap: 12px !important;
+        grid-template-columns: repeat(2, 1fr);
+    }
 }
-.wiki-province-card {
+/* استایل‌ها */
-  background: #ffffff;
+.category-card { transition: all 0.2s ease; cursor: pointer; }
-  border: 1.5px solid #8ee0d8;
+.category-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
-  border-radius: 8px;
+.filter-btn:hover { opacity: 0.8; }
-  padding: 14px 6px;
-  text-align: center;
+/* کلاس مخفی سازی برای حل مشکل جستجو */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
+.is-hidden {
-  transition: all 0.3s ease;
+    display: none !important;
-  cursor: pointer;
-  color: #2d3748 !important;
-  font-weight: 400;
-  font-size: clamp(10px, 0.9vw, 13px) !important;
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: clip !important;
-  display: block !important;
-  text-decoration: none !important;
-  line-height: 1.5;
 }
+</style>
+<script>
+// تابع فیلتر
+function filterSelection(event, category) {
+    const cards = document.getElementsByClassName("category-card");
+    const buttons = document.getElementsByClassName("filter-btn");
-.wiki-province-card:hover {
+    // ریست کردن دکمه‌ها
-  transform: translateY(-3px);
+    for (let btn of buttons) {
-  box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15);
+        btn.style.background = "#eee";
-  border-color: #65c3ba;
+        btn.style.color = "black";
-  color: #65c3ba !important;
+    }
-  text-decoration: none !important;
+    // فعال کردن دکمه کلیک شده
-}
+    event.currentTarget.style.background = "#16bd78";
+    event.currentTarget.style.color = "white";
-.wiki-province-card:visited {
+    for (let card of cards) {
-  color: #2d3748 !important;
+        if (category === 'all') {
+            card.classList.remove("is-hidden");
+        } else {
+            if (card.classList.contains(category)) {
+                card.classList.remove("is-hidden");
+            } else {
+                card.classList.add("is-hidden");
+            }
+        }
+    }
 }
-.wiki-province-card:focus {
+// تابع جستجو
-  outline: none;
+document.getElementById('categorySearch').addEventListener('keyup', function() {
-  border-color: #65c3ba;
+    const searchValue = this.value.toLowerCase().trim();
-  box-shadow: 0 0 0 3px rgba(101, 195, 186, 0.18);
+    const cards = document.getElementsByClassName("category-card");
-}
-@media (max-width: 992px) {
+    for (let card of cards) {
-  .wiki-province-grid {
+        const titleElement = card.querySelector('.card-title');
-    grid-template-columns: repeat(3, 1fr) !important;
+        const titleText = titleElement.innerText.toLowerCase();
-  }
-  .wiki-province-card {
+        if (titleText.includes(searchValue)) {
-    font-size: clamp(9.5px, 1.1vw, 12px) !important;
+            card.classList.remove("is-hidden");
-  }
+        } else {
-}
+            card.classList.add("is-hidden");
+        }
+    }
+});
+</script>
-@media (max-width: 768px) {
-  .wiki-province-grid {
-    grid-template-columns: repeat(2, 1fr) !important;
-    gap: 10px !important;
-  }
-  .wiki-province-card {
-    padding: 12px 4px !important;
-    font-size: clamp(9px, 2.6vw, 11.5px) !important;
-  }
-}
 </html>