پرش به محتوا

تست۶ - فراغیب

از فراغیب
بدون خلاصۀ ویرایش
بدون خلاصۀ ویرایش
خط ۲۷: خط ۲۷:
     width:100%;
     width:100%;
     max-width:1400px;
     max-width:1400px;
     margin:auto;
     margin:0 auto;
     padding:0 10px 30px;
     padding:0 10px 30px;
     direction:rtl;
     direction:rtl;
     text-align:right;
     text-align:right;
     box-sizing:border-box;
     box-sizing:border-box;
     font-family:IRANSans,Vazirmatn,Tahoma,Arial,sans-serif;
 
     font-family:
        IRANSans,
        Vazirmatn,
        Tahoma,
        Arial,
        sans-serif;
}
}


خط ۱۸۷: خط ۱۹۴:
     border-radius:12px;
     border-radius:12px;
     background:#fff;
     background:#fff;
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
     justify-content:center;
     justify-content:center;
     flex-direction:column;
     flex-direction:column;
     gap:3px;
     gap:3px;
     color:var(--ws-primary);
     color:var(--ws-primary);
خط ۲۲۳: خط ۲۳۲:
     padding:0;
     padding:0;
     min-width:max-content;
     min-width:max-content;
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
خط ۲۳۲: خط ۲۴۲:
     gap:7px;
     gap:7px;
     padding:13px 15px;
     padding:13px 15px;
     color:#fff;
     color:#fff;
     font-size:13px;
     font-size:13px;
خط ۲۷۳: خط ۲۸۴:
     content:"";
     content:"";
     display:inline-block;
     display:inline-block;
     width:5px;
     width:5px;
     height:21px;
     height:21px;
     border-radius:5px;
     border-radius:5px;
     background:var(--ws-gold);
     background:var(--ws-gold);
     margin-left:8px;
     margin-left:8px;
     vertical-align:-4px;
     vertical-align:-4px;
خط ۲۹۵: خط ۳۰۹:
     display:flex;
     display:flex;
     gap:10px;
     gap:10px;
     overflow-x:auto;
     overflow-x:auto;
     padding:3px 2px 8px;
     padding:3px 2px 8px;
     scrollbar-width:none;
     scrollbar-width:none;
}
}
خط ۳۰۶: خط ۳۲۳:
.ws-category{
.ws-category{
     flex:0 0 112px;
     flex:0 0 112px;
     background:#fff;
     background:#fff;
     border:1px solid var(--ws-border);
     border:1px solid var(--ws-border);
     border-radius:16px;
     border-radius:16px;
     padding:13px 8px;
     padding:13px 8px;
     text-align:center;
     text-align:center;
     box-shadow:0 4px 15px rgba(0,0,0,.04);
     box-shadow:0 4px 15px rgba(0,0,0,.04);
}
}
خط ۳۲۲: خط ۳۴۴:
     width:55px;
     width:55px;
     height:55px;
     height:55px;
     margin:auto auto 8px;
 
     margin:0 auto 8px;
 
     border-radius:50%;
     border-radius:50%;
     background:#eef7f3;
     background:#eef7f3;
     display:grid;
     display:grid;
     place-items:center;
     place-items:center;
     color:var(--ws-secondary);
     color:var(--ws-secondary);
     font-size:23px;
     font-size:23px;
خط ۳۳۹: خط ۳۶۶:


/* =========================================================
/* =========================================================
   HERO
   HERO SLIDER
  تصاویر بدون Crop
========================================================= */
========================================================= */


.ws-hero{
.ws-hero{
     position:relative;
     position:relative;
    width:100%;
    max-width:100%;
     overflow:hidden;
     overflow:hidden;
     border-radius:20px;
     border-radius:20px;
     background:#e9edf2;
 
     background:#edf0f3;
 
     box-shadow:var(--ws-shadow);
     box-shadow:var(--ws-shadow);
    /*
      جلوگیری از تغییر عرض یا بیرون‌زدگی
    */
    contain:layout paint;
}
}


.ws-hero-track{
.ws-hero-track{
     display:flex;
     display:flex;
    transition:transform .65s ease;
 
     direction:ltr;
     direction:ltr;
}
 
    width:100%;
 
    transition:
        transform .65s ease;
}


.ws-hero-slide{
.ws-hero-slide{
     flex:0 0 100%;
     flex:0 0 100%;
    width:100%;
     min-width:100%;
     min-width:100%;
     aspect-ratio:16/6;
 
     /*
      ارتفاع توسط JS از نسبت واقعی عکس
      تعیین می‌شود.
    */
    height:auto;
 
    position:relative;
 
    display:flex;
    align-items:center;
    justify-content:center;
 
     overflow:hidden;
     overflow:hidden;
     background:#edf0f3;
     background:#edf0f3;
}
}


.ws-hero-slide img{
.ws-hero-slide img{
    display:block;
    /*
      عرض همیشه برابر عرض اسلاید
    */
     width:100%;
     width:100%;
     height:100%;
 
     display:block;
    /*
      ارتفاع خودکار
      تا نسبت اصلی تصویر حفظ شود.
    */
     height:auto;
 
    /*
      هیچ Crop اتفاق نمی‌افتد.
     */
     object-fit:contain;
     object-fit:contain;
     object-position:center;
     object-position:center;
    /*
      جلوگیری از فضای اضافه ناشی از inline image
    */
    vertical-align:middle;
}
}


.ws-hero-dots{
    position:absolute;
    bottom:10px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:6px;
    direction:ltr;
}


.ws-hero-dot{
/*
    width:8px;
  اگر تصویر خیلی بلند باشد، روی نمایشگرهای
    height:8px;
  کوچک بیش از حد ارتفاع نگیرد.
    border:0;
*/
    padding:0;
 
     border-radius:50%;
@media (max-width:599px){
    background:rgba(255,255,255,.7);
 
    .ws-hero-slide img{
        width:100%;
        height:auto;
        max-height:65vw;
        object-fit:contain;
     }
 
}
}


.ws-hero-dot.active{
@media (min-width:600px){
    width:22px;
 
    border-radius:10px;
    .ws-hero-slide img{
    background:var(--ws-gold);
        width:100%;
        height:auto;
        max-height:55vw;
        object-fit:contain;
    }
 
}
}




/* =========================================================
/* =========================================================
   TWO ROW PRODUCT SLIDER
   HERO DOTS
  هر ردیف = 4 کارت
========================================================= */
========================================================= */


.ws-product-slider{
.ws-hero-dots{
     position:relative;
     position:absolute;
     overflow:hidden;
 
     padding:2px 0 7px;
     bottom:10px;
}
     left:50%;
 
    transform:translateX(-50%);


.ws-product-track{
     display:flex;
     display:flex;
    width:max-content;
 
     flex-direction:column;
     gap:6px;
    gap:12px;
 
     direction:ltr;
     direction:ltr;
     transition:transform .65s ease;
 
     z-index:5;
}
}


.ws-product-row{
.ws-hero-dot{
     display:flex;
     width:8px;
     gap:10px;
     height:8px;
     direction:rtl;
 
    border:0;
    padding:0;
 
    border-radius:50%;
 
    background:rgba(255,255,255,.8);
 
     cursor:pointer;
}
}


.ws-product-card{
.ws-hero-dot.active{
    flex:0 0 180px;
     width:22px;
     width:180px;
 
    background:#fff;
     border-radius:10px;
    border:1px solid var(--ws-border);
     border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 16px rgba(0,0,0,.045);
    direction:rtl;
    transition:.2s;
}


.ws-product-card:hover{
     background:var(--ws-gold);
     transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,.09);
}
}


.ws-product-image{
 
/* =========================================================
  PRODUCT SLIDER
  کاملاً Responsive
========================================================= */
 
.ws-product-slider{
 
    position:relative;
 
     width:100%;
     width:100%;
     height:145px;
     max-width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#fff;
    padding:12px;
}


.ws-product-image img{
     overflow:hidden;
     width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}


.ws-product-info{
     padding:3px 0 8px;
     padding:10px;
}
}


.ws-product-title{
    min-height:38px;
    margin:0 0 7px;
    color:var(--ws-text);
    font-size:12px;
    line-height:1.8;
    font-weight:700;
}


