الگو:چیدمان تصاویر: تفاوت میان نسخه‌ها

بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۴: خط ۴:
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             border-radius: 16px; /* منحنی کردن گوشه‌های کل باکس گالری */
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
             box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* ایجاد سایه ملایم دور کادر */
             box-sizing: border-box;">
             box-sizing: border-box;{{{style|}}};">


     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
خط ۱۱: خط ۱۱:
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ اول */
{{{first big border style|}}};">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;{{{first big picture style|}}};">
                 [[File:3.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ اول: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <!-- کپشن تک‌خطی تصویر بزرگ اول: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{first caption big style|}}};">
آقای خلیفه
توضیحات تصویر 1
             </div>
             </div>
         </div>
         </div>
خط ۲۶: خط ۲۷:
         <!-- عکس بزرگ دوم -->
         <!-- عکس بزرگ دوم -->
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
         <div style="flex: 1 1 calc(50% - 5px); max-width: 485px; min-width: 0; display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 1px; box-sizing: border-box;  
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */">
                     border-radius: 15px; /* منحنی کردن گوشه‌های کادر تصویر بزرگ دوم */
{{{second big border style|}}};">
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <!-- نگهدارنده تصویر بزرگ جهت برش و هم‌ترازی با نسبت ۴:۳ -->
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;">
             <div style="width: 100%; aspect-ratio: 4/3; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 9px;{{{second big picture style|}}};">
                 [[File:7.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1.1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{second caption big style|}}};">
دیده بان؛چشم سوم
توضیحات تصویر2
             </div>
             </div>
         </div>
         </div>
خط ۴۲: خط ۴۴:


     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;">
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center; width: 100%;{{{second row style|}}}">
          
          
         <!-- عکس کوچک ۱ -->
         <!-- عکس کوچک ۱ -->
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */
{{{first small border style|}}};">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{first small picture style|}}};">
                 [[File:1.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{first small caption style|}}};">
<!--توضیحات-->  
<!-- توضیحات تصویر کوچک1-->  
             </div>
             </div>
         </div>
         </div>
خط ۶۱: خط ۶۴:
         <!-- عکس کوچک ۲ -->
         <!-- عکس کوچک ۲ -->
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
         <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #3b82f6; background-color: #ffffff; padding: 4px; box-sizing: border-box;  
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */
{{{second small border style|}}};">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;{{{second small picture style|}}};">
                 [[File:22.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;{{{second small caption style|}}};">
<!--توضیحات-->  
<!--توضیحات تصویر کوچک2-->  
             </div>
             </div>
         </div>
         </div>
خط ۷۹: خط ۸۳:
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:4.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
خط ۸۵: خط ۸۹:
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<!--توضیحات-->  
<!--توضیحات تصویر کوچک3-->  
             </div>
             </div>
         </div>
         </div>
خط ۹۴: خط ۹۸:
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 8px;">
                 [[File:9.jpg|thumb|link=|class=not-resized|center]]
                 [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
خط ۱۰۰: خط ۱۰۴:
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         line-height: 1; border: none; background: transparent; box-shadow: none; outline: none;
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
<!--توضیحات-->  
<!--توضیحات تصویر کوچک4-->  
             </div>
             </div>
         </div>
         </div>
خط ۱۰۷: خط ۱۱۱:


</div>
</div>
{{صفحه اصلی/قاب
|heading style = background: #89CFF0;text-align: center;
|عنوان = نصــب دوربیــن مــدار بستــه
|محتوا = من خلیفه هستم، متخصص سیستم‌های امنیتی و بنیان‌گذار برند '''« دیـــــده بــان »'''.
خرید و فروش ونصب انواع دوربین های مدار بسته AHD و IP و نصب دزدگیرهای اماکن برای مراکز صنعتی، مسکونی، اداری، تجاری و جک اتوماتیک، ایفون و...
افتخار دارم که در منطقه، به عنوان یکی از متخصصین شناخته‌شده در این حوزه فعالیت می‌کنم. هدف من در «دیده بان» فقط نصب یک دوربین نیست؛ هدف من این است که با تکیه بر سال‌ها تجربه، چشمِ مراقب و مطمئن شما باشم.
با '''« دیـــــده بــان »'''، امنیت را با تخصص تجربه کنید.
}}
{{صفحه اصلی/قاب
|heading style = background: #89CFF0;text-align: center;
|عنوان = چرا دیده‌بان انتخاب خوبی است؟
|محتوا =
* تجربه بالا در نصب دوربین مداربسته
* اجرای دقیق و اصولی
* مشاوره صادقانه قبل از نصب
* استفاده از تجهیزات مناسب
* پشتیبانی پس از اجرا
* قیمت‌گذاری منصفانه
* توجه به نیاز واقعی مشتری
* اجرای پروژه برای خانه، مغازه، شرکت و ساختمان
*
وقتی کار نصب دوربین به یک فرد باتجربه سپرده می‌شود، خیال شما از بابت امنیت، کیفیت تصویر و عملکرد درست سیستم راحت‌تر خواهد بود.
}}
{{صفحه اصلی/قاب
|heading style = background: #89CFF0;text-align: center;
|عنوان = راه های ارتباطی
|محتوا = <!-- قاب دوم:  -->
<div class="wiki-custom-card">
<div class="wiki-custom-body">
<div class="wiki-list-item">
<span class="wiki-icon-span">☎️</span> '''شماره تماس:'''&nbsp;[tel:09191606778 ۰۹۱۹۱۶۰۶۷۷۸] <span style="font-size:0.85em; color:#7f8c8d;"></span>
</div>
<div class="wiki-list-item">
<span class="wiki-icon-span">📷</span> '''اینستاگرام:'''&nbsp;[https://instagram.com/dideban021 dideban021@]
</div>
<div class="wiki-list-item">
<span class="wiki-icon-span">📌</span> آدرس: &nbsp;[https://neshan.org//search?q=نسیم+شهر+خیابان+چمران نسیم شهر - خیابان چمران''']
</div>
<div class="wiki-list-item" style="display: block;">
<span class="wiki-icon-span">🚀</span> '''رزرو سریع و مشاوره:'''
[tel:09191606778 ۰۹۱۹۱۶۰۶۷۷۸]
📞 ثبت درخواست و مشاوره تلفنی
</div>
</div>
</div>
</div>
}}