الگو:جعبه اطلاعات کتاب: تفاوت میان نسخه‌ها

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

نسخهٔ ‏۲۶ اکتبر ۲۰۲۵، ساعت ۱۲:۴۳

       [[پرونده:|200px|فریم|پیوند=|alt=جلد کتاب]]

نویسنده:

ناشر:

سال انتشار:

تعداد صفحات:

           [[:پرونده:|دانلود و مطالعه کتاب]]

   display: flex;
   flex-direction: row;
   direction: rtl;
   gap: 20px;
   margin: 15px 0;
   padding: 20px;
   border: 1px solid #e0e0e0;
   background: #ffffff;
   border-radius: 8px;

}

.book-cover {

   flex: 0 0 200px;
   text-align: center;

}

.book-details {

   flex: 1;

}

.download-btn {

   text-align: center;
   margin-top: 15px;

} .download-btn a {

   color: #ff0000;
   font-weight: bold;
   text-decoration: none;

}

/* رسپانسیو برای موبایل */ @media only screen and (max-width: 768px) {

   .book-container {
       flex-direction: column; /* تغییر جهت به عمودی */
   }
   
   .book-cover {
       flex: none;
       width: 100%;
       margin-bottom: 15px;
   }

} </style>

@@ خط ۱: / خط ۱: @@
-<noinclude>
+<div class="book-container">
-{{توضیحات الگو | الگوی ساده برای نمایش اطلاعات کتاب }}
+     <!-- عکس کتاب -->
-</noinclude>
+    <div class="book-cover">
-<includeonly>
+        [[پرونده:{{{عکس|}}}|200px|فریم|پیوند={{{لینک_عکس|}}}|alt=جلد کتاب]]
-<div style="direction: rtl; margin: 15px 0; border: 1px solid #e0e0e0; padding: 20px; background: #ffffff; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
+    </div>
-     <div style="display: table; width: 100%;">
+    <!-- مشخصات کتاب -->
-        <!-- عکس کتاب سمت راست -->
+    <div class="book-details">
-        <div style="display: table-cell; vertical-align: top; width: 200px; padding-left: 20px; text-align: center;">
+        <h2>{{{عنوان|}}}</h2>
-            [[پرونده:{{{عکس|}}}|200px|فریم|پیوند={{{لینک_عکس|}}}|alt=جلد کتاب {{{عنوان|}}}]]
+        <p><strong>نویسنده:</strong> {{{نویسنده|}}}</p>
-        </div>
+        <p><strong>ناشر:</strong> {{{ناشر|}}}</p>
+        <p><strong>سال انتشار:</strong> {{{سال|}}}</p>
-        <!-- مشخصات کتاب سمت چپ -->
+        <p><strong>تعداد صفحات:</strong> {{{صفحات|}}}</p>
-        <div style="display: table-cell; vertical-align: top;">
-            <h2 style="margin: 0 0 15px 0; color: #2c3e50; font-size: 1.4em; border-bottom: 2px solid #3498db; padding-bottom: 8px;">{{{عنوان|}}}</h2>
+        <!-- دکمه دانلود -->
+        <div class="download-btn">
-            <div style="line-height: 1.8;">
+            [[:پرونده:{{{فایل_کتاب|}}}|<span>دانلود و مطالعه کتاب</span>]]
-                <strong>نویسنده:</strong> {{{نویسنده|}}}<br>
-                <strong>ناشر:</strong> {{{ناشر|}}}<br>
-                <strong>سال انتشار:</strong> {{{سال|}}}<br>
-                <strong>تعداد صفحات:</strong> {{{صفحات|}}}<br><br>
-                <!-- دکمه دانلود زیر تعداد صفحات -->
-                <div style="text-align: center; margin-top: 10px;">
-                    <span style="color: #ff0000; font-weight: bold; font-size: 1.1em;">
-                        [[:پرونده:{{{فایل_کتاب|}}}|دانلود و مطالعه کتاب]]
-                    </span>
-                </div>
-            </div>
          </div>
      </div>
 </div>
-</includeonly>
+<style>
+.book-container {
+    display: flex;
+    flex-direction: row;
+    direction: rtl;
+    gap: 20px;
+    margin: 15px 0;
+    padding: 20px;
+    border: 1px solid #e0e0e0;
+    background: #ffffff;
+    border-radius: 8px;
+}
+.book-cover {
+    flex: 0 0 200px;
+    text-align: center;
+}
+.book-details {
+    flex: 1;
+}
+.download-btn {
+    text-align: center;
+    margin-top: 15px;
+}
+.download-btn a {
+    color: #ff0000;
+    font-weight: bold;
+    text-decoration: none;
+}
+/* رسپانسیو برای موبایل */
+@media only screen and (max-width: 768px) {
+    .book-container {
+        flex-direction: column; /* تغییر جهت به عمودی */
+    }
+    .book-cover {
+        flex: none;
+        width: 100%;
+        margin-bottom: 15px;
+    }
+}
+</style>