.ws-brand{
.ws-product-track{
    color:var(--ws-muted);
    font-size:10px;
    margin-bottom:7px;
}


.ws-price{
     display:flex;
     display:flex;
    align-items:center;
    justify-content:space-between;
    gap:5px;
}


.ws-new-price{
    flex-direction:column;
     color:var(--ws-primary);
 
     font-size:13px;
     gap:12px;
     font-weight:900;
 
}
     direction:ltr;
 
     width:100%;
 
    transition:
        transform .65s ease;


.ws-discount{
     will-change:transform;
    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;
.ws-product-row{
    background:var(--ws-secondary);
 
     color:#fff;
     display:grid;
    font-family:inherit;
 
     font-size:10px;
     width:100%;
}
     max-width:100%;
 
     direction:rtl;
 
     gap:10px;


.ws-favorite{
    /*
    width:34px;
      موبایل:
     border:1px solid var(--ws-border);
      2 کارت کامل
     border-radius:8px;
     */
    background:#fff;
     grid-template-columns:
    color:var(--ws-primary);
        repeat(2,minmax(0,1fr));
}
}




/* =========================================================
/* =========================================================
   SLIDER BUTTONS
   PRODUCT CARD
========================================================= */
========================================================= */


.ws-slider-btn{
.ws-product-card{
    position:absolute;
 
     top:50%;
     width:100%;
     transform:translateY(-50%);
     min-width:0;
     z-index:5;
     max-width:100%;
     width:36px;
 
    height:36px;
     background:#fff;
 
     border:1px solid var(--ws-border);
     border:1px solid var(--ws-border);
     border-radius:50%;
 
     background:#fff;
     border-radius:16px;
    color:var(--ws-primary);
 
     box-shadow:0 5px 15px rgba(0,0,0,.1);
     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-slider-prev{
.ws-product-card:hover{
     right:5px;
 
}
     transform:translateY(-4px);


.ws-slider-next{
    box-shadow:
    left:5px;
        0 10px 25px rgba(0,0,0,.09);
}
}




/* =========================================================
/* =========================================================
   BENEFITS
   PRODUCT IMAGE
  هر تصویری انتخاب شود کامل دیده می‌شود
========================================================= */
========================================================= */


.ws-benefits{
.ws-product-image{
     display:grid;
 
     grid-template-columns:repeat(2,1fr);
     width:100%;
     gap:9px;
 
}
     /*
      مربع استاندارد و مستقل از نسبت تصویر اصلی
    */
    aspect-ratio:1 / 1;
 
    min-height:0;
 
     display:flex;
 
    align-items:center;
    justify-content:center;


.ws-benefit{
    min-height:105px;
     background:#fff;
     background:#fff;
    border:1px solid var(--ws-border);
 
     border-radius:16px;
     padding:10px;
    padding:13px 8px;
 
     text-align:center;
     overflow:hidden;
}
}


.ws-benefit-icon{
.ws-product-image img{
    width:42px;
    height:42px;
    margin:auto 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;
     display:block;
    font-size:12px;
    color:var(--ws-primary);
}


.ws-benefit span{
    width:100%;
     display:block;
     height:100%;
     margin-top:4px;
 
     font-size:10px;
     max-width:100%;
     color:var(--ws-muted);
     max-height:100%;
 
     /*
      مهم‌ترین ویژگی:
      تصویر هرگز Crop نمی‌شود.
    */
    object-fit:contain;
 
    object-position:center;
}
}




/* =========================================================
/* =========================================================
   SECURITY CATEGORIES
   PRODUCT INFO
  5 کارت - بزرگتر و ریسپانسیو
========================================================= */
========================================================= */


.ws-category-grid{
.ws-product-info{
     display:grid;
 
    grid-template-columns:repeat(2,1fr);
     width:100%;
     gap:12px;
 
}
     padding:10px;


.ws-category-box{
    background:#fff;
    border:1px solid var(--ws-border);
    border-radius:17px;
    padding:15px;
     display:flex;
     display:flex;
     align-items:center;
     flex-direction:column;
    gap:12px;
    min-height:105px;
}


.ws-category-box:hover{
     flex:1;
    border-color:var(--ws-secondary);
     transform:translateY(-3px);
}
}


.ws-category-box-icon{
.ws-product-title{
     flex:0 0 58px;
 
    width:58px;
     margin:0 0 7px;
     height:58px;
 
    border-radius:14px;
     min-height:40px;
    display:grid;
 
    place-items:center;
     color:var(--ws-text);
    background:#edf7f3;
     color:var(--ws-secondary);
    font-size:25px;
}


.ws-category-box strong{
     font-size:12px;
    display:block;
    color:var(--ws-primary);
     font-size:13px;
}


.ws-category-box span{
    display:block;
    color:var(--ws-muted);
    font-size:11px;
     line-height:1.8;
     line-height:1.8;
    margin-top:5px;
}


    font-weight:700;
    display:-webkit-box;
    -webkit-line-clamp:2;


/* =========================================================
    -webkit-box-orient:vertical;
  BRANDS
========================================================= */


.ws-brands{
     overflow:hidden;
     display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:9px;
}
}


.ws-brand-card{
.ws-brand{
    height:75px;
 
     border:1px solid var(--ws-border);
     color:var(--ws-muted);
     border-radius:14px;
 
     background:#fff;
     font-size:10px;
 
     margin-bottom:7px;
}
 
.ws-price{
 
     display:flex;
     display:flex;
     align-items:center;
     align-items:center;
    justify-content:center;
    padding:10px;
}


.ws-brand-card img{
    justify-content:space-between;
     width:100%;
 
    height:100%;
     gap:5px;
     object-fit:contain;
 
     margin-top:auto;
}
}


.ws-new-price{


/* =========================================================
    color:var(--ws-primary);
  ARTICLES
========================================================= */


.ws-articles{
    font-size:13px;
    display:grid;
 
     grid-template-columns:1fr;
     font-weight:900;
    gap:11px;
}
}


.ws-article{
.ws-discount{
     background:#fff;
 
     border:1px solid var(--ws-border);
     background:#fff1f1;
     border-radius:16px;
 
    overflow:hidden;
     color:#d64545;
}
 
     border-radius:6px;


.ws-article-image{
     padding:3px 5px;
     height:150px;
    background:#edf0f3;
}


.ws-article-image img{
     font-size:9px;
    width:100%;
    height:100%;
    display:block;
     object-fit:cover;
}


.ws-article-content{
    font-weight:800;
    padding:12px;
}
}


.ws-article h3{
.ws-product-actions{
    margin:0;
 
     color:var(--ws-primary);
     display:flex;
    font-size:14px;
 
     line-height:1.8;
     gap:6px;
}


.ws-article p{
     margin-top:9px;
     color:var(--ws-muted);
    font-size:11px;
    line-height:1.9;
    margin:6px 0 9px;
}
}


.ws-read{
.ws-cart{
    color:var(--ws-secondary);
    font-size:11px;
    font-weight:800;
}


    flex:1;


/* =========================================================
    border:0;
  CTA
========================================================= */


.ws-cta{
     border-radius:8px;
    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{
     padding:8px;
     margin:0 0 8px;
    font-size:20px;
}


.ws-cta p{
     background:var(--ws-secondary);
     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;
     color:#fff;
    padding:11px 22px;
    border-radius:10px;
    font-size:12px;
    font-weight:800;
}


    font-family:inherit;


/* =========================================================
    font-size:10px;
  FOOTER
========================================================= */


.ws-footer{
     cursor:pointer;
     margin-top:25px;
    background:var(--ws-primary-dark);
    color:#fff;
    border-radius:20px 20px 0 0;
    padding:24px 15px 15px;
}
}


.ws-footer-grid{
.ws-favorite{
     display:grid;
 
     grid-template-columns:1fr;
     width:34px;
     gap:20px;
     flex:0 0 34px;
}
 
     border:1px solid var(--ws-border);


.ws-footer h3{
     border-radius:8px;
    margin:0 0 10px;
     font-size:14px;
}


.ws-footer p,
     background:#fff;
.ws-footer li,
.ws-footer a{
     color:#cbd5df;
    font-size:11px;
    line-height:2;
}


.ws-footer ul{
     color:var(--ws-primary);
     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;
}
 
 
/* =========================================================
   TABLET
   TABLET
========================================================= */
========================================================= */
خط ۸۴۸: خط ۸۲۳:
     }
     }


     .ws-benefits{
    /*
         grid-template-columns:repeat(4,1fr);
      سه کارت کامل
    */
     .ws-product-row{
         grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
 
    .ws-product-image{
        padding:12px;
     }
     }


     .ws-category-grid{
     .ws-category-grid{
         grid-template-columns:repeat(3,1fr);
         grid-template-columns:repeat(3,1fr);
    }
    .ws-category-box{
        min-height:115px;
        padding:17px;
    }
    .ws-category-box-icon{
        width:62px;
        height:62px;
        flex-basis:62px;
    }
    .ws-category-box strong{
        font-size:14px;
    }
    .ws-category-box span{
        font-size:11px;
     }
     }


خط ۸۸۳: خط ۸۴۷:
     }
     }


     .ws-product-card{
     .ws-benefits{
         flex-basis:205px;
         grid-template-columns:repeat(4,1fr);
        width:205px;
    }
 
    .ws-product-image{
        height:160px;
     }
     }
}
}
خط ۹۰۵: خط ۸۶۴:
     }
     }


    .ws-header{
     .ws-header-main{
        padding:15px;
         grid-template-columns:
    }
            190px minmax(300px,1fr) 245px;
 
     .ws-header-main{
         grid-template-columns:190px minmax(300px,1fr) 245px;
     }
     }


