پرش به محتوا

09123667263 - فراغیب

از فراغیب
→ تفاوت با ویرایش قدیمی‌تر
دیداریویکی‌متن
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
 
(۵ نسخهٔ میانیِ ایجادشده توسط همین کاربر نشان داده نشد)
خط ۱: خط ۱:
{{رنگ پس زمینه
<html lang="fa" dir="rtl">
|#73C2FB
 
|#b9defb
<link rel="stylesheet"
|#fff
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
}}
 
<style>
 
/* =========================================================
  ROOT
========================================================= */
 
.wiki-store{
    --ws-primary:#0b3157;
    --ws-primary-dark:#071f38;
    --ws-secondary:#238b68;
    --ws-secondary-dark:#176b50;
    --ws-gold:#c99a2e;
    --ws-gold-light:#f7edcf;
    --ws-bg:#f5f7fa;
    --ws-card:#fff;
    --ws-text:#17202a;
    --ws-muted:#697586;
    --ws-border:#e7ebef;
    --ws-radius:18px;
    --ws-shadow:0 8px 28px rgba(0,0,0,.07);
 
    width:100%;
    max-width:1400px;
    margin:0 auto;
    padding:0 10px 30px;
 
    direction:rtl;
    text-align:right;
    box-sizing:border-box;
 
    font-family:
        IRANSans,
        Vazirmatn,
        Tahoma,
        Arial,
        sans-serif;
}
 
.wiki-store *,
.wiki-store *::before,
.wiki-store *::after{
    box-sizing:border-box;
}
 
.wiki-store a{
    color:inherit;
    text-decoration:none;
}
 
.wiki-store img{
    max-width:100%;
}
 
 
/* =========================================================
  TOP BAR
========================================================= */
 
.ws-topbar{
    background:var(--ws-primary-dark);
    color:#fff;
    border-radius:0 0 14px 14px;
    padding:8px 12px;
    margin-bottom:10px;
}
 
.ws-topbar-inner{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:12px 18px;
    font-size:12px;
}
 
.ws-top-item{
    display:flex;
    align-items:center;
    gap:6px;
}
 
.ws-top-item i{
    color:var(--ws-gold);
}
 
 
/* =========================================================
  HEADER
========================================================= */
 
.ws-header{
    background:#fff;
    border:1px solid var(--ws-border);
    border-radius:var(--ws-radius);
    padding:12px;
    box-shadow:var(--ws-shadow);
    margin-bottom:12px;
}
 
.ws-header-main{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    align-items:center;
}
 
.ws-logo{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    color:var(--ws-primary);
    font-weight:900;
    font-size:23px;
    white-space:nowrap;
}
 
.ws-logo-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:var(--ws-primary);
    color:#fff;
}
 
.ws-logo small{
    display:block;
    font-size:10px;
    color:var(--ws-secondary);
    margin-top:2px;
}
 
 
/* =========================================================
  SEARCH
========================================================= */
 
.ws-search{
    width:100%;
    position:relative;
}
 
.ws-search input{
    width:100%;
    min-height:48px;
    border:2px solid #edf0f3;
    background:#f8fafc;
    border-radius:14px;
    outline:none;
    padding:0 48px 0 16px;
    font-family:inherit;
    font-size:14px;
    color:var(--ws-text);
}
 
.ws-search input:focus{
    border-color:var(--ws-secondary);
    background:#fff;
}
 
.ws-search button{
    position:absolute;
    right:6px;
    top:6px;
    width:36px;
    height:36px;
    border:0;
    border-radius:10px;
    background:var(--ws-secondary);
    color:#fff;
}
 
 
/* =========================================================
  ACTIONS
========================================================= */
 
.ws-actions{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
}
 
.ws-action{
    min-height:48px;
    border:1px solid var(--ws-border);
    border-radius:12px;
    background:#fff;
 
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
 
    gap:3px;
    color:var(--ws-primary);
    font-size:11px;
}
 
.ws-action i{
    font-size:17px;
    color:var(--ws-secondary);
}
 
 
/* =========================================================
  NAV
========================================================= */
 
.ws-nav{
    background:var(--ws-primary);
    border-radius:14px;
    overflow-x:auto;
    scrollbar-width:none;
    margin-top:12px;
}
 
/* برای موبایل و تبلت‌های کوچک */
@media only screen and (max-width: 767px) {
  .mobile-hide {
    display: none !important;
  }
}
 
.ws-nav::-webkit-scrollbar{
    display:none;
}
 
.ws-nav-list{
    list-style:none;
    margin:0;
    padding:0;
    min-width:max-content;
 
    display:flex;
    align-items:center;
}
 
.ws-nav-list a{
    display:flex;
    align-items:center;
    gap:7px;
    padding:13px 15px;
 
    color:#fff;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
 
.ws-nav-list a:hover{
    background:rgba(255,255,255,.1);
}
 
.ws-nav-list .ws-special{
    color:#ffe6a1;
}
 
 
/* =========================================================
  SECTION
========================================================= */
 
.ws-section{
    margin-top:22px;
}
 
.ws-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
}
 
.ws-section-title{
    margin:0;
    color:var(--ws-primary);
    font-size:19px;
    font-weight:900;
}
 
.ws-section-title::before{
    content:"";
    display:inline-block;
 
    width:5px;
    height:21px;
 
    border-radius:5px;
    background:var(--ws-gold);
 
    margin-left:8px;
    vertical-align:-4px;
}
 
.ws-more{
    color:var(--ws-secondary);
    font-size:12px;
    font-weight:700;
}
 
 
/* =========================================================
  QUICK CATEGORIES
========================================================= */
 
.ws-category-scroll{
    display:flex;
    gap:10px;
 
    overflow-x:auto;
 
    padding:3px 2px 8px;
 
    scrollbar-width:none;
}
 
.ws-category-scroll::-webkit-scrollbar{
    display:none;
}
 
.ws-category{
    flex:0 0 112px;
 
    background:#fff;
 
    border:1px solid var(--ws-border);
    border-radius:16px;
 
    padding:13px 8px;
 
    text-align:center;
 
    box-shadow:0 4px 15px rgba(0,0,0,.04);
}
 
.ws-category:hover{
    transform:translateY(-3px);
    border-color:var(--ws-secondary);
}
 
