پرش به محتوا

الگو:کادر-شمارنده: تفاوت میان نسخه‌ها

از ویکی امام رضا علیه السلام
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
جزبدون خلاصۀ ویرایش
برچسب: ویرایش مبدأ ۲۰۱۷
 
(۳۹ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!DOCTYPE html>
<includeonly>
<html lang="fa" dir="rtl">
<div class="counter-box" style="display:inline-block; vertical-align:top; margin:4px; width:130px; border:0px solid #ccc; padding:0em !important; border-radius: 8px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); text-align:center; border-radius:0px; font-family:Gandom; background-color:{{{bgcolor|#f9f9f9}}}; box-sizing:border-box;">
<head>
  <div style="margin-bottom:0px;">
    <meta charset="UTF-8">
    [[پرونده:{{{icon|Icon-book.png}}}|{{{iconsize|60px}}}|link=|class=noviewer]]
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </div>
    <title>راهنمای استفاده از الگو:شمارشی</title>
  <div style="font-weight:bold; font-size:16px; margin-bottom:0px;">
    <style>
     {{{title|عنوان پیش‌فرض}}}
        body {
   </div>
            font-family: 'Vazir', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  <div class="animated-counter"
            background-color: #f8f9fa;
      data-start="{{{start|1}}}"
            color: #222;
      data-end="{{{end|100}}}"
            line-height: 1.6;
      data-speed="{{{speed|30}}}"
            padding: 20px;
      style="font-size:16px; color:#333;">
            max-width: 1200px;
    {{{start|1}}}
            margin: 0 auto;
  </div>
        }
</div>
       
</includeonly>
        .header {
<noinclude>
            text-align: center;
'''نحوه استفاده:'''
            margin-bottom: 30px;
<pre>
            padding: 20px;
{{کادر-شمارنده
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
| icon    = Icon-book.png
            color: white;
| iconsize = 70px
            border-radius: 10px;
| title    = کتاب‌ها
        }
| start    = 1
       
| end      = 232
        .usage-section {
| speed    = 30
            background-color: #fff;
| bgcolor  = #fffbe6
            border: 1px solid #a2a9b1;
}}
            border-radius: 5px;
</pre>
            padding: 20px;
</noinclude>
            margin: 20px 0;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
       
        .usage-title {
            font-size: 1.5em;
            color: #0645ad;
            border-bottom: 2px solid #eaecf0;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }
       
        .code-block {
            background-color: #f8f9fa;
            border: 1px solid #eaecf0;
            padding: 15px;
            border-radius: 3px;
            font-family: monospace;
            direction: ltr;
            text-align: left;
            overflow-x: auto;
            margin: 15px 0;
        }
       
        .example-box {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin: 20px 0;
            justify-content: center;
        }
       
        .counter-box {
            width: 200px;
            height: 200px;
            border: 2px solid #3498db;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: #f8f9fa;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            margin: 10px;
        }
       
        .counter-icon {
            font-size: 48px;
            color: #3498db;
        }
       
        .counter-title {
            font-size: 18px;
            margin: 10px 0;
            color: #2c3e50;
        }
       
        .counter-number {
            font-size: 24px;
            font-weight: bold;
            color: #e74c3c;
            margin-top: 5px;
        }
       
        .try-button {
            display: inline-block;
            background-color: #3366cc;
            color: white;
            padding: 10px 15px;
            border-radius: 4px;
            text-decoration: none;
            margin: 10px 0;
            cursor: pointer;
            border: none;
            font-family: inherit;
        }
       
        .try-button:hover {
            background-color: #447ff5;
        }
       
        .note {
            background-color: #eaf3ff;
            border-right: 4px solid #36c;
            padding: 15px;
            margin: 15px 0;
        }
       
        .parameters {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }
       
        .parameters th, .parameters td {
            border: 1px solid #a2a9b1;
            padding: 8px 12px;
            text-align: right;
        }
       
        .parameters th {
            background-color: #eaecf0;
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>راهنمای استفاده از الگو:شمارشی</h1>
        <p>این راهنما نحوه استفاده از الگوی شمارشی در صفحات مختلف را توضیح می‌دهد</p>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">نحوه استفاده از الگو</h2>
       
        <p>برای استفاده از الگوی شمارشی در هر صفحه، کافی است کد زیر را در محل مورد نظر قرار دهید:</p>
       
        <div class="code-block">
&lt;div class="counter-box"&gt;
  &lt;div class="counter-icon"&gt;📚&lt;/div&gt;
  &lt;div class="counter-title"&gt;کتاب خانه&lt;/div&gt;
  &lt;div id="counter-1" class="counter-number"&gt;1&lt;/div&gt;
&lt;/div&gt;
 
&lt;script&gt;
  // شمارنده اول
  let count1 = 1;
  const counterElement1 = document.getElementById('counter-1');
  const interval1 = setInterval(() => {
    count1++;
    counterElement1.textContent = count1;
    if(count1 >= 199) clearInterval(interval1);
  }, 100);
&lt;/script&gt;
        </div>
       
        <div class="note">
            <strong>توجه:</strong> اگر می‌خواهید چند شمارنده در یک صفحه داشته باشید، باید برای هر کدام یک id منحصر به فرد تعریف کنید.
        </div>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">پارامترهای قابل تنظیم</h2>
       
        <table class="parameters">
            <tr>
                <th>پارامتر</th>
                <th>توضیح</th>
                <th>مقدار پیش‌فرض</th>
            </tr>
            <tr>
                <td>عنوان</td>
                <td>متن نمایش داده شده زیر آیکون</td>
                <td>کتاب خانه</td>
            </tr>
            <tr>
                <td>آیکون</td>
                <td>آیکون یا ایموجی نمایش داده شده</td>
                <td>📚</td>
            </tr>
            <tr>
                <td>شروع</td>
                <td>عدد شروع شمارنده</td>
                <td>1</td>
            </tr>
            <tr>
                <td>پایان</td>
                <td>عدد پایان شمارنده</td>
                <td>199</td>
            </tr>
            <tr>
                <td>سرعت</td>
                <td>سرعت شمارش (میلی‌ثانیه)</td>
                <td>100</td>
            </tr>
        </table>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">نمونه‌های عملی</h2>
       
        <p>در زیر چند نمونه از استفاده الگوی شمارشی را مشاهده می‌کنید:</p>
       
        <div class="example-box">
            <div class="counter-box">
                <div class="counter-icon">📚</div>
                <div class="counter-title">کتاب خانه</div>
                <div id="counter-1" class="counter-number">1</div>
            </div>
           
            <div class="counter-box">
                <div class="counter-icon">👥</div>
                <div class="counter-title">اعضا</div>
                <div id="counter-2" class="counter-number">1</div>
            </div>
           
            <div class="counter-box">
                <div class="counter-icon">📁</div>
                <div class="counter-title">پرونده‌ها</div>
                <div id="counter-3" class="counter-number">1</div>
            </div>
        </div>
       
        <button class="try-button" onclick="startAllCounters()">شروع همه شمارنده‌ها</button>
    </div>
   
    <div class="usage-section">
        <h2 class="usage-title">استفاده پیشرفته</h2>
       
        <p>برای تنظیمات پیشرفته‌تر، می‌توانید از پارامترهای مختلف استفاده کنید:</p>
       
        <div class="code-block">
&lt;div class="counter-box" style="width: 180px; height: 180px; border-color: #e74c3c;"&gt;
  &lt;div class="counter-icon" style="font-size: 40px; color: #e74c3c;"&gt;⭐&lt;/div&gt;
  &lt;div class="counter-title" style="font-size: 16px; color: #7f8c8d;"&gt;امتیاز&lt;/div&gt;
  &lt;div id="counter-4" class="counter-number" style="font-size: 28px; color: #27ae60;"&gt;1&lt;/div&gt;
&lt;/div&gt;
 
&lt;script&gt;
  // شمارنده با تنظیمات سفارشی
  let count4 = 1;
  const counterElement4 = document.getElementById('counter-4');
  const interval4 = setInterval(() => {
     count4++;
    counterElement4.textContent = count4;
    if(count4 >= 150) clearInterval(interval4);
   }, 50); // سرعت بیشتر
&lt;/script&gt;
        </div>
       
        <div class="example-box">
            <div class="counter-box" style="width: 180px; height: 180px; border-color: #e74c3c;">
                <div class="counter-icon" style="font-size: 40px; color: #e74c3c;">⭐</div>
                <div class="counter-title" style="font-size: 16px; color: #7f8c8d;">امتیاز</div>
                <div id="counter-4" class="counter-number" style="font-size: 28px; color: #27ae60;">1</div>
            </div>
        </div>
       
        <button class="try-button" onclick="startCustomCounter()">شروع شمارنده سفارشی</button>
    </div>
 
    <script>
        // شمارنده اول
        function startCounter1() {
            let count = 1;
            const counterElement = document.getElementById('counter-1');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 199) clearInterval(interval);
            }, 100);
        }
       
        // شمارنده دوم
        function startCounter2() {
            let count = 1;
            const counterElement = document.getElementById('counter-2');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 125) clearInterval(interval);
            }, 150);
        }
       
        // شمارنده سوم
        function startCounter3() {
            let count = 1;
            const counterElement = document.getElementById('counter-3');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 175) clearInterval(interval);
            }, 120);
        }
       
        // شمارنده سفارشی
        function startCustomCounter() {
            let count = 1;
            const counterElement = document.getElementById('counter-4');
            const interval = setInterval(() => {
                count++;
                counterElement.textContent = count;
                if(count >= 150) clearInterval(interval);
            }, 50);
        }
       
        // شروع همه شمارنده‌ها
        function startAllCounters() {
            startCounter1();
            startCounter2();
            startCounter3();
        }
       
        // شروع خودکار شمارنده‌ها هنگام بارگذاری صفحه
        window.onload = function() {
            // به طور پیشفرض، شمارنده‌ها به صورت خودکار شروع نمی‌شوند
            // کاربر باید دکمه شروع را فشار دهد
        };
    </script>
</body>
</html>

نسخهٔ کنونی تا ‏۷ سپتامبر ۲۰۲۵، ساعت ۱۳:۲۳


نحوه استفاده: 

{{کادر-شمارنده
 | icon     = Icon-book.png
 | iconsize = 70px
 | title    = کتاب‌ها
 | start    = 1
 | end      = 232
 | speed    = 30
 | bgcolor  = #fffbe6
}}
برگرفته از «http://zooha.ir/admin/index.php?title=الگو:کادر-شمارنده&oldid=3418»