خط ۹۱۷: خط ۸۷۳:
     }
     }


     .ws-logo{
    /*
         justify-content:flex-start;
      چهار کارت کامل
    */
     .ws-product-row{
         grid-template-columns:
            repeat(4,minmax(0,1fr));
 
        gap:12px;
     }
     }


     .ws-category{
     .ws-product-image{
         flex-basis:140px;
         padding:13px;
     }
     }


    /* 5 کارت دسته‌بندی */
     .ws-category-grid{
     .ws-category-grid{
         grid-template-columns:repeat(5,1fr);
         grid-template-columns:repeat(5,1fr);
        gap:14px;
    }
    .ws-category-box{
        min-height:125px;
        padding:18px;
        flex-direction:column;
        justify-content:center;
        text-align:center;
    }
    .ws-category-box-icon{
        width:66px;
        height:66px;
        flex-basis:66px;
        font-size:28px;
    }
    .ws-category-box strong{
        font-size:14px;
    }
    .ws-category-box span{
        font-size:11px;
     }
     }


خط ۹۶۰: خط ۸۹۷:
     .ws-articles{
     .ws-articles{
         grid-template-columns:repeat(3,1fr);
         grid-template-columns:repeat(3,1fr);
    }
    .ws-product-card{
        flex-basis:225px;
        width:225px;
    }
    .ws-product-image{
        height:175px;
     }
     }


خط ۹۹۶: خط ۹۲۴:
     }
     }


     .ws-product-card{
     .ws-product-row{
         flex-basis:240px;
         grid-template-columns:
        width:240px;
            repeat(4,minmax(0,1fr));
    }
 
    .ws-product-image{
        height:190px;
     }
     }


خط ۱٬۰۰۸: خط ۹۳۲:
         grid-template-columns:repeat(5,1fr);
         grid-template-columns:repeat(5,1fr);
     }
     }
 
}
    .ws-category-box{
        min-height:140px;
    }
 
    .ws-category-box-icon{
        width:70px;
        height:70px;
        flex-basis:70px;
    }
}




/* =========================================================
/* =========================================================
   MOBILE - PRODUCT CARD
   SECURITY CATEGORIES
========================================================= */
========================================================= */


@media (max-width:599px){
.ws-category-grid{


     .ws-product-slider{
     display:grid;
        margin-left:-2px;
        margin-right:-2px;
    }


     .ws-product-card{
     grid-template-columns:
         flex-basis:calc(
         repeat(2,minmax(0,1fr));
            (100vw - 54px) / 2
        );
        width:calc(
            (100vw - 54px) / 2
        );
        min-width:145px;
    }


     .ws-product-image{
     gap:10px;
        height:135px;
}
    }


    .ws-product-title{
.ws-category-box{
        font-size:11px;
    }


     .ws-category-grid{
     background:#fff;
        grid-template-columns:repeat(2,1fr);
    }


     .ws-category-box{
     border:1px solid var(--ws-border);
        min-height:110px;
        padding:13px 9px;
    }


     .ws-category-box-icon{
     border-radius:17px;
        width:52px;
        height:52px;
        flex-basis:52px;
        font-size:22px;
    }


     .ws-category-box strong{
     padding:12px;
        font-size:12px;
    }


     .ws-category-box span{
     display:flex;
        font-size:10px;
    }
}


    align-items:center;


/* =========================================================
    gap:10px;
  ACCESSIBILITY
========================================================= */


@media (prefers-reduced-motion:reduce){
    min-height:88px;


     .ws-hero-track,
     transition:.2s;
    .ws-product-track,
    .ws-category,
    .ws-product-card,
    .ws-category-box,
    .ws-article{
        transition:none!important;
    }
}
}


</style>
.ws-category-box:hover{


    border-color:var(--ws-secondary);


<div class="wiki-store">
    transform:translateY(-3px);
}


.ws-category-box-icon{


<!-- ======================================================
    flex:0 0 52px;
    TOP BAR
====================================================== -->


<header class="ws-topbar">
    width:52px;
    height:52px;


<div class="ws-topbar-inner">
    border-radius:13px;


<div class="ws-top-item">
    display:grid;
<i class="fa-solid fa-headset"></i>
    place-items:center;
مشاوره تخصصی سیستم‌های امنیتی
</div>


<div class="ws-top-item">
    background:#edf7f3;
<i class="fa-solid fa-clock"></i>
شنبه تا پنجشنبه ۹ تا ۲۰
</div>


<div class="ws-top-item">
    color:var(--ws-secondary);
<i class="fa-solid fa-phone"></i>
تماس با ARS
</div>


<div class="ws-top-item">
    font-size:22px;
<i class="fa-solid fa-shield-halved"></i>
}
راهکارهای هوشمند حفاظتی
</div>


</div>
.ws-category-box strong{


</header>
    display:block;


    color:var(--ws-primary);


<!-- ======================================================
    font-size:12px;
    HEADER
}
====================================================== -->


<header class="ws-header">
.ws-category-box span{


<div class="ws-header-main">
    display:block;


<a href="#" class="ws-logo">
    color:var(--ws-muted);


<span class="ws-logo-icon">
    font-size:10px;
<i class="fa-solid fa-camera"></i>
 
</span>
    line-height:1.8;


<span>
    margin-top:4px;
ARS
}
<small>
دوربین مداربسته و سیستم‌های امنیتی
</small>
</span>


</a>
@media (min-width:600px){


    .ws-category-grid{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }


<form class="ws-search" role="search">
    .ws-category-box{
        min-height:110px;
    }
}


<input
@media (min-width:900px){
type="search"
placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
aria-label="جستجوی محصولات دوربین مداربسته">


<button type="submit">
    .ws-category-grid{
<i class="fa-solid fa-magnifying-glass"></i>
        grid-template-columns:
</button>
            repeat(5,minmax(0,1fr));


</form>
        gap:13px;
    }


    .ws-category-box{
        min-height:125px;


<div class="ws-actions">
        padding:16px;


<a href="#" class="ws-action">
        flex-direction:column;
<i class="fa-regular fa-user"></i>
<span>حساب کاربری</span>
</a>


<a href="#" class="ws-action">
        justify-content:center;
<i class="fa-regular fa-heart"></i>
<span>علاقه‌مندی</span>
</a>


<a href="#" class="ws-action">
        text-align:center;
<i class="fa-solid fa-cart-shopping"></i>
    }
<span>سبد خرید</span>
</a>


</div>
    .ws-category-box-icon{


</div>
        width:64px;
        height:64px;


        flex-basis:64px;


<nav class="ws-nav">
        font-size:27px;
    }


<ul class="ws-nav-list">
    .ws-category-box strong{
        font-size:14px;
    }


<li>
    .ws-category-box span{
<a href="#">
        font-size:11px;
<i class="fa-solid fa-bars"></i>
    }
دسته‌بندی تجهیزات امنیتی
}
</a>
</li>


<li><a href="#">دوربین مداربسته</a></li>


<li><a href="#">DVR و NVR</a></li>
/* =========================================================
  BRANDS
========================================================= */


