|
|
| خط ۱: |
خط ۱: |
| <html lang="fa" dir="rtl">
| |
|
| |
|
| <link rel="stylesheet"
| |
| 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;
| |
| }
| |
|
| |
| .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"
| |
| 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>
| |
|
| |
|
| |
| </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>
| |
|
| |
| 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(){
| |
|
| |
| 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>
| |
|
| |
| </html>
| |