.ws-category-icon{
    width:55px;
    height:55px;
 
    margin:0 auto 8px;
 
    border-radius:50%;
 
    background:#eef7f3;
 
    display:grid;
    place-items:center;
 
    color:var(--ws-secondary);
    font-size:23px;
}
 
.ws-category strong{
    display:block;
    color:var(--ws-text);
    font-size:13px;
}
 
 
/* =========================================================
  HERO SLIDER
  تصاویر بدون Crop
========================================================= */
 
.ws-hero{
    position:relative;
    width:100%;
    max-width:100%;
 
    overflow:hidden;
 
    border-radius:20px;
 
    background:#edf0f3;
 
    box-shadow:var(--ws-shadow);
 
    /*
      جلوگیری از تغییر عرض یا بیرون‌زدگی
    */
    contain:layout paint;
}
 
.ws-hero-track{
    display:flex;
 
    direction:ltr;
 
    width:100%;
 
    transition:
        transform .65s ease;
}
 
.ws-hero-slide{
 
    flex:0 0 100%;
 
    width:100%;
    min-width:100%;
 
    /*
      ارتفاع توسط JS از نسبت واقعی عکس
      تعیین می‌شود.
    */
    height:auto;
 
    position:relative;
 
    display:flex;
    align-items:center;
    justify-content:center;
 
    overflow:hidden;
 
    background:#edf0f3;
}
 
.ws-hero-slide img{
 
    display:block;
 
    /*
      عرض همیشه برابر عرض اسلاید
    */
    width:100%;
 
    /*
      ارتفاع خودکار
      تا نسبت اصلی تصویر حفظ شود.
    */
    height:auto;
 
    /*
      هیچ Crop اتفاق نمی‌افتد.
    */
    object-fit:contain;
 
    object-position:center;
 
    /*
      جلوگیری از فضای اضافه ناشی از inline image
    */
    vertical-align:middle;
}
 
 
/*
  اگر تصویر خیلی بلند باشد، روی نمایشگرهای
  کوچک بیش از حد ارتفاع نگیرد.
*/
 
@media (max-width:599px){
 
    .ws-hero-slide img{
        width:100%;
        height:auto;
        max-height:65vw;
        object-fit:contain;
    }
 
}
 
@media (min-width:600px){
 
    .ws-hero-slide img{
        width:100%;
        height:auto;
        max-height:55vw;
        object-fit:contain;
    }
 
}
 
 
/* =========================================================
  HERO DOTS
========================================================= */
 
.ws-hero-dots{
    position:absolute;
 
    bottom:10px;
    left:50%;
 
    transform:translateX(-50%);
 
    display:flex;
 
    gap:6px;
 
    direction:ltr;
 
    z-index:5;
}
 
.ws-hero-dot{
    width:8px;
    height:8px;
 
    border:0;
    padding:0;
 
    border-radius:50%;
 
    background:rgba(255,255,255,.8);
 
    cursor:pointer;
}
 
.ws-hero-dot.active{
    width:22px;
 
    border-radius:10px;
 
    background:var(--ws-gold);
}
 
 
/* =========================================================
  PRODUCT SLIDER
  کاملاً Responsive
========================================================= */
 
.ws-product-slider{
 
    position:relative;
 
    width:100%;
    max-width:100%;
 
    overflow:hidden;
 
    padding:3px 0 8px;
}
 
 
.ws-product-track{
 
    display:flex;
 
    flex-direction:column;
 
    gap:12px;
 
    direction:ltr;
 
    width:100%;
 
    transition:
        transform .65s ease;
 
    will-change:transform;
}
 
 
/*
  هر ردیف تمام عرض واقعی کانتینر را می‌گیرد
*/
 
.ws-product-row{
 
    display:grid;
 
    width:100%;
    max-width:100%;
 
    direction:rtl;
 
    gap:10px;
 
    /*
      موبایل:
      2 کارت کامل
    */
    grid-template-columns:
        repeat(2,minmax(0,1fr));
}
 
 
/* =========================================================
  PRODUCT CARD
========================================================= */
 
.ws-product-card{
 
    width:100%;
    min-width:0;
    max-width:100%;
 
    background:#fff;
 
    border:1px solid var(--ws-border);
 
    border-radius:16px;
 
    overflow:hidden;
 
    box-shadow:
        0 4px 16px rgba(0,0,0,.045);
 
    direction:rtl;
 
    display:flex;
    flex-direction:column;
 
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}
 
.ws-product-card:hover{
 
    transform:translateY(-4px);
 
    box-shadow:
        0 10px 25px rgba(0,0,0,.09);
}
 
 
/* =========================================================
  PRODUCT IMAGE
  هر تصویری انتخاب شود کامل دیده می‌شود
========================================================= */
 
.ws-product-image{
 
    width:100%;
 
    /*
      مربع استاندارد و مستقل از نسبت تصویر اصلی
    */
    aspect-ratio:1 / 1;
 
    min-height:0;
 
    display:flex;
 
    align-items:center;
    justify-content:center;
 
    background:#fff;
 
    padding:10px;
 
    overflow:hidden;
}
 
.ws-product-image img{
 
    display:block;
 
    width:100%;
    height:100%;
 
    max-width:100%;
    max-height:100%;
 
    /*
      مهم‌ترین ویژگی:
      تصویر هرگز Crop نمی‌شود.
    */
    object-fit:contain;
 
    object-position:center;
}
 
 
/* =========================================================
  PRODUCT INFO
========================================================= */
 
.ws-product-info{
 
    width:100%;
 
    padding:10px;
 
    display:flex;
    flex-direction:column;
 
    flex:1;
}
 
.ws-product-title{
 
    margin:0 0 7px;
 
    min-height:40px;
 
    color:var(--ws-text);
 
    font-size:12px;
 
    line-height:1.8;
 
    font-weight:700;
 
    display:-webkit-box;
 
    -webkit-line-clamp:2;
 
    -webkit-box-orient:vertical;
 
    overflow:hidden;
}
 
.ws-brand{
 
    color:var(--ws-muted);
 
    font-size:10px;
 
    margin-bottom:7px;
}
 
.ws-price{
 
    display:flex;
 
    align-items:center;
 
    justify-content:space-between;
 
    gap:5px;
 
    margin-top:auto;
}
 
.ws-new-price{
 
    color:var(--ws-primary);
 
    font-size:13px;
 
    font-weight:900;
}
 