<li><a href="#">دزدگیر اماکن</a></li>
.ws-brands{


<li><a href="#">تجهیزات انتقال تصویر</a></li>
    display:grid;


<li><a href="#">لوازم جانبی دوربین</a></li>
    grid-template-columns:
        repeat(2,minmax(0,1fr));


<li>
    gap:9px;
<a href="#" class="ws-special">
}
<i class="fa-solid fa-percent"></i>
پیشنهادهای ویژه
</a>
</li>


</ul>
.ws-brand-card{


</nav>
    height:75px;


</header>
    border:1px solid var(--ws-border);


    border-radius:14px;


<!-- ======================================================
    background:#fff;
    QUICK CATEGORIES
====================================================== -->


<section class="ws-section">
    display:flex;


<div class="ws-section-head">
    align-items:center;
    justify-content:center;


<h1 class="ws-section-title">
    padding:10px;
خرید دوربین مداربسته و تجهیزات امنیتی ARS
</h1>


<a href="#" class="ws-more">
    overflow:hidden;
مشاهده همه
}
</a>


</div>
.ws-brand-card img{


    width:100%;
    height:100%;


<div class="ws-category-scroll">
    object-fit:contain;


<a href="#" class="ws-category">
    object-position:center;
<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">
  ARTICLES
<i class="fa-solid fa-hard-drive"></i>
========================================================= */
</div>
<strong>DVR و NVR</strong>
</a>


<a href="#" class="ws-category">
.ws-articles{
<div class="ws-category-icon">
<i class="fa-solid fa-bell"></i>
</div>
<strong>دزدگیر اماکن</strong>
</a>


<a href="#" class="ws-category">
    display:grid;
<div class="ws-category-icon">
<i class="fa-solid fa-wifi"></i>
</div>
<strong>انتقال تصویر</strong>
</a>


<a href="#" class="ws-category">
    grid-template-columns:1fr;
<div class="ws-category-icon">
<i class="fa-solid fa-plug"></i>
</div>
<strong>لوازم جانبی</strong>
</a>


</div>
    gap:11px;
}


</section>
.ws-article{


    background:#fff;


<!-- ======================================================
    border:1px solid var(--ws-border);
    HERO SLIDER
    هر 3 ثانیه
====================================================== -->


<section class="ws-section">
    border-radius:16px;


<div class="ws-hero" data-hero-slider>
    overflow:hidden;
}


<div class="ws-hero-track">
.ws-article-image{


<a href="#" class="ws-hero-slide">
    width:100%;
<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-01.png"
alt="دوربین مداربسته ARS و سیستم‌های امنیتی">
</a>


<a href="#" class="ws-hero-slide">
    aspect-ratio:16/9;
<img
src="https://dl.faraghaib.ir/m/260018-01/baner-01-02.png"
alt="فروش و نصب دوربین مداربسته ARS">
</a>


<a href="#" class="ws-hero-slide">
    background:#edf0f3;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="خرید دوربین مداربسته و تجهیزات حفاظتی">
</a>


</div>
    overflow:hidden;
}


<div class="ws-hero-dots"></div>
.ws-article-image img{


</div>
    width:100%;
    height:100%;


</section>
    display:block;


    object-fit:contain;


<!-- ======================================================
    object-position:center;
    SPECIAL PRODUCTS
}
    4 کارت در هر ردیف
====================================================== -->


<section class="ws-section">
.ws-article-content{
    padding:12px;
}


<div class="ws-section-head">
.ws-article h3{


<h2 class="ws-section-title">
    margin:0;
محصولات ویژه دوربین مداربسته ARS
</h2>


<a href="#" class="ws-more">
    color:var(--ws-primary);
مشاهده همه محصولات
</a>


</div>
    font-size:14px;


    line-height:1.8;
}


<div class="ws-product-slider" data-product-slider>
.ws-article p{


<div class="ws-product-track">
    color:var(--ws-muted);


    font-size:11px;


<!-- ROW 1 - 4 CARDS -->
    line-height:1.9;


<div class="ws-product-row">
    margin:6px 0 9px;
}


.ws-read{


<article class="ws-product-card">
    color:var(--ws-secondary);


<div class="ws-product-image">
    font-size:11px;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته بولت ARS">
</div>


<div class="ws-product-info">
    font-weight:800;
}


<div class="ws-brand">ARS</div>


<h3 class="ws-product-title">
/* =========================================================
دوربین مداربسته بولت با دید در شب
  BENEFITS
</h3>
========================================================= */


<div class="ws-price">
.ws-benefits{
<span class="ws-new-price">قیمت تماس</span>
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
    display:grid;
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    grid-template-columns:
        repeat(2,minmax(0,1fr));


</article>
    gap:9px;
}


.ws-benefit{


<article class="ws-product-card">
    min-height:105px;


<div class="ws-product-image">
    background:#fff;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته دام ARS">
</div>


<div class="ws-product-info">
    border:1px solid var(--ws-border);


<div class="ws-brand">ARS</div>
    border-radius:16px;


<h3 class="ws-product-title">
    padding:13px 8px;
دوربین مداربسته دام مناسب محیط داخلی
</h3>


<div class="ws-price">
    text-align:center;
<span class="ws-new-price">قیمت تماس</span>
}
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
.ws-benefit-icon{
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    width:42px;
    height:42px;


</article>
    margin:0 auto 7px;


    border-radius:50%;


<article class="ws-product-card">
    background:var(--ws-gold-light);


<div class="ws-product-image">
    color:var(--ws-gold);
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته تحت شبکه IP">
</div>


<div class="ws-product-info">
    display:grid;


<div class="ws-brand">ARS</div>
    place-items:center;


<h3 class="ws-product-title">
    font-size:19px;
دوربین مداربسته تحت شبکه IP
}
</h3>


<div class="ws-price">
.ws-benefit strong{
<span class="ws-new-price">قیمت تماس</span>
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
    display:block;
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    font-size:12px;


</article>
    color:var(--ws-primary);
}


.ws-benefit span{


<!-- کارت چهارم -->
    display:block;


<article class="ws-product-card">
    margin-top:4px;


<div class="ws-product-image">
    font-size:10px;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته دید در شب ARS">
</div>


<div class="ws-product-info">
    color:var(--ws-muted);
}


<div class="ws-brand">ARS</div>
@media (min-width:600px){


<h3 class="ws-product-title">
    .ws-benefits{
دوربین مداربسته دید در شب حرفه‌ای
        grid-template-columns:
</h3>
            repeat(4,minmax(0,1fr));
    }


<div class="ws-price">
    .ws-brands{
<span class="ws-new-price">قیمت تماس</span>
        grid-template-columns:
<span class="ws-discount">ویژه</span>
            repeat(4,minmax(0,1fr));
</div>
    }


<div class="ws-product-actions">
    .ws-articles{
<button class="ws-cart">دریافت مشاوره</button>
        grid-template-columns:
<button class="ws-favorite">
            repeat(2,minmax(0,1fr));
<i class="fa-regular fa-heart"></i>
    }
</button>
}
</div>


</div>
@media (min-width:900px){


</article>
    .ws-brands{
        grid-template-columns:
            repeat(6,minmax(0,1fr));
    }


</div>
    .ws-articles{
        grid-template-columns:
            repeat(3,minmax(0,1fr));
    }
}




<!-- ROW 2 - 4 CARDS -->
/* =========================================================
  CTA
========================================================= */


<div class="ws-product-row">
.ws-cta{


    margin-top:25px;


<article class="ws-product-card">
    padding:22px 15px;


<div class="ws-product-image">
    border-radius:20px;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه DVR دوربین مداربسته">
</div>


<div class="ws-product-info">
    background:
        linear-gradient(
            135deg,
            var(--ws-primary-dark),
            var(--ws-primary)
        );


<div class="ws-brand">ARS</div>
    color:#fff;


<h3 class="ws-product-title">
    text-align:center;
دستگاه DVR حرفه‌ای برای سیستم مداربسته
}
</h3>


<div class="ws-price">
.ws-cta h2{
<span class="ws-new-price">قیمت تماس</span>
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
    margin:0 0 8px;
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    font-size:20px;
}


</article>
.ws-cta p{


    margin:0 auto 15px;


<article class="ws-product-card">
    max-width:650px;


<div class="ws-product-image">
    color:#e5ebf0;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه NVR دوربین مداربسته">
</div>


<div class="ws-product-info">
    font-size:12px;


<div class="ws-brand">ARS</div>
    line-height:2;
}


<h3 class="ws-product-title">
.ws-cta-btn{
دستگاه NVR ضبط تصاویر دوربین تحت شبکه
</h3>


<div class="ws-price">
    display:inline-flex;
<span class="ws-new-price">قیمت تماس</span>
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
    align-items:center;
<button class="ws-cart">دریافت مشاوره</button>
    justify-content:center;
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    gap:8px;


</article>
    background:var(--ws-gold);


    color:#fff;


<article class="ws-product-card">
    padding:11px 22px;


<div class="ws-product-image">
    border-radius:10px;
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دزدگیر اماکن ARS">
</div>


<div class="ws-product-info">
    font-size:12px;


<div class="ws-brand">ARS</div>
    font-weight:800;
}


<h3 class="ws-product-title">
دزدگیر اماکن و سیستم اعلام سرقت
</h3>


<div class="ws-price">
/* =========================================================
<span class="ws-new-price">قیمت تماس</span>
  FOOTER
<span class="ws-discount">ویژه</span>
========================================================= */
</div>


<div class="ws-product-actions">
.ws-footer{
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    margin-top:25px;


</article>
    background:var(--ws-primary-dark);


    color:#fff;


<!-- کارت چهارم -->
    border-radius:20px 20px 0 0;


<article class="ws-product-card">
    padding:24px 15px 15px;
}


<div class="ws-product-image">
.ws-footer-grid{
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="هارد مخصوص دوربین مداربسته">
</div>


<div class="ws-product-info">
    display:grid;


<div class="ws-brand">ARS</div>
    grid-template-columns:1fr;


<h3 class="ws-product-title">
    gap:20px;
هارد مخصوص ضبط تصاویر دوربین مداربسته
}
</h3>


<div class="ws-price">
.ws-footer h3{
<span class="ws-new-price">قیمت تماس</span>
<span class="ws-discount">ویژه</span>
</div>


<div class="ws-product-actions">
    margin:0 0 10px;
<button class="ws-cart">دریافت مشاوره</button>
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
</div>


</div>
    font-size:14px;
}


</article>
.ws-footer p,
.ws-footer li,
.ws-footer a{


</div>
    color:#cbd5df;


</div>
    font-size:11px;


</div>
    line-height:2;
}
 
.ws-footer ul{


</section>
    margin:0;


    padding:0;


<!-- ======================================================
    list-style:none;
    BENEFITS
}
====================================================== -->


<section class="ws-section">
.ws-footer i{


<div class="ws-section-head">
    color:var(--ws-gold);


<h2 class="ws-section-title">
    width:20px;
چرا سیستم امنیتی ARS؟
}
</h2>


</div>
.ws-footer-bottom{


<div class="ws-benefits">
    border-top:
        1px solid rgba(255,255,255,.1);


<div class="ws-benefit">
    margin-top:18px;
<div class="ws-benefit-icon">
<i class="fa-solid fa-camera"></i>
</div>
<strong>تجهیزات باکیفیت</strong>
<span>انتخاب تجهیزات مناسب برای هر پروژه</span>
</div>


<div class="ws-benefit">
    padding-top:12px;
<div class="ws-benefit-icon">
<i class="fa-solid fa-headset"></i>
</div>
<strong>مشاوره تخصصی</strong>
<span>راهنمایی برای انتخاب دوربین مناسب</span>
</div>


<div class="ws-benefit">
    text-align:center;
<div class="ws-benefit-icon">
<i class="fa-solid fa-shield-halved"></i>
</div>
<strong>امنیت مطمئن</strong>
<span>راهکارهای نظارتی متناسب با نیاز شما</span>
</div>


<div class="ws-benefit">
    color:#9eabb7;
<div class="ws-benefit-icon">
<i class="fa-solid fa-screwdriver-wrench"></i>
</div>
<strong>نصب و راه‌اندازی</strong>
<span>اجرای اصولی سیستم‌های نظارتی</span>
</div>


</div>
    font-size:10px;
}


</section>
@media (min-width:900px){


    .ws-footer-grid{
        grid-template-columns:
            2fr 1fr 1fr 1fr;
    }
}


<!-- ======================================================
    SECURITY CATEGORIES
    5 CARDS
====================================================== -->


<section class="ws-section">
/* =========================================================
  ACCESSIBILITY
========================================================= */


<div class="ws-section-head">
@media (prefers-reduced-motion:reduce){


<h2 class="ws-section-title">
    .ws-hero-track,
دسته‌بندی تجهیزات امنیتی
    .ws-product-track,
</h2>
    .ws-category,
    .ws-product-card,
    .ws-category-box,
    .ws-article{
 
        transition:none !important;
    }
}
 
</style>


<a href="#" class="ws-more">
مشاهده همه دسته‌بندی‌ها
</a>


</div>
<div class="wiki-store">




<div class="ws-category-grid">
<!-- ======================================================
    TOP BAR
====================================================== -->


<header class="ws-topbar">


<a href="#" class="ws-category-box">
<div class="ws-topbar-inner">


<div class="ws-category-box-icon">
<div class="ws-top-item">
<i class="fa-solid fa-camera"></i>
<i class="fa-solid fa-headset"></i>
مشاوره تخصصی سیستم‌های امنیتی
</div>
</div>


<div>
<div class="ws-top-item">
<strong>دوربین مداربسته</strong>
<i class="fa-solid fa-clock"></i>
<span>انواع دوربین برای فضای داخلی و خارجی</span>
شنبه تا پنجشنبه ۹ تا ۲۰
</div>
</div>


</a>
<div class="ws-top-item">
<i class="fa-solid fa-phone"></i>
تماس با ARS
</div>


 
<div class="ws-top-item">
<a href="#" class="ws-category-box">
<i class="fa-solid fa-shield-halved"></i>
 
راهکارهای هوشمند حفاظتی
<div class="ws-category-box-icon">
<i class="fa-solid fa-video"></i>
</div>
</div>


<div>
<strong>دوربین تحت شبکه</strong>
<span>دوربین IP و تجهیزات نظارت تصویری</span>
</div>
</div>


</a>
</header>




<a href="#" class="ws-category-box">
<!-- ======================================================
    HEADER
====================================================== -->


<div class="ws-category-box-icon">
<header class="ws-header">
<i class="fa-solid fa-hard-drive"></i>
</div>


<div>
<div class="ws-header-main">
<strong>DVR و NVR</strong>
<span>دستگاه‌های ضبط و مدیریت تصاویر</span>
</div>


</a>
<a href="#" class="ws-logo"
aria-label="صفحه اصلی دوربین مداربسته ARS">


<span class="ws-logo-icon">
<i class="fa-solid fa-camera"></i>
</span>


<a href="#" class="ws-category-box">
<span>
 
ARS
<div class="ws-category-box-icon">
<small>
<i class="fa-solid fa-bell"></i>
دوربین مداربسته و سیستم‌های امنیتی
</div>
</small>
 
</span>
<div>
<strong>دزدگیر اماکن</strong>
<span>سیستم اعلام سرقت و حفاظت از اماکن</span>
</div>


</a>
</a>




<a href="#" class="ws-category-box">
<form class="ws-search" role="search">


<div class="ws-category-box-icon">
<input
<i class="fa-solid fa-mobile-screen-button"></i>
type="search"
</div>
placeholder="جستجوی دوربین مداربسته، DVR، NVR یا تجهیزات امنیتی..."
aria-label="جستجوی محصولات دوربین مداربسته">


<div>
<button type="submit" aria-label="جستجو">
<strong>انتقال تصویر</strong>
<span>مشاهده تصاویر دوربین از راه دور</span>
</div>


</a>
<i class="fa-solid fa-magnifying-glass"></i>


</button>


</div>
</form>


</section>


<div class="ws-actions">


<!-- ======================================================
<a href="#" class="ws-action">
    BRANDS
====================================================== -->


<section class="ws-section">
<i class="fa-regular fa-user"></i>


<div class="ws-section-head">
<span>
حساب کاربری
</span>
 
</a>


<h2 class="ws-section-title">
<a href="#" class="ws-action">
برندهای تجهیزات امنیتی
</h2>


</div>
<i class="fa-regular fa-heart"></i>


<div class="ws-brands">
<span>
علاقه‌مندی
</span>


<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند ARS دوربین مداربسته">
</a>
</a>


<a href="#" class="ws-brand-card">
<a href="#" class="ws-action">
<img
 
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
<i class="fa-solid fa-cart-shopping"></i>
alt="برند دوربین مداربسته">
</a>


<a href="#" class="ws-brand-card">
<span>
<img
سبد خرید
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
</span>
alt="برند تجهیزات نظارتی">
</a>


<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند تجهیزات امنیتی">
</a>
</a>


<a href="#" class="ws-brand-card">
</div>
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند دوربین تحت شبکه">
</a>
 
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند سیستم حفاظتی">
</a>


</div>
</div>


</section>


<nav class="ws-nav"
aria-label="منوی اصلی دوربین مداربسته ARS">


<!-- ======================================================
<ul class="ws-nav-list">
    BEST SELLERS
    4 CARDS IN EACH ROW
====================================================== -->


<section class="ws-section">
<li>
<a href="#">
<i class="fa-solid fa-bars"></i>
دسته‌بندی تجهیزات امنیتی
</a>
</li>


<div class="ws-section-head">
<li>
<a href="#">
دوربین مداربسته
</a>
</li>


<h2 class="ws-section-title">
<li>
پرفروش‌ترین دوربین‌ها و تجهیزات امنیتی
<a href="#">
</h2>
DVR و NVR
 
<a href="#" class="ws-more">
مشاهده همه
</a>
</a>
</li>


</div>
<li>
<a href="#">
دزدگیر اماکن
</a>
</li>
 
<li>
<a href="#">
تجهیزات انتقال تصویر
</a>
</li>


<li>
<a href="#">
لوازم جانبی دوربین
</a>
</li>


<div class="ws-product-slider" data-product-slider>
<li>
<a href="#" class="ws-special">
<i class="fa-solid fa-percent"></i>
پیشنهادهای ویژه
</a>
</li>


<div class="ws-product-track">
</ul>


</nav>


<!-- ROW 1 -->
</header>


<div class="ws-product-row">


<!-- ======================================================
    QUICK CATEGORIES
====================================================== -->


<article class="ws-product-card">
<section class="ws-section">


<div class="ws-product-image">
<div class="ws-section-head">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته پرفروش ARS">
</div>


<div class="ws-product-info">
<h1 class="ws-section-title">
خرید دوربین مداربسته و تجهیزات امنیتی ARS
</h1>


<h3 class="ws-product-title">
<a href="#" class="ws-more">
دوربین مداربسته پرفروش ARS
مشاهده همه
</h3>
</a>


<div class="ws-price">
<span class="ws-new-price">قیمت تماس</span>
</div>
</div>


</div>


</article>
<div class="ws-category-scroll">


<a href="#" class="ws-category">


<article class="ws-product-card">
<div class="ws-category-icon">
 
<i class="fa-solid fa-camera"></i>
<div class="ws-product-image">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین IP پرفروش">
</div>
</div>


<div class="ws-product-info">
<strong>
دوربین مداربسته
</strong>


<h3 class="ws-product-title">
</a>
دوربین تحت شبکه IP
</h3>


<div class="ws-price">
<span class="ws-new-price">قیمت تماس</span>
</div>


</div>
<a href="#" class="ws-category">


</article>
<div class="ws-category-icon">
<i class="fa-solid fa-video"></i>
</div>
 
<strong>
دوربین تحت شبکه
</strong>
 
</a>




<article class="ws-product-card">
<a href="#" class="ws-category">


<div class="ws-product-image">
<div class="ws-category-icon">
<img
<i class="fa-solid fa-hard-drive"></i>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه DVR پرفروش">
</div>
</div>


<div class="ws-product-info">
<strong>
DVR و NVR
</strong>
 
</a>


<h3 class="ws-product-title">
دستگاه DVR ضبط تصاویر
</h3>


<div class="ws-price">
<a href="#" class="ws-category">
<span class="ws-new-price">قیمت تماس</span>
</div>


<div class="ws-category-icon">
<i class="fa-solid fa-bell"></i>
</div>
</div>


</article>
<strong>
دزدگیر اماکن
</strong>


</a>


<!-- کارت چهارم -->


<article class="ws-product-card">
<a href="#" class="ws-category">


<div class="ws-product-image">
<div class="ws-category-icon">
<img
<i class="fa-solid fa-wifi"></i>
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دوربین مداربسته دید در شب پرفروش">
</div>
</div>


<div class="ws-product-info">
<strong>
انتقال تصویر
</strong>
 
</a>
 


<h3 class="ws-product-title">
<a href="#" class="ws-category">
دوربین مداربسته دید در شب
</h3>


<div class="ws-price">
<div class="ws-category-icon">
<span class="ws-new-price">قیمت تماس</span>
<i class="fa-solid fa-plug"></i>
</div>
</div>
<strong>
لوازم جانبی
</strong>
</a>


</div>
</div>


</article>
</section>
 


</div>
<!-- ======================================================
    HERO
    فقط آدرس src تصاویر را عوض کنید
====================================================== -->


<section class="ws-section">


<!-- ROW 2 -->
<div class="ws-hero"
data-hero-slider>


<div class="ws-product-row">
<div class="ws-hero-track">




<article class="ws-product-card">
<a href="#" class="ws-hero-slide">


<div class="ws-product-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه NVR پرفروش">
alt="دوربین مداربسته ARS و سیستم‌های امنیتی"
</div>
loading="eager">


<div class="ws-product-info">
</a>


<h3 class="ws-product-title">
دستگاه NVR حرفه‌ای
</h3>


<div class="ws-price">
<a href="#" class="ws-hero-slide">
<span class="ws-new-price">قیمت تماس</span>
</div>


</div>
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="فروش و نصب دوربین مداربسته ARS"
loading="lazy">


</article>
</a>




<article class="ws-product-card">
<a href="#" class="ws-hero-slide">


<div class="ws-product-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="هارد مخصوص دوربین مداربسته">
alt="خرید دوربین مداربسته و تجهیزات حفاظتی"
</div>
loading="lazy">


<div class="ws-product-info">
</a>


<h3 class="ws-product-title">
هارد مخصوص سیستم مداربسته
</h3>


<div class="ws-price">
<span class="ws-new-price">قیمت تماس</span>
</div>
</div>
<div class="ws-hero-dots"></div>


</div>
</div>


</article>
</section>




<article class="ws-product-card">
<!-- ======================================================
    SPECIAL PRODUCTS
    2 ROW
====================================================== -->


<div class="ws-product-image">
<section class="ws-section">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دزدگیر اماکن پرفروش">
</div>


<div class="ws-product-info">
<div class="ws-section-head">


<h3 class="ws-product-title">
<h2 class="ws-section-title">
دزدگیر اماکن هوشمند
محصولات ویژه دوربین مداربسته ARS
</h3>
</h2>
 
<a href="#" class="ws-more">
مشاهده همه محصولات
</a>


<div class="ws-price">
<span class="ws-new-price">قیمت تماس</span>
</div>
</div>


</div>


</article>
<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">
<article class="ws-product-card">


<div class="ws-product-image">
<div class="ws-product-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="تجهیزات انتقال تصویر دوربین">
alt="دوربین مداربسته بولت ARS"
loading="lazy">
 
</div>
</div>


<div class="ws-product-info">
<div class="ws-product-info">
<div class="ws-brand">
ARS
</div>


<h3 class="ws-product-title">
<h3 class="ws-product-title">
تجهیزات انتقال تصویر دوربین
دوربین مداربسته بولت با دید در شب
</h3>
</h3>


<div class="ws-price">
<div class="ws-price">
<span class="ws-new-price">قیمت تماس</span>
</div>


</div>
<span class="ws-new-price">
قیمت تماس
</span>


</article>
<span class="ws-discount">
ویژه
</span>


</div>
</div>


</div>
<div class="ws-product-actions">


</div>
<button class="ws-cart">
دریافت مشاوره
</button>


</section>
<button
class="ws-favorite"
aria-label="افزودن به علاقه‌مندی">


<i class="fa-regular fa-heart"></i>


<!-- ======================================================
</button>
    ARTICLES
====================================================== -->


<section class="ws-section">
</div>
 
<div class="ws-section-head">
 
<h2 class="ws-section-title">
مجله تخصصی دوربین مداربسته و سیستم‌های امنیتی
</h2>
 
<a href="#" class="ws-more">
مشاهده مقالات
</a>


</div>
</div>


</article>


<div class="ws-articles">


<article class="ws-product-card">


<article class="ws-article">
<div class="ws-product-image">


<div class="ws-article-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="راهنمای خرید دوربین مداربسته">
alt="دوربین مداربسته دام ARS"
loading="lazy">
 
</div>
</div>


<div class="ws-article-content">
<div class="ws-product-info">
 
<div class="ws-brand">
ARS
</div>


<h3>
<h3 class="ws-product-title">
راهنمای خرید دوربین مداربسته برای منزل و محل کار
دوربین مداربسته دام مناسب محیط داخلی
</h3>
</h3>


<p>
<div class="ws-price">
با مهم‌ترین نکات انتخاب دوربین مداربسته،
 
کیفیت تصویر، دید در شب و نوع مناسب دوربین آشنا شوید.
<span class="ws-new-price">
</p>
قیمت تماس
</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>


<a href="#" class="ws-read">
</div>
مطالعه مقاله ←
</a>


</div>
</div>
خط ۲٬۱۳۶: خط ۱٬۹۳۲:




<article class="ws-article">
<article class="ws-product-card">
 
<div class="ws-product-image">


<div class="ws-article-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="تفاوت دوربین مداربسته آنالوگ و تحت شبکه">
alt="دوربین مداربسته تحت شبکه IP"
loading="lazy">
 
</div>
</div>


<div class="ws-article-content">
<div class="ws-product-info">


<h3>
<div class="ws-brand">
تفاوت دوربین مداربسته آنالوگ و تحت شبکه چیست؟
ARS
</div>
 
<h3 class="ws-product-title">
دوربین مداربسته تحت شبکه IP با کیفیت بالا
</h3>
</h3>


<p>
<div class="ws-price">
مقایسه دوربین‌های آنالوگ و IP و بررسی مزایا،
 
کاربردها و نکات انتخاب هر سیستم.
<span class="ws-new-price">
</p>
قیمت تماس
</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>


<a href="#" class="ws-read">
</div>
مطالعه مقاله ←
</a>


</div>
</div>
خط ۲٬۱۶۴: خط ۱٬۹۸۲:




<article class="ws-article">
<article class="ws-product-card">
 
<div class="ws-product-image">


<div class="ws-article-image">
<img
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="بهترین مکان نصب دوربین مداربسته">
alt="دوربین مداربسته دید در شب ARS"
loading="lazy">
 
</div>
</div>


<div class="ws-article-content">
<div class="ws-product-info">


<h3>
<div class="ws-brand">
بهترین مکان برای نصب دوربین مداربسته کجاست؟
ARS
</div>
 
<h3 class="ws-product-title">
دوربین مداربسته دید در شب حرفه‌ای
</h3>
</h3>


<p>
<div class="ws-price">
نکات مهم انتخاب محل نصب دوربین برای افزایش
 
امنیت منزل، فروشگاه، دفتر و محیط‌های صنعتی.
<span class="ws-new-price">
</p>
قیمت تماس
</span>


<a href="#" class="ws-read">
<span class="ws-discount">
مطالعه مقاله ←
ویژه
</a>
</span>


</div>
</div>


</article>
<div class="ws-product-actions">
 
<button class="ws-cart">
دریافت مشاوره
</button>
 
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>


</div>
</div>


</section>
</div>


</article>


<!-- ======================================================
</div>
    CTA
====================================================== -->


<section class="ws-cta">


<h2>
<!-- ROW 2 -->
برای انتخاب دوربین مداربسته مناسب نیاز به مشاوره دارید؟
</h2>


<p>
<div class="ws-product-row">
کارشناسان ARS آماده‌اند با بررسی محیط، میزان امنیت موردنیاز
و بودجه شما، مناسب‌ترین دوربین مداربسته و تجهیزات حفاظتی
را پیشنهاد دهند.
</p>


<a href="#" class="ws-cta-btn">


<i class="fa-solid fa-phone"></i>
<article class="ws-product-card">


دریافت مشاوره تخصصی
<div class="ws-product-image">


</a>
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه DVR دوربین مداربسته"
loading="lazy">


</section>
</div>


<div class="ws-product-info">


<!-- ======================================================
<div class="ws-brand">
    FOOTER
ARS
====================================================== -->
</div>


<footer class="ws-footer">
<h3 class="ws-product-title">
دستگاه DVR حرفه‌ای برای سیستم مداربسته
</h3>


<div class="ws-footer-grid">
<div class="ws-price">


<span class="ws-new-price">
قیمت تماس
</span>


<div>
<span class="ws-discount">
ویژه
</span>


<h3>درباره ARS</h3>
</div>


<p>
<div class="ws-product-actions">
ARS در زمینه دوربین مداربسته،
سیستم‌های نظارت تصویری، دزدگیر اماکن
و تجهیزات امنیتی فعالیت می‌کند و
راهکارهای حفاظتی متناسب با نیاز مشتریان ارائه می‌دهد.
</p>


<p>
<button class="ws-cart">
<i class="fa-solid fa-location-dot"></i>
دریافت مشاوره
آدرس مجموعه ARS
</button>
</p>


<p>
<button class="ws-favorite">
<i class="fa-solid fa-phone"></i>
<i class="fa-regular fa-heart"></i>
شماره تماس ARS
</button>
</p>


</div>
</div>


</div>


<div>
</article>


<h3>دسترسی سریع</h3>


<ul>
<article class="ws-product-card">


<li><a href="#">صفحه اصلی</a></li>
<div class="ws-product-image">
<li><a href="#">دوربین مداربسته</a></li>
<li><a href="#">تجهیزات امنیتی</a></li>
<li><a href="#">محصولات ویژه</a></li>


</ul>
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دستگاه NVR دوربین مداربسته"
loading="lazy">


</div>
</div>


<div class="ws-product-info">


<div>
<div class="ws-brand">
ARS
</div>


<h3>خدمات ARS</h3>
<h3 class="ws-product-title">
دستگاه NVR ضبط تصاویر دوربین تحت شبکه
</h3>


<ul>
<div class="ws-price">


<li><a href="#">مشاوره خرید دوربین</a></li>
<span class="ws-new-price">
<li><a href="#">نصب دوربین مداربسته</a></li>
قیمت تماس
<li><a href="#">راه‌اندازی سیستم امنیتی</a></li>
</span>
<li><a href="#">پشتیبانی و خدمات</a></li>


</ul>
<span class="ws-discount">
ویژه
</span>


</div>
</div>


<div class="ws-product-actions">


<div>
<button class="ws-cart">
دریافت مشاوره
</button>
 
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>
 
</div>


<h3>ارتباط با ما</h3>
</div>


<ul>
</article>


<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
اینستاگرام ARS
</a>
</li>


<li>
<article class="ws-product-card">
<a href="#">
<i class="fa-brands fa-telegram"></i>
تلگرام ARS
</a>
</li>


<li>
<div class="ws-product-image">
<a href="#">
<i class="fa-brands fa-whatsapp"></i>
واتساپ ARS
</a>
</li>


</ul>
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="دزدگیر اماکن ARS"
loading="lazy">


</div>
</div>


<div class="ws-product-info">


<div class="ws-brand">
ARS
</div>
</div>


<h3 class="ws-product-title">
دزدگیر اماکن و سیستم اعلام سرقت
</h3>
<div class="ws-price">


<div class="ws-footer-bottom">
<span class="ws-new-price">
© ۱۴۰۵ تمامی حقوق وب‌سایت دوربین مداربسته ARS محفوظ است.
قیمت تماس
</div>
</span>


</footer>
<span class="ws-discount">
ویژه
</span>


</div>
</div>


<div class="ws-product-actions">


<script>
<button class="ws-cart">
دریافت مشاوره
</button>


document.addEventListener("DOMContentLoaded",function(){
<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>


</div>


/* =========================================================
</div>
  HERO SLIDER
  هر 3 ثانیه
========================================================= */


const hero=document.querySelector("[data-hero-slider]");
</article>


if(hero){


const track=hero.querySelector(".ws-hero-track");
<article class="ws-product-card">
const slides=hero.querySelectorAll(".ws-hero-slide");
const dotsBox=hero.querySelector(".ws-hero-dots");


let current=0;
<div class="ws-product-image">
let timer;


<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="هارد مخصوص دوربین مداربسته"
loading="lazy">


slides.forEach(function(slide,index){
</div>


const dot=document.createElement("button");
<div class="ws-product-info">


dot.type="button";
<div class="ws-brand">
dot.className="ws-hero-dot";
ARS
</div>


if(index===0){
<h3 class="ws-product-title">
dot.classList.add("active");
هارد مخصوص ضبط تصاویر دوربین مداربسته
}
</h3>


dot.setAttribute(
<div class="ws-price">
"aria-label",
"نمایش اسلاید "+(index+1)
);


dot.addEventListener("click",function(){
<span class="ws-new-price">
قیمت تماس
</span>


goToSlide(index);
<span class="ws-discount">
restart();
ویژه
</span>


});
</div>


dotsBox.appendChild(dot);
<div class="ws-product-actions">


});
<button class="ws-cart">
دریافت مشاوره
</button>


<button class="ws-favorite">
<i class="fa-regular fa-heart"></i>
</button>


const dots=dotsBox.querySelectorAll(".ws-hero-dot");
</div>


</div>


function goToSlide(index){
</article>


current=index;
</div>


track.style.transform=
</div>
"translateX(-"+(current*100)+"%)";


dots.forEach(function(dot,i){
</div>


dot.classList.toggle(
</section>
"active",
i===current
);


});


}
<!-- ======================================================
    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-02.png"
alt="برند ARS دوربین مداربسته"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند دوربین مداربسته"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند تجهیزات نظارتی"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند تجهیزات امنیتی"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.png"
alt="برند دوربین تحت شبکه"
loading="lazy">
</a>
<a href="#" class="ws-brand-card">
<img
src="https://dl.faraghaib.ir/m/260018-01/260018-01-02.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-02.png"
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-02.png"
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-02.png"
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-02.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>
</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-02.png"
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-02.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-02.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-02.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>
</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-02.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-02.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-02.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>
<!-- ======================================================
    FOOTER
====================================================== -->
<footer class="ws-footer">
<div class="ws-footer-grid">
<div>
<h3>
درباره ARS
</h3>
<p>
ARS در زمینه دوربین مداربسته،
سیستم‌های نظارت تصویری، دزدگیر اماکن
و تجهیزات امنیتی فعالیت می‌کند و
راهکارهای حفاظتی متناسب با نیاز مشتریان ارائه می‌دهد.
</p>
<p>
<i class="fa-solid fa-location-dot"></i>
آدرس مجموعه ARS
</p>
<p>
<i class="fa-solid fa-phone"></i>
شماره تماس ARS
</p>
</div>
<div>
<h3>
دسترسی سریع
</h3>
<ul>
<li>
<a href="#">
صفحه اصلی
</a>
</li>
<li>
<a href="#">
دوربین مداربسته
</a>
</li>
<li>
<a href="#">
تجهیزات امنیتی
</a>
</li>
<li>
<a href="#">
محصولات ویژه
</a>
</li>
</ul>
</div>
<div>
<h3>
خدمات ARS
</h3>
<ul>
<li>
<a href="#">
مشاوره خرید دوربین
</a>
</li>
<li>
<a href="#">
نصب دوربین مداربسته
</a>
</li>
<li>
<a href="#">
راه‌اندازی سیستم امنیتی
</a>
</li>
<li>
<a href="#">
پشتیبانی و خدمات
</a>
</li>
</ul>
</div>
<div>
<h3>
ارتباط با ما
</h3>
<ul>
<li>
<a href="#">
<i class="fa-brands fa-instagram"></i>
اینستاگرام ARS
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-telegram"></i>
تلگرام ARS
</a>
</li>
<li>
<a href="#">
<i class="fa-brands fa-whatsapp"></i>
واتساپ ARS
</a>
</li>
</ul>
</div>
</div>
<div class="ws-footer-bottom">
© ۱۴۰۵ تمامی حقوق وب‌سایت دوربین مداربسته ARS محفوظ است.
</div>
</footer>
</div>
<script>
document.addEventListener(
"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(){


function next(){
            return Math.max(
                0,
                track.scrollWidth -
                slider.clientWidth
            );


current=(current+1)%slides.length;
        }


goToSlide(current);


}
        /* -----------------------------------------
          اندازه حرکت
        ----------------------------------------- */


        function getStep(){


/* دقیقا 3 ثانیه */
            const card =
            track.querySelector(
                ".ws-product-card"
            );


function start(){
            if(!card) return 0;


timer=setInterval(next,3000);


}
            const style =
            window.getComputedStyle(
                card.parentElement
            );


            const gap =
            parseFloat(
                style.columnGap ||
                style.gap ||
                10
            );


function restart(){


clearInterval(timer);
            return (
                card.getBoundingClientRect().width
                + gap
            );


start();
        }


}


        /* -----------------------------------------
          حرکت
        ----------------------------------------- */


hero.addEventListener("mouseenter",function(){
        function moveNext(){


clearInterval(timer);
            const maxScroll =
            getMaxScroll();


});


            if(maxScroll<=0){


hero.addEventListener("mouseleave",function(){
                position=0;


restart();
                track.style.transform=
                    "translateX(0)";


});
                return;


            }


start();


}
            const step =
            getStep();




/* =========================================================
            position += step;
  TWO ROW PRODUCT SLIDERS
========================================================= */


document.querySelectorAll(
"[data-product-slider]"
).forEach(function(slider){


const track=
            /*
slider.querySelector(".ws-product-track");
              اگر به انتها رسید:
              دوباره از ابتدا
            */


if(!track) return;
            if(position>=maxScroll){


let position=0;
                position=0;
let autoTimer;


            }


function getStep(){


const card=
            track.style.transform =
track.querySelector(".ws-product-card");
                "translateX(-"+
                position+
                "px)";


if(!card) return 250;
        }


return card.getBoundingClientRect().width+10;


}
        /* -----------------------------------------
          شروع
        ----------------------------------------- */


        function start(){


function move(direction){
            stop();


const step=getStep();


position+=direction*step;
            autoTimer =
            setInterval(
                moveNext,
                3500
            );


if(position>0){
        }
position=0;
}




const maxScroll=Math.max(
        /* -----------------------------------------
0,
          توقف
track.scrollWidth-slider.clientWidth
        ----------------------------------------- */
);


        function stop(){


if(Math.abs(position)>maxScroll){
            if(autoTimer){


position=-maxScroll;
                clearInterval(
                    autoTimer
                );


}
                autoTimer=null;


            }


track.style.transform=
        }
"translateX("+position+"px)";


}


        slider.addEventListener(
            "mouseenter",
            stop
        );


/*
  حرکت خودکار اسلایدر محصولات
*/


function start(){
        slider.addEventListener(
            "mouseleave",
            start
        );


autoTimer=setInterval(function(){


move(-1);
        /*
          با تغییر اندازه صفحه،
          موقعیت نامعتبر حذف می‌شود.
        */


const maxScroll=Math.max(
        window.addEventListener(
0,
            "resize",
track.scrollWidth-slider.clientWidth
            function(){
);


                const maxScroll =
                getMaxScroll();


if(maxScroll<=0){


position=0;
                if(position>maxScroll){


track.style.transform=
                    position=0;
"translateX(0)";


return;
                }


}


                track.style.transform =
                    "translateX(-"+
                    position+
                    "px)";


if(Math.abs(position)>=maxScroll){
            }
        );


position=0;


track.style.transform=
        start();
"translateX(0)";


}
    }
 
);
},3500);
 
}
 
 
function restart(){
 
clearInterval(autoTimer);
 
start();
 
}
 
 
slider.addEventListener(
"mouseenter",
function(){
 
clearInterval(autoTimer);
 
});
 
 
slider.addEventListener(
"mouseleave",
function(){
 
restart();
 
});
 
 
start();
 
});


});
});

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

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

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

مشاهده همه

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

مشاهده همه دسته‌بندی‌ها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

قیمت تماس

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

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

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

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

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

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

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

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

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

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

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

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

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

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