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

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

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

@@ خط ۱: / خط ۱: @@
 <html>
+<html>
+<!-- بخش استایل‌های اختصاصی و واکنش‌گرا -->
+<style>
+  .wiki-province-container {
+    direction: rtl;
+    margin: 5px auto;
+    max-width: 1200px;
+    padding: 10px;
+  }
+  .wiki-province-grid {
+    display: grid !important;
+    grid-template-columns: repeat(4, 1fr) !important;
+    gap: 15px !important;
+  }
+  .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;
+    }
+  }
+</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>
      <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>
      <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>
      <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>
    </div>
 </div>
 </html>