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

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

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

{{کادر-شمارنده
 | icon     = Icon-book.png
 | iconsize = 70px
 | title    = کتاب‌ها
 | start    = 1
 | end      = 232
 | speed    = 30
 | bgcolor  = #fffbe6
}}

@@ خط ۱: / خط ۱: @@
-<!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: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  <div class="animated-counter"
-            background-color: #f5f5f5;
+       data-start="{{{start|1}}}"
-            display: flex;
+       data-end="{{{end|100}}}"
-            justify-content: center;
+       data-speed="{{{speed|30}}}"
-            align-items: center;
+       style="font-size:16px; color:#333;">
-            height: 100vh;
+    {{{start|1}}}
-            margin: 0;
+  </div>
-            padding: 20px;
+</div>
-        }
+</includeonly>
+<noinclude>
-        .شمارشی {
+'''نحوه استفاده:'''
-            width: 200px;
+<pre>
-            height: 200px;
+{{کادر-شمارنده
-            border: 2px solid #3498db;
+ | icon     = Icon-book.png
-            border-radius: 10px;
+ | iconsize = 70px
-            display: flex;
+ | title    = کتاب‌ها
-            flex-direction: column;
+ | start    = 1
-            justify-content: center;
+ | end      = 232
-            align-items: center;
+ | speed    = 30
-            background: #f8f9fa;
+ | bgcolor  = #fffbe6
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}}
-            padding: 15px;
+</pre>
-            text-align: center;
+</noinclude>
-        }
-        .شمارشی-آیکن {
-            font-size: 48px;
-            margin-bottom: 10px;
-            color: #3498db;
-        }
-        .شمارشی-عنوان {
-            font-size: 18px;
-            margin: 5px 0;
-            color: #2c3e50;
-        }
-        .شمارشی-عدد {
-            font-size: 24px;
-            font-weight: bold;
-            color: #e74c3c;
-            margin-top: 10px;
-        }
-    </style>
-</head>
-<body>
-    <!-- این کد را در ویکی خود کپی کنید -->
-    <div class="شمارشی">
-        <div class="شمارشی-آیکن">📚</div>
-        <div class="شمارشی-عنوان">کتاب خانه</div>
-        <div class="شمارشی-عدد" id="شمارنده">1</div>
-    </div>
-    <script>
-        // شمارنده از 1 تا 199
-        let شمارنده = 1;
-        const عنصرشمارنده = document.getElementById('شمارنده');
-        const بازه = setInterval(() => {
-            شمارنده++;
-            عنصرشمارنده.textContent = شمارنده;
-            if(شمارنده >= 199) clearInterval(بازه);
-        }, 100);
-    </script>
-</body>
-</html>