.ws-discount{
 
    background:#fff1f1;
 
    color:#d64545;
 
    border-radius:6px;
 
    padding:3px 5px;
 
    font-size:9px;
 
    font-weight:800;
}
 
.ws-product-actions{
 
    display:flex;
 
    gap:6px;
 
    margin-top:9px;
}
 
.ws-cart{
 
    flex:1;
 
    border:0;
 
    border-radius:8px;
 
    padding:8px;
 
    background:var(--ws-secondary);
 
    color:#fff;
 
    font-family:inherit;
 
    font-size:10px;
 
    cursor:pointer;
}
 
.ws-favorite{
 
    width:34px;
    flex:0 0 34px;
 
    border:1px solid var(--ws-border);
 
    border-radius:8px;
 
    background:#fff;
 
    color:var(--ws-primary);
}
 
 
/* =========================================================
  TABLET
========================================================= */
 
@media (min-width:600px){
 
    .wiki-store{
        padding-left:18px;
        padding-right:18px;
    }
 
    .ws-header-main{
        grid-template-columns:180px 1fr;
    }
 
    .ws-actions{
        grid-column:1/-1;
    }
 
    /*
      سه کارت کامل
    */
    .ws-product-row{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
 
    .ws-product-image{
        padding:12px;
    }
 
    .ws-category-grid{
        grid-template-columns:repeat(3,1fr);
    }
 
    .ws-brands{
        grid-template-columns:repeat(4,1fr);
    }
 
    .ws-articles{
        grid-template-columns:repeat(2,1fr);
    }
 
    .ws-benefits{
        grid-template-columns:repeat(4,1fr);
    }
}
 
 
/* =========================================================
  DESKTOP
========================================================= */
 
@media (min-width:900px){
 
    .wiki-store{
        padding-left:25px;
        padding-right:25px;
    }
 
    .ws-header-main{
        grid-template-columns:
            190px minmax(300px,1fr) 245px;
    }
 
    .ws-actions{
        grid-column:auto;
    }
 
    /*
      چهار کارت کامل
    */
    .ws-product-row{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
 
        gap:12px;
    }
 
    .ws-product-image{
        padding:13px;
    }
 
    .ws-category-grid{
        grid-template-columns:repeat(5,1fr);
    }
 
    .ws-brands{
        grid-template-columns:repeat(6,1fr);
    }
 
    .ws-articles{
        grid-template-columns:repeat(3,1fr);
    }
 
    .ws-footer-grid{
        grid-template-columns:2fr 1fr 1fr 1fr;
    }
 
    .ws-section{
        margin-top:30px;
    }
 
    .ws-section-title{
        font-size:21px;
    }
}
 
 
/* =========================================================
  LARGE DESKTOP
========================================================= */
 
@media (min-width:1200px){
 
    .wiki-store{
        padding-left:30px;
        padding-right:30px;
    }
 
    .ws-product-row{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }
 
    .ws-category-grid{
        grid-template-columns:repeat(5,1fr);
    }
}
 
 
/* =========================================================
  SECURITY CATEGORIES
========================================================= */
 
.ws-category-grid{
 
    display:grid;
 
    grid-template-columns:
        repeat(2,minmax(0,1fr));
 
    gap:10px;
}
 
.ws-category-box{
 
    background:#fff;
 
    border:1px solid var(--ws-border);
 
    border-radius:17px;
 
    padding:12px;
 
    display:flex;
 
    align-items:center;
 
    gap:10px;
 
    min-height:88px;
 
    transition:.2s;
}
 
.ws-category-box:hover{
 
    border-color:var(--ws-secondary);
 
    transform:translateY(-3px);
}
 
.ws-category-box-icon{
 
    flex:0 0 52px;
 
    width:52px;
    height:52px;
 
    border-radius:13px;
 
    display:grid;
    place-items:center;
 
    background:#edf7f3;
 
    color:var(--ws-secondary);
 
    font-size:22px;
}
 
.ws-category-box strong{
 
    display:block;
 
    color:var(--ws-primary);
 
    font-size:12px;
}
 
.ws-category-box span{
 
    display:block;
 
    color:var(--ws-muted);
 
    font-size:10px;
 
    line-height:1.8;
 
    margin-top:4px;
}
 
@media (min-width:600px){
 
    .ws-category-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
 
    .ws-category-box{
        min-height:110px;
    }
}
 
@media (min-width:900px){
 
    .ws-category-grid{
        grid-template-columns:
            repeat(5,minmax(0,1fr));
 
        gap:13px;
    }
 
    .ws-category-box{
        min-height:125px;
 
        padding:16px;
 
        flex-direction:column;
 
        justify-content:center;
 
        text-align:center;
    }
 
    .ws-category-box-icon{
 
        width:64px;
        height:64px;
 
        flex-basis:64px;
 
        font-size:27px;
    }
 
    .ws-category-box strong{
        font-size:14px;
    }
 
    .ws-category-box span{
        font-size:11px;
    }
}
 
 
/* =========================================================
  BRANDS
========================================================= */
 
.ws-brands{
 
    display:grid;
 
    grid-template-columns:
        repeat(2,minmax(0,1fr));
 
    gap:9px;
}
 
.ws-brand-card{
 
    height:75px;
 
    border:1px solid var(--ws-border);
 
    border-radius:14px;
 
    background:#fff;
 
    display:flex;
 
    align-items:center;
    justify-content:center;
 
    padding:10px;
 
    overflow:hidden;
}
 
.ws-brand-card img{
 
    width:100%;
    height:100%;
 
    object-fit:contain;
 
    object-position:center;
}
 
 
/* =========================================================
  ARTICLES
========================================================= */
 
.ws-articles{
 
    display:grid;
 
    grid-template-columns:1fr;
 
    gap:11px;
}
 
.ws-article{
 
    background:#fff;
 
    border:1px solid var(--ws-border);
 
    border-radius:16px;
 
    overflow:hidden;
}
 
.ws-article-image{
 
    width:100%;
 
    aspect-ratio:16/9;
 
    background:#edf0f3;
 
    overflow:hidden;
}
 
.ws-article-image img{
 
    width:100%;
    height:100%;
 
    display:block;
 
    object-fit:contain;
 
    object-position:center;
}
 
.ws-article-content{
    padding:12px;
}
 
.ws-article h3{
 
    margin:0;
 
    color:var(--ws-primary);
 
    font-size:14px;
 
    line-height:1.8;
}
 
.ws-article p{
 
    color:var(--ws-muted);
 
    font-size:11px;
 
    line-height:1.9;
 
    margin:6px 0 9px;
}
 
.ws-read{
 
    color:var(--ws-secondary);
 
    font-size:11px;
 
    font-weight:800;
}
 
 
/* =========================================================
  BENEFITS
========================================================= */
 
.ws-benefits{
 
    display:grid;
 
    grid-template-columns:
        repeat(2,minmax(0,1fr));
 
    gap:9px;
}
 
.ws-benefit{
 
    min-height:105px;
 
    background:#fff;
 
    border:1px solid var(--ws-border);
 
    border-radius:16px;
 
    padding:13px 8px;
 
    text-align:center;
}
 
.ws-benefit-icon{
 
    width:42px;
    height:42px;
 
    margin:0 auto 7px;
 
    border-radius:50%;
 
    background:var(--ws-gold-light);
 
    color:var(--ws-gold);
 
    display:grid;
 
    place-items:center;
 
    font-size:19px;
}
 
.ws-benefit strong{
 
    display:block;
 
    font-size:12px;
 
    color:var(--ws-primary);
}
 
.ws-benefit span{
 
    display:block;
 
    margin-top:4px;
 
    font-size:10px;
 
    color:var(--ws-muted);
}
 
@media (min-width:600px){
 
    .ws-benefits{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }
 
    .ws-brands{
        grid-template-columns:
            repeat(4,minmax(0,1fr));
    }
 
    .ws-articles{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}
 
@media (min-width:900px){
 
    .ws-brands{
        grid-template-columns:
            repeat(6,minmax(0,1fr));
    }
 
    .ws-articles{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}
 
 
/* =========================================================
  CTA
========================================================= */
 
.ws-cta{
 
    margin-top:25px;
 
    padding:22px 15px;
 
    border-radius:20px;
 
    background:
        linear-gradient(
            135deg,
            var(--ws-primary-dark),
            var(--ws-primary)
        );
 
    color:#fff;
 
    text-align:center;
}
 
.ws-cta h2{
 
    margin:0 0 8px;
 
    font-size:20px;
}
 
.ws-cta p{
 
    margin:0 auto 15px;
 
    max-width:650px;
 
    color:#e5ebf0;
 
    font-size:12px;
 
    line-height:2;
}
 
.ws-cta-btn{
 
    display:inline-flex;
 
    align-items:center;
    justify-content:center;
 
    gap:8px;
 
    background:var(--ws-gold);
 
    color:#fff;
 
    padding:11px 22px;
 
    border-radius:10px;
 
    font-size:12px;
 
    font-weight:800;
}
 
 
/* =========================================================
  FOOTER
========================================================= */
 
.ws-footer{
 
    margin-top:25px;
 
    background:var(--ws-primary-dark);
 
    color:#fff;
 
    border-radius:20px 20px 0 0;
 
    padding:24px 15px 15px;
}
 
.ws-footer-grid{
 
    display:grid;
 
    grid-template-columns:1fr;
 
    gap:20px;
}
 
.ws-footer h3{
 
    margin:0 0 10px;
 
    font-size:14px;
}
 
.ws-footer p,
.ws-footer li,
.ws-footer a{
 
    color:#cbd5df;
 
    font-size:11px;
 
    line-height:2;
}
 
.ws-footer ul{
 
    margin:0;
 
    padding:0;
 
    list-style:none;
}
 
.ws-footer i{
 
    color:var(--ws-gold);
 
    width:20px;
}
 
.ws-footer-bottom{
 
    border-top:
        1px solid rgba(255,255,255,.1);
 
    margin-top:18px;
 
    padding-top:12px;
 
    text-align:center;
 
    color:#9eabb7;
 
    font-size:10px;
}
 
@media (min-width:900px){
 
    .ws-footer-grid{
        grid-template-columns:
            2fr 1fr 1fr 1fr;
    }
}
 
 
/* =========================================================
  ACCESSIBILITY
========================================================= */
 
@media (prefers-reduced-motion:reduce){
 
    .ws-hero-track,
    .ws-product-track,
    .ws-category,
    .ws-product-card,
    .ws-category-box,
    .ws-article{
 
        transition:none !important;
    }
}
 
</style>
 
 
<div class="wiki-store">
 
 
<!-- ======================================================
    TOP BAR
====================================================== -->
 
<header class="ws-topbar">
 
<div class="ws-topbar-inner">
 
<div class="ws-top-item">
<i class="fa-solid fa-headset"></i>
مشاوره تخصصی سیستم‌های امنیتی
</div>
 
<div class="ws-top-item">
<i class="fa-solid fa-clock"></i>
شنبه تا پنجشنبه ۹ تا ۲۰
</div>
 
<div class="ws-top-item">
<i class="fa-solid fa-phone"></i>
تماس با ARS
</div>
 
<div class="ws-top-item">
<i class="fa-solid fa-shield-halved"></i>
راهکارهای هوشمند حفاظتی
</div>
 
</div>
 
</header>
 
 
<!-- ======================================================
    HEADER
====================================================== -->
 
<header class="ws-header">
 
<div class="ws-header-main">
 
<a href="#" class="ws-logo"
aria-label="صفحه اصلی دوربین مداربسته ARS">
 
<span class="ws-logo-icon">
<i class="fa-solid fa-camera"></i>
</span>
 
<span>
ARS
<small>
دوربین مداربسته و سیستم‌های امنیتی
</small>
</span>
 
</a>
 
 
<form class="ws-search" role="search">
 
<input
type="search"
placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
aria-label="جستجوی محصولات دوربین مداربسته">
 
<button type="submit" aria-label="جستجو">
 
<i class="fa-solid fa-magnifying-glass"></i>
 
</button>
 
</form>
 
 
<div class="ws-actions">
 
<a href="#" class="ws-action">
 
<i class="fa-regular fa-user"></i>
 
<span>
حساب کاربری
</span>
 
</a>
 
<a href="#" class="ws-action">
 
<i class="fa-regular fa-heart"></i>
 
<span>
علاقه‌مندی
</span>
 
</a>
 
<a href="#" class="ws-action">
 
<i class="fa-solid fa-cart-shopping"></i>
 
<span>
سبد خرید
</span>
 
</a>
 
</div>
 
</div>
 
 
<nav class="ws-nav mobile-hide"
aria-label="منوی اصلی دوربین مداربسته ARS">
 
<ul class="ws-nav-list">
 
<li>
<a href="#">
<i class="fa-solid fa-bars"></i>
دسته‌بندی تجهیزات امنیتی
</a>
</li>
 
<li>
<a href="#">
دوربین مداربسته
</a>
</li>
 
<li>
<a href="#">
DVR و NVR
</a>
</li>
 
<li>
<a href="#">
دزدگیر اماکن
</a>
</li>
 
<li>
<a href="#">
تجهیزات انتقال تصویر
</a>
</li>
 
<li>
<a href="#">
لوازم جانبی دوربین
</a>
</li>
 
<li>
<a href="#" class="ws-special">
<i class="fa-solid fa-percent"></i>
پیشنهادهای ویژه
</a>
</li>
 
</ul>
 
</nav>
 
</header>
 
 
<!-- ======================================================
    QUICK CATEGORIES
====================================================== -->
 
<section class="ws-section">
 
<div class="ws-section-head">
 
<h1 class="ws-section-title">
خرید دوربین مداربسته و تجهیزات امنیتی ARS
</h1>
 
<a href="#" class="ws-more">
مشاهده همه
</a>
 
</div>
 
 
<div class="ws-category-scroll">
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-camera"></i>
</div>
 
<strong>
دوربین مداربسته
</strong>
 
</a>
 
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-video"></i>
</div>
 
<strong>
دوربین تحت شبکه
</strong>
 
</a>
 
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-hard-drive"></i>
</div>
 
<strong>
DVR و NVR
</strong>
 
</a>
 
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-bell"></i>
</div>
 
<strong>
دزدگیر اماکن
</strong>
 
</a>
 
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-wifi"></i>
</div>
 
<strong>
انتقال تصویر
</strong>
 
</a>
 
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-plug"></i>
</div>
 
<strong>
لوازم جانبی
</strong>
 
</a>
 
<a href="#" class="ws-category">
 
<div class="ws-category-icon">
<i class="fa-solid fa-folder"></i>
</div>
 
<strong>
بایگانی حرفه ای
</strong>
 
</a>
 
</div>
 
</section>
 
 
<!-- ======================================================
    HERO
    فقط آدرس src تصاویر را عوض کنید
====================================================== -->
 
<section class="ws-section">
 
<div class="ws-hero"
data-hero-slider>
 
<div class="ws-hero-track">
 
 
<a href="#" class="ws-hero-slide">
 
<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-02.png"
alt="دوربین مداربسته ARS و سیستم‌های امنیتی"
loading="eager">
 
</a>
 
 
<a href="#" class="ws-hero-slide">
 
<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-01.png"
alt="فروش و نصب دوربین مداربسته ARS"
loading="lazy">
 
</a>
 
 
<a href="#" class="ws-hero-slide">
 
<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-03.png"
alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
loading="lazy">
 
</a>
 
 
</div>
 
<div class="ws-hero-dots"></div>
 
</div>
 
</section>
 
 
 
<!-- ======================================================
    Hexagonal container
====================================================== -->
 
<section class="ws-section">
 
<div class="ws-section-head">
 
</html>
{{کانتبنر 6 ضلعی/کاووسی}}
 
<html>
<html>
</div>
</section>
<!-- ======================================================
    SPECIAL PRODUCTS
    2 ROW
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
محصولات ویژه دوربین مداربسته ARS
</h2>
<a href="#" class="ws-more">
مشاهده همه محصولات
</a>
</div>
<div class="ws-product-slider"
data-product-slider>
<div class="ws-product-track">
<!-- ROW 1 -->
<div class="ws-product-row">
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-29.jpg"
alt="دوربین مداربسته بولت ARS"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دوربین مداربسته بولت با دید در شب
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button
class="ws-favorite"
aria-label="افزودن به علاقه‌مندی">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-25.jpg"
alt="دوربین مداربسته دام ARS"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دوربین مداربسته دام مناسب محیط داخلی
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-49.jpg"
alt="دوربین مداربسته تحت شبکه IP"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دوربین مداربسته تحت شبکه IP با کیفیت بالا
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-50.jpg"
alt="دوربین مداربسته دید در شب ARS"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دوربین مداربسته دید در شب حرفه‌ای
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
</div>
<!-- ROW 2 -->
<div class="ws-product-row">
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-51.jpg"
alt="دستگاه DVR دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دستگاه DVR حرفه‌ای برای سیستم مداربسته
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-52.png"
alt="دستگاه NVR دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دستگاه NVR ضبط تصاویر دوربین تحت شبکه
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-53.jpg"
alt="دزدگیر اماکن ARS"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
دزدگیر اماکن و سیستم اعلام سرقت
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-54.png"
alt="هارد مخصوص دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>
<h3 class="ws-product-title">
هارد مخصوص ضبط تصاویر دوربین مداربسته
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
<span class="ws-discount">
ویژه
</span>
</div>
<div class="ws-product-actions">
<button class="ws-cart">
دریافت مشاوره
</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ======================================================
    BENEFITS
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
چرا سیستم امنیتی ARS؟
</h2>
</div>
<div class="ws-benefits">
<div class="ws-benefit">
<div class="ws-benefit-icon">
<i class="fa-solid fa-camera"></i>
</div>
<strong>
تجهیزات باکیفیت
</strong>
<span>
انتخاب تجهیزات مناسب برای هر پروژه
</span>
</div>
<div class="ws-benefit">
<div class="ws-benefit-icon">
<i class="fa-solid fa-headset"></i>
</div>
<strong>
مشاوره تخصصی
</strong>
<span>
راهنمایی برای انتخاب دوربین مناسب
</span>
</div>
<div class="ws-benefit">
<div class="ws-benefit-icon">
<i class="fa-solid fa-shield-halved"></i>
</div>
<strong>
امنیت مطمئن
</strong>
<span>
راهکارهای نظارتی متناسب با نیاز شما
</span>
</div>
<div class="ws-benefit">
<div class="ws-benefit-icon">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>
<strong>
نصب و راه‌اندازی
</strong>
<span>
اجرای اصولی سیستم‌های نظارتی
</span>
</div>
</div>
</section>
<!-- ======================================================
    SECURITY CATEGORIES
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
دسته‌بندی تجهیزات امنیتی
</h2>
<a href="#" class="ws-more">
مشاهده همه دسته‌بندی‌ها
</a>
</div>
<div class="ws-category-grid">
<a href="#" class="ws-category-box">
<div class="ws-category-box-icon">
<i class="fa-solid fa-camera"></i>
</div>
<div>
<strong>
دوربین مداربسته
</strong>
<span>
انواع دوربین برای فضای داخلی و خارجی
</span>
</div>
</a>
<a href="#" class="ws-category-box">
<div class="ws-category-box-icon">
<i class="fa-solid fa-video"></i>
</div>
<div>
<strong>
دوربین تحت شبکه
</strong>
<span>
دوربین IP و تجهیزات نظارت تصویری
</span>
</div>
</a>
<a href="#" class="ws-category-box">
<div class="ws-category-box-icon">
<i class="fa-solid fa-hard-drive"></i>
</div>
<div>
<strong>
DVR و NVR
</strong>
<span>
دستگاه‌های ضبط و مدیریت تصاویر
</span>
</div>
</a>
<a href="#" class="ws-category-box">
<div class="ws-category-box-icon">
<i class="fa-solid fa-bell"></i>
</div>
<div>
<strong>
دزدگیر اماکن
</strong>
<span>
سیستم اعلام سرقت و حفاظت از اماکن
</span>
</div>
</a>
<a href="#" class="ws-category-box">
<div class="ws-category-box-icon">
<i class="fa-solid fa-mobile-screen-button"></i>
</div>
<div>
<strong>
انتقال تصویر
</strong>
<span>
مشاهده تصاویر دوربین از راه دور
</span>
</div>
</a>
</div>
</section>
<!-- ======================================================
    BRANDS
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
برندهای تجهیزات امنیتی
</h2>
</div>
<div class="ws-brands">
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-62.png"
alt="برند ARS دوربین مداربسته"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-64.png"
alt="برند دوربین مداربسته"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-62.png"
alt="برند تجهیزات نظارتی"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-70.png"
alt="برند تجهیزات امنیتی"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-65.png"
alt="برند دوربین تحت شبکه"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-66.png"
alt="برند سیستم حفاظتی"
loading="lazy">
</a>
</div>
</section>
<!-- ======================================================
    BEST SELLERS
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
</h2>
<a href="#" class="ws-more">
مشاهده همه
</a>
</div>
<div class="ws-product-slider"
data-product-slider>
<div class="ws-product-track">
<!-- ROW 1 -->
<div class="ws-product-row">
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-25.jpg"
alt="دوربین مداربسته پرفروش ARS"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دوربین مداربسته پرفروش ARS
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-55.jpg"
alt="دوربین IP پرفروش"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دوربین تحت شبکه IP
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-51.jpg"
alt="دستگاه DVR پرفروش"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دستگاه DVR ضبط تصاویر
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-57.jpg"
alt="دوربین مداربسته دید در شب"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دوربین مداربسته دید در شب
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
</div>
<!-- ROW 2 -->
<div class="ws-product-row">
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-58.jpg"
alt="دستگاه NVR پرفروش"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دستگاه NVR حرفه‌ای
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-54.png"
alt="هارد مخصوص دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
هارد مخصوص سیستم مداربسته
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-59.jpg"
alt="دزدگیر اماکن پرفروش"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
دزدگیر اماکن هوشمند
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
<article class="ws-product-card">
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-60.jpg"
alt="تجهیزات انتقال تصویر"
loading="lazy">
</div>
<div class="ws-product-info">
<h3 class="ws-product-title">
تجهیزات انتقال تصویر دوربین
</h3>
<div class="ws-price">
<span class="ws-new-price">
استعلام قیمت
</span>
</div>
</div>
</article>
</div>
</div>
</div>
</section>
<!-- ======================================================
    ARTICLES
====================================================== -->
<section class="ws-section">
<div class="ws-section-head">
<h2 class="ws-section-title">
مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی
</h2>
<a href="#" class="ws-more">
مشاهده مقالات
</a>
</div>
<div class="ws-articles">
<article class="ws-article">
<div class="ws-article-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-68.png"
alt="راهنمای خرید دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-article-content">
<h3>
راهنمای خرید دوربین مداربسته برای منزل و محل کار
</h3>
<p>
با مهم‌ترین نکات انتخاب دوربین مداربسته،
کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
</p>
<a href="#" class="ws-read">
مطالعه مقاله ←
</a>
</div>
</article>
<article class="ws-article">
<div class="ws-article-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-67.png"
alt="تفاوت دوربین مداربسته آنالوگ و تحت شبکه"
loading="lazy">
</div>
<div class="ws-article-content">
<h3>
تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟
</h3>
<p>
مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
کاربردها و نکات انتخاب هر سیستم.
</p>
<a href="#" class="ws-read">
مطالعه مقاله ←
</a>
</div>
</article>
<article class="ws-article">
<div class="ws-article-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-69.png"
alt="بهترین مکان نصب دوربین مداربسته"
loading="lazy">
</div>
<div class="ws-article-content">
<h3>
بهترین مکان برای نصب دوربین مداربسته کجاست؟
</h3>
<p>
نکات مهم انتخاب محل نصب دوربین برای افزایش
امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
</p>
<a href="#" class="ws-read">
مطالعه مقاله ←
</a>
</div>
</article>
</div>
</section>
<!-- ======================================================
    CTA
====================================================== -->
<section class="ws-cta">
<h2>
برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
</h2>
<p>
کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
را پیشنهاد دهند.
</p>
<a href="#" class="ws-cta-btn">
<i class="fa-solid fa-phone"></i>
دریافت مشاوره تخصصی
</a>
</section>
</div>
<script>
<script>
document.addEventListener("contextmenu", function (event) {
 
  event.preventDefault();
document.addEventListener(
  alert("کلیک راست در این صفحه غیرفعال است.");
"DOMContentLoaded",
function(){
 
 
/* =========================================================
  HERO SLIDER
  چرخش هر 3 ثانیه
========================================================= */
 
const hero =
document.querySelector(
"[data-hero-slider]"
);
 
 
if(hero){
 
    const track =
    hero.querySelector(
        ".ws-hero-track"
    );
 
    const slides =
    hero.querySelectorAll(
        ".ws-hero-slide"
    );
 
    const dotsBox =
    hero.querySelector(
        ".ws-hero-dots"
    );
 
    let current=0;
 
    let timer=null;
 
 
    /* -----------------------------------------
      تنظیم ارتفاع واقعی هر اسلاید
      بدون Crop
    ----------------------------------------- */
 
    function setHeroHeight(){
 
        const activeSlide =
        slides[current];
 
        if(!activeSlide) return;
 
        const image =
        activeSlide.querySelector("img");
 
        if(!image) return;
 
 
        function applyHeight(){
 
            const containerWidth =
            hero.clientWidth;
 
            const naturalWidth =
            image.naturalWidth;
 
            const naturalHeight =
            image.naturalHeight;
 
 
            if(
                naturalWidth &&
                naturalHeight &&
                containerWidth
            ){
 
                const ratio =
                naturalHeight /
                naturalWidth;
 
 
                let height =
                containerWidth *
                ratio;
 
 
                /*
                  محدودیت منطقی برای تصاویر خیلی بلند
                  فقط در موبایل
                */
 
                if(
                    window.innerWidth < 600 &&
                    height > window.innerHeight * .65
                ){
 
                    height =
                    window.innerHeight * .65;
 
                }
 
 
                activeSlide.style.height =
                height + "px";
 
            }
 
        }
 
 
        if(image.complete){
 
            applyHeight();
 
        }else{
 
            image.addEventListener(
                "load",
                applyHeight,
                {once:true}
            );
 
        }
 
    }
 
 
    /* -----------------------------------------
      ساخت Dot
    ----------------------------------------- */
 
    slides.forEach(
        function(slide,index){
 
            const dot =
            document.createElement(
                "button"
            );
 
            dot.type="button";
 
            dot.className=
                "ws-hero-dot";
 
            if(index===0){
 
                dot.classList.add(
                    "active"
                );
 
            }
 
            dot.setAttribute(
                "aria-label",
                "نمایش اسلاید "+
                (index+1)
            );
 
 
            dot.addEventListener(
                "click",
                function(){
 
                    goToSlide(index);
 
                    restart();
 
                }
            );
 
 
            dotsBox.appendChild(dot);
 
        }
    );
 
 
    const dots =
    dotsBox.querySelectorAll(
        ".ws-hero-dot"
    );
 
 
    /* -----------------------------------------
      تغییر اسلاید
    ----------------------------------------- */
 
    function goToSlide(index){
 
        current=index;
 
 
        track.style.transform =
            "translateX(-"+
            (current*100)+
            "%)";
 
 
        dots.forEach(
            function(dot,i){
 
                dot.classList.toggle(
                    "active",
                    i===current
                );
 
            }
        );
 
 
        /*
          بعد از تغییر اسلاید
          ارتفاع واقعی عکس جدید
          محاسبه می‌شود.
        */
 
        setHeroHeight();
 
    }
 
 
    function next(){
 
        current =
        (current+1) %
        slides.length;
 
        goToSlide(current);
 
    }
 
 
    function start(){
 
        timer =
        setInterval(
            next,
            3000
        );
 
    }
 
 
    function stop(){
 
        if(timer){
 
            clearInterval(timer);
 
            timer=null;
 
        }
 
    }
 
 
    function restart(){
 
        stop();
 
        start();
 
    }
 
 
    hero.addEventListener(
        "mouseenter",
        stop
    );
 
 
    hero.addEventListener(
        "mouseleave",
        start
    );
 
 
    /*
      وقتی اندازه صفحه تغییر کرد،
      ارتفاع بنر دوباره محاسبه می‌شود.
    */
 
    window.addEventListener(
        "resize",
        setHeroHeight
    );
 
 
    /*
      اولین بار
    */
 
    setHeroHeight();
 
    start();
 
}
 
 
/* =========================================================
  PRODUCT SLIDERS
  بدون کارت نصفه
========================================================= */
 
document.querySelectorAll(
    "[data-product-slider]"
).forEach(
    function(slider){
 
        const track =
        slider.querySelector(
            ".ws-product-track"
        );
 
        if(!track) return;
 
 
        let position=0;
 
        let autoTimer=null;
 
 
        /* -----------------------------------------
          حداکثر میزان حرکت
        ----------------------------------------- */
 
        function getMaxScroll(){
 
            return Math.max(
                0,
                track.scrollWidth -
                slider.clientWidth
            );
 
        }
 
 
        /* -----------------------------------------
          اندازه حرکت
        ----------------------------------------- */
 
        function getStep(){
 
            const card =
            track.querySelector(
                ".ws-product-card"
            );
 
            if(!card) return 0;
 
 
            const style =
            window.getComputedStyle(
                card.parentElement
            );
 
            const gap =
            parseFloat(
                style.columnGap ||
                style.gap ||
                10
            );
 
 
            return (
                card.getBoundingClientRect().width
                + gap
            );
 
        }
 
 
        /* -----------------------------------------
          حرکت
        ----------------------------------------- */
 
        function moveNext(){
 
            const maxScroll =
            getMaxScroll();
 
 
            if(maxScroll<=0){
 
                position=0;
 
                track.style.transform=
                    "translateX(0)";
 
                return;
 
            }
 
 
            const step =
            getStep();
 
 
            position += step;
 
 
            /*
              اگر به انتها رسید:
              دوباره از ابتدا
            */
 
            if(position>=maxScroll){
 
                position=0;
 
            }
 
 
            track.style.transform =
                "translateX(-"+
                position+
                "px)";
 
        }
 
 
        /* -----------------------------------------
          شروع
        ----------------------------------------- */
 
        function start(){
 
            stop();
 
 
            autoTimer =
            setInterval(
                moveNext,
                3500
            );
 
        }
 
 
        /* -----------------------------------------
          توقف
        ----------------------------------------- */
 
        function stop(){
 
            if(autoTimer){
 
                clearInterval(
                    autoTimer
                );
 
                autoTimer=null;
 
            }
 
        }
 
 
        slider.addEventListener(
            "mouseenter",
            stop
        );
 
 
        slider.addEventListener(
            "mouseleave",
            start
        );
 
 
        /*
          با تغییر اندازه صفحه،
          موقعیت نامعتبر حذف می‌شود.
        */
 
        window.addEventListener(
            "resize",
            function(){
 
                const maxScroll =
                getMaxScroll();
 
 
                if(position>maxScroll){
 
                    position=0;
 
                }
 
 
                track.style.transform =
                    "translateX(-"+
                    position+
                    "px)";
 
            }
        );
 
 
        start();
 
    }
);
 
});
});
</script>
</script>


<div style="width:100%; text-align:center; margin:0 auto;">
  <div style="display:inline-block; max-width:100%; overflow:hidden; border-radius:18px;">
<img src="https://dl.faraghaib.ir/m/260018/26001802.png" alt="دوربین مداربسته آقای کاووسی">
</div>
</html>
</html>
 
[[رده:در حال ویرایش جاوید]]
{{منوی پایین صفحه/کاووسی}}
{{اسلایدر/کاووسی}}
{{باکس هشدار/کاووسی}}
{{کانتینر کله قندی/کاووسی}}
{{جدول اطلاعات محصول/کاووسی}}
{{کانتینر منحنی/کاووسی}}

نسخهٔ کنونی تا ‏۲۴ اوت ۲۰۲۶، ساعت ۱۲:۴۱

مشاوره تخصصی سیستم‌های امنیتی
شنبه تا پنجشنبه ۹ تا ۲۰
تماس با ARS
راهکارهای هوشمند حفاظتی
حساب کاربری علاقه‌مندی سبد خرید

خرید دوربین مداربسته و تجهیزات امنیتی ARS

مشاهده همه
دوربین مداربسته
دوربین تحت شبکه
DVR و NVR
دزدگیر اماکن
انتقال تصویر
لوازم جانبی
بایگانی حرفه ای
دوربین مداربسته ARS و سیستم‌های امنیتی فروش و نصب دوربین مداربسته ARS خرید دوربین مداربسته و تجهیزات حفاظتی
نصب دوربین
فروش دوربین
سیستم نظارتی
انتقال تصویر
تعمیرات
دوربین شبکه ای
DVR و NVR
کابل‌-زیرساخت
امنیت هوشمند

محصولات ویژه دوربین مداربسته ARS

مشاهده همه محصولات
دوربین مداربسته بولت ARS
ARS

دوربین مداربسته بولت با دید در شب

استعلام قیمت ویژه
دوربین مداربسته دام ARS
ARS

دوربین مداربسته دام مناسب محیط داخلی

استعلام قیمت ویژه
دوربین مداربسته تحت شبکه IP
ARS

دوربین مداربسته تحت شبکه IP با کیفیت بالا

استعلام قیمت ویژه
دوربین مداربسته دید در شب ARS
ARS

دوربین مداربسته دید در شب حرفه‌ای

استعلام قیمت ویژه
دستگاه DVR دوربین مداربسته
ARS

دستگاه DVR حرفه‌ای برای سیستم مداربسته

استعلام قیمت ویژه
دستگاه NVR دوربین مداربسته
ARS

دستگاه NVR ضبط تصاویر دوربین تحت شبکه

استعلام قیمت ویژه
دزدگیر اماکن ARS
ARS

دزدگیر اماکن و سیستم اعلام سرقت

استعلام قیمت ویژه
هارد مخصوص دوربین مداربسته
ARS

هارد مخصوص ضبط تصاویر دوربین مداربسته

استعلام قیمت ویژه

چرا سیستم امنیتی ARS؟

تجهیزات باکیفیت انتخاب تجهیزات مناسب برای هر پروژه
مشاوره تخصصی راهنمایی برای انتخاب دوربین مناسب
امنیت مطمئن راهکارهای نظارتی متناسب با نیاز شما
نصب و راه‌اندازی اجرای اصولی سیستم‌های نظارتی

دسته‌بندی تجهیزات امنیتی

مشاهده همه دسته‌بندی‌ها
دوربین مداربسته انواع دوربین برای فضای داخلی و خارجی
دوربین تحت شبکه دوربین IP و تجهیزات نظارت تصویری
DVR و NVR دستگاه‌های ضبط و مدیریت تصاویر
دزدگیر اماکن سیستم اعلام سرقت و حفاظت از اماکن
انتقال تصویر مشاهده تصاویر دوربین از راه دور

برندهای تجهیزات امنیتی

برند ARS دوربین مداربسته برند دوربین مداربسته برند تجهیزات نظارتی برند تجهیزات امنیتی برند دوربین تحت شبکه برند سیستم حفاظتی

پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی

مشاهده همه
دوربین مداربسته پرفروش ARS

دوربین مداربسته پرفروش ARS

استعلام قیمت
دوربین IP پرفروش

دوربین تحت شبکه IP

استعلام قیمت
دستگاه DVR پرفروش

دستگاه DVR ضبط تصاویر

استعلام قیمت
دوربین مداربسته دید در شب

دوربین مداربسته دید در شب

استعلام قیمت
دستگاه NVR پرفروش

دستگاه NVR حرفه‌ای

استعلام قیمت
هارد مخصوص دوربین مداربسته

هارد مخصوص سیستم مداربسته

استعلام قیمت
دزدگیر اماکن پرفروش

دزدگیر اماکن هوشمند

استعلام قیمت
تجهیزات انتقال تصویر

تجهیزات انتقال تصویر دوربین

استعلام قیمت

مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی

مشاهده مقالات
راهنمای خرید دوربین مداربسته

راهنمای خرید دوربین مداربسته برای منزل و محل کار

با مهم‌ترین نکات انتخاب دوربین مداربسته، کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.

مطالعه مقاله ←
تفاوت دوربین مداربسته آنالوگ و تحت شبکه

تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟

مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا، کاربردها و نکات انتخاب هر سیستم.

مطالعه مقاله ←
بهترین مکان نصب دوربین مداربسته

بهترین مکان برای نصب دوربین مداربسته کجاست؟

نکات مهم انتخاب محل نصب دوربین برای افزایش امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.

مطالعه مقاله ←

برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟

کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی را پیشنهاد دهند.

دریافت مشاوره تخصصی

برگرفته از «https://fa.faraghaib.ir/w/index.php?title=09123667263&oldid=6879»