فراغیب

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

→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۱۴ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<!-- شروع کانتینر اصلی گالری با پس‌زمینه آبی آسمانی ابر و بادی و چیدمان وسط‌چین -->
<div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;  
<div style="max-width: 1000px; margin: 0px auto; padding: 10px; direction: rtl; text-align: center;  
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 50%, #f0f9ff 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); /* ایجاد رنگ پس‌زمینه ابر و بادی */
             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;{{{style|}}};">


     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ) -->
     <!-- ردیف اول: دو عکس بزرگ (همواره کنار هم در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 5px;">
     <div style="display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; width: 100%;">
          
          
         <!-- عکس بزرگ اول -->
         <!-- عکس بزرگ اول -->
         <div style="flex: 1; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #B3D4FC; background-color:#C4B5FD; 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: 15px;">
             <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|350px|center]]
                 [[File:{{{تصویر1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ اول: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 2; 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; max-width: 480px; display: flex; flex-direction: column; align-items: center; border: 5px solid #B3D4FC; background-color: #C4B5FD; 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: 15px;">
             <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|350px|center]]
                 [[File:{{{تصویر2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر بزرگ دوم: فونت کوچک‌شده به 75% برای سازگاری کامل موبایل -->
             <div style="margin-top: 15px; font-size: 70%; color: #000000; font-weight: bold; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 3px; font-size: 75%; color: #000000; font-weight: bold; text-align: center; width: 95%;
                         line-height: 2; 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>
     </div>


     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ) -->
     <!-- ردیف دوم: چهار عکس کوچک (همواره در یک ردیف در موبایل و دسکتاپ بدون شکستن خط) -->
     <div style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; justify-content: center;">
     <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 #B3D4FC; background-color: #C4B5FD; 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; /* منحنی کردن گوشه‌های کادر تصویر کوچک اول */">
                     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: 15px;">
             <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|250px|center]]
                 [[File:{{{تصویر کوچک1}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک اول: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک اول: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; 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; 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 #B3D4FC; background-color: #C4B5FD; 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; /* منحنی کردن گوشه‌های کادر تصویر کوچک دوم */">
                     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: 15px;">
             <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|250px|center]]
                 [[File:{{{تصویر کوچک2}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک دوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک دوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; 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; 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="display: flex; flex-direction: column; align-items: center; border: 5px solid #B3D4FC; background-color: #C4B5FD; 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; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
                     border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک سوم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
             <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|250px|center]]
                 [[File:{{{تصویر کوچک3}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک سوم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک سوم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; 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; 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;">
دوربین 360 درجه
<!--توضیحات تصویر کوچک3-->
             </div>
             </div>
         </div>
         </div>


         <!-- عکس کوچک ۴ -->
         <!-- عکس کوچک ۴ -->
      <div style="display: flex; flex-direction: column; align-items: center; border: 5px solid #B3D4FC; background-color: #C4B5FD; 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; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
                    border-radius: 15px; min-width: 0; /* منحنی کردن گوشه‌های کادر تصویر کوچک چهارم */">
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <!-- نگهدارنده تصویر کوچک جهت برش مربعی ۱:۱ -->
             <div style="width: 100%; aspect-ratio: 1/1; overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: 15px;">
             <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|250px|center]]
                 [[File:{{{تصویر کوچک4}}}|thumb|link=|class=not-resized|center]]
             </div>
             </div>
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: وسط‌چین، بدون کادر، با فاصله کمتر -->
             <!-- کپشن تک‌خطی تصویر کوچک چهارم: فونت بسیار کوچک‌شده به 65% برای جلوگیری از تداخل متن -->
             <div style="margin-bottom: 1px; font-size: 80%; color: #000000; text-align: center; width: 100%;
             <div style="margin-top: 3px; margin-bottom: 1px; font-size: 65%; 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; 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;
|عنوان = خدمات خلیفه در برند دیده‌بان
|محتوا =
* نصب دوربین مداربسته
* فروش دوربین مداربسته
* راه‌اندازی سیستم‌های امنیتی و حفاظتی
* نصب DVR و NVR
* تنظیم انتقال تصویر روی موبایل
* سیم‌کشی و کابل‌کشی دوربین مداربسته
* تعمیر دوربین مداربسته
* پشتیبانی و سرویس دوره‌ای سیستم‌های نظارتی
* مشاوره برای انتخاب بهترین دوربین مداربست
ه
اگر برای محل کار یا منزل خود به دنبال بهترین راهکار امنیتی هستید، دیده‌بان با بررسی محیط و نیاز شما، مناسب‌ترین سیستم را پیشنهاد می‌دهد تا هم از نظر کیفیت و هم از نظر هزینه، بهترین نتیجه را بگیرید.
}}
{{صفحه اصلی/قاب
|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>
}}
برگرفته از «https://fa.faraghaib.ir/wiki/الگو:چیدمان_تصاویر»