templates/application/contacts/index.html.twig line 1

Open in your IDE?
  1. {% extends 'application/layout.html.twig' %}
  3. {% block content %}
  4.     <main class="main">
  5.         <div class="breadcrumb">
  6.             <div class="container">
  7.                 <ol class="breadcrumb__list">
  8.                     <li class="breadcrumb__item"><a href="/" class="breadcrumb__link">Главная</a></li>
  9.                     <li class="breadcrumb__item active" aria-current="page">{{ page.name(app.request.locale) }}</li>
  10.                 </ol>
  11.             </div>
  12.         </div>
  14.         <div class="page">
  15.             <div class="container">
  16.                 <div class="page__header contacts-page__header">
  17.                     <h1 class="page__title">
  18.                         {{ page.name(app.request.locale) }}
  19.                         <p>Имеем официальных представителей по всей России</p>
  20.                     </h1>
  21.                 </div>
  22.                 <div class="tabs-wrapper ">
  23.                     <ul class="tabs__list">
  24.                         <li class="tabs__item">
  25.                             <a class="tabs__link tabs__link-city active" data-tab="spb">Санкт-Петербург</a>
  26.                         </li>
  27.                         <li class="tabs__item">
  28.                             <a class="tabs__link tabs__link-city" data-tab="msk">Москва</a>
  29.                         </li>
  30.                         <li class="tabs__item">
  31.                             <a class="tabs__link tabs__link-city" data-tab="rnd">Нижний Новгород</a>
  32.                         </li>
  33.                     </ul>
  34.                 </div>
  35.                 
  36.                 <div class="tab-content contacts-main-content">
  37.                     <div class="tab-content__item active" id="spb">
  38.                         <div class="contacts-cards-wrapper">
  39.                             <div class="contacts-card">
  40.                                 <div class="contacts-card__header">
  41.                                     <div class="contacts-card__title">Отдел розничных продаж</div>
  42.                                 </div>
  43.                                 <div class="contacts-card__content">
  44.                                     <div class="contacts-card__item">
  45.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  46.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a>
  47.                                     </div>
  48.                                     <div class="contacts-card__item">
  49.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  50.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  51.                                     </div>
  52.                                 </div>
  53.                             </div>   
  54.                             <div class="contacts-card">
  55.                                 <div class="contacts-card__header">
  56.                                     <div class="contacts-card__title">Отдел оптовых продаж</div>
  57.                                 </div>
  58.                                 <div class="contacts-card__content">
  59.                                     <div class="contacts-card__item">
  60.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  61.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a> <span>доб. 20</span>
  62.                                     </div>
  63.                                     <div class="contacts-card__item">
  64.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  65.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  66.                                     </div>
  67.                                 </div>
  68.                             </div>   
  69.                             <div class="contacts-card">
  70.                                 <div class="contacts-card__header">
  71.                                     <div class="contacts-card__title">Реквизиты</div>
  72.                                 </div>
  73.                                 <div class="contacts-card__content">
  74.                                     <div class="contacts-card__item">
  75.                                         <p>ИП Вавилова Галина Владимировна</p>
  76.                                     </div>
  77.                                     <div class="contacts-card__item">
  78.                                         <p>ИНН 470300285480</p>
  79.                                     </div>
  80.                                     <div class="contacts-card__item">
  81.                                         <p>ОГРН 304470335000088</p>
  82.                                     </div>
  83.                                 </div>
  84.                             </div>    
  85.                         </div>
  86.                     </div>
  87.                     
  88.                     <div class="tab-content__item" id="msk">
  89.                         <div class="contacts-cards-wrapper">
  90.                             <div class="contacts-card">
  91.                                 <div class="contacts-card__header">
  92.                                     <div class="contacts-card__title">Отдел розничных продаж 2</div>
  93.                                 </div>
  94.                                 <div class="contacts-card__content">
  95.                                     <div class="contacts-card__item">
  96.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  97.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a>
  98.                                     </div>
  99.                                     <div class="contacts-card__item">
  100.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  101.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  102.                                     </div>
  103.                                 </div>
  104.                             </div>   
  105.                             <div class="contacts-card">
  106.                                 <div class="contacts-card__header">
  107.                                     <div class="contacts-card__title">Отдел оптовых продаж 2 </div>
  108.                                 </div>
  109.                                 <div class="contacts-card__content">
  110.                                     <div class="contacts-card__item">
  111.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  112.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a> <span>доб. 20</span>
  113.                                     </div>
  114.                                     <div class="contacts-card__item">
  115.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  116.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  117.                                     </div>
  118.                                             </div>
  119.                                         </div>
  120.                             <div class="contacts-card">
  121.                                 <div class="contacts-card__header">
  122.                                     <div class="contacts-card__title">Реквизиты</div>
  123.                                 </div>
  124.                                 <div class="contacts-card__content">
  125.                                     <div class="contacts-card__item">
  126.                                         <p>ИП Вавилова Галина Владимировна</p>
  127.                                     </div>
  128.                                     <div class="contacts-card__item">
  129.                                         <p>ИНН 470300285480</p>
  130.                                     </div>
  131.                                     <div class="contacts-card__item">
  132.                                         <p>ОГРН 304470335000088</p>
  133.                                     </div>
  134.                                 </div>
  135.                             </div>
  136.                         </div>
  137.                     </div>
  138.                     
  139.                     <div class="tab-content__item" id="rnd">
  140.                         <div class="contacts-cards-wrapper">
  141.                             <div class="contacts-card">
  142.                                 <div class="contacts-card__header">
  143.                                     <div class="contacts-card__title">Отдел розничных продаж 3</div>
  144.                                 </div>
  145.                                 <div class="contacts-card__content">
  146.                                     <div class="contacts-card__item">
  147.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  148.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a>
  149.                                     </div>
  150.                                     <div class="contacts-card__item">
  151.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="#222f59" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  152.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  153.                                     </div>
  154.                                 </div>
  155.                             </div>   
  156.                             <div class="contacts-card">
  157.                                 <div class="contacts-card__header">
  158.                                     <div class="contacts-card__title">Отдел оптовых продаж 3</div>
  159.                                 </div>
  160.                                 <div class="contacts-card__content">
  161.                                     <div class="contacts-card__item">
  162.                                         <div class="contacts-card__icon"><svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.294 2.275c.217.186.358.41.42.564.035.086.277.653.558 1.314l.165.386c.317.745.644 1.515.742 1.755.17.315.201.81-.116 1.29a.626.626 0 0 1-.011.017c-.036.05-.143.215-.287.434l-.3.461c-.24.364-.517.783-.674.987a5.906 5.906 0 0 0 2.747 2.74 1.72 1.72 0 0 0 .043-.024l.005-.003.076-.05.212-.143a165.778 165.778 0 0 0 .608-.415c.22-.15.445-.303.63-.426.153-.102.31-.204.41-.26a1.243 1.243 0 0 1 1.158-.095c.33.135 3.242 1.367 3.676 1.579a1.242 1.242 0 0 1 .732 1.295 4.375 4.375 0 0 1-1.448 2.728 4.229 4.229 0 0 1-2.89 1.091A11.25 11.25 0 0 1 2.816 8.897v-.002a9.436 9.436 0 0 1-.218-2.549c.054-.99.292-2.12.976-2.966a.593.593 0 0 1 .006-.007c.735-.881 1.592-1.306 2.643-1.44a1.407 1.407 0 0 1 1.071.343zm-.93.9c-.749.099-1.306.38-1.82.995-.441.547-.65 1.364-.697 2.244a8.195 8.195 0 0 0 .184 2.19 10 10 0 0 0 9.719 7.646 2.98 2.98 0 0 0 2.064-.78c.569-.5.936-1.19 1.034-1.942a.58.58 0 0 1-.037-.018c-.295-.15-3.287-1.417-3.61-1.549a.443.443 0 0 1-.01-.004.61.61 0 0 1-.058.035l-.026.015a13.82 13.82 0 0 0-.302.196c-.18.119-.4.268-.619.418l-.257.175-.352.24a8.529 8.529 0 0 1-.377.25 1.58 1.58 0 0 1-.277.13 1.25 1.25 0 0 1-.917-.062l-.004-.002a7.157 7.157 0 0 1-3.338-3.33l-.001-.002a1.25 1.25 0 0 1 .119-1.275c.09-.111.353-.503.637-.935l.265-.405c.154-.236.285-.436.34-.515a.26.26 0 0 0 .027-.054 210.658 210.658 0 0 0-.765-1.807c-.054-.13-.11-.258-.163-.384-.27-.635-.51-1.199-.562-1.325a.413.413 0 0 0-.08-.096.227.227 0 0 0-.067-.041.126.126 0 0 0-.05-.009z"/></svg></div>
  163.                                         <a href="tel:+78124091555">+7 (812) 409 1 555</a> <span>доб. 20</span>
  164.                                     </div>
  165.                                     <div class="contacts-card__item">
  166.                                         <div class="contacts-card__icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 16.5A4.497 4.497 0 0 1 7.5 12c0-2.488 2.012-4.5 4.5-4.5s4.5 2.012 4.5 4.5-2.012 4.5-4.5 4.5zM12 9c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"/><path d="M12.022 21.75c-.65 0-1.3-.063-1.95-.2-2.55-.512-4.75-2-6.188-4.163C.897 12.912 2.122 6.85 6.61 3.875 11.084.9 17.147 2.125 20.122 6.613A9.708 9.708 0 0 1 21.747 12c0 2.813-1.263 4.5-3.375 4.5-2.113 0-3.375-1.688-3.375-4.5V8.25c0-.412.337-.75.75-.75.412 0 .75.338.75.75V12c0 1.363.325 3 1.875 3s1.875-1.637 1.875-3a8.25 8.25 0 0 0-1.375-4.562c-2.513-3.788-7.65-4.825-11.438-2.313-3.787 2.525-4.825 7.65-2.312 11.438a8.201 8.201 0 0 0 5.237 3.524c2.163.438 4.363 0 6.2-1.212a.746.746 0 0 1 1.038.212.746.746 0 0 1-.213 1.038 9.648 9.648 0 0 1-5.362 1.625z"/></svg></div>
  167.                                         <a href="mailto:cosca@coscadecor.com">cosca@coscadecor.com</a>
  168.                                     </div>
  169.                                             </div>
  170.                                         </div>
  171.                             <div class="contacts-card">
  172.                                 <div class="contacts-card__header">
  173.                                     <div class="contacts-card__title">Реквизиты</div>
  174.                                 </div>
  175.                                 <div class="contacts-card__content">
  176.                                     <div class="contacts-card__item">
  177.                                         <p>ИП Вавилова Галина Владимировна</p>
  178.                                     </div>
  179.                                     <div class="contacts-card__item">
  180.                                         <p>ИНН 470300285480</p>
  181.                                     </div>
  182.                                     <div class="contacts-card__item">
  183.                                         <p>ОГРН 304470335000088</p>
  184.                                     </div>
  185.                                 </div>
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                 </div>
  190.                 <div class="contacts-address">
  191.                     <div class="contacts-address__map">
  192.                         <div class="map">
  193.                             <iframe src="https://yandex.ru/map-widget/v1/?ll=30.497391%2C59.824804&mode=search&oid=54508260393&ol=biz&z=15.15&balloon_autopan=false" width="560" height="400"></iframe>
  194.                         </div>
  195.                     </div>
  196.                     <div class="contacts-address__info">
  197.                         <div class="contacts-address__title">
  198.                             <h3>Адрес</h3>
  199.                             <p>Здесь вы сможете ознакомиться с широким ассортиментом отделочных материалов и декора, а также получить консультацию от наших специалистов.</p>
  200.                         </div>
  201.                          <div class="tabs-wrapper">
  202.                             <ul class="tabs__list">
  203.                                 <li class="tabs__item tabs__item-addresses active" data-tab="office-main">
  204.                                     <a class="tabs__link ">Офис компании</a>
  205.                                 </li>
  206.                                 <li class="tabs__item tabs__item-addresses" data-tab="warehouse-main">
  207.                                     <a class="tabs__link">Склад самовывоза</a>
  208.                                 </li>
  210.                             </ul>
  211.                         </div>
  212.                         <div class="tab-content">
  213.                             <div id="office-main" class="contacts-address__address-item-block active">
  214.                                 <div class="tab-content__item tab-content__item-addresses active" data-coords="30.497391,59.824804">
  215.                                     <div class="contacts-address__address-item">
  216.                                             <h3>Офис компании</h3>
  217.                                             <p><span>Адрес:</span> проезд 3-й Рыбацкий, д. 3 лит. Б</p>
  218.                                             <p><span>Режим работы:</span> пн-пт - с 10:00 до 20:00, сб-вс - выходной</p>
  219.                                             <button class="btn btn--primary">Cхема проезда</button>
  220.                                     </div>
  221.                                 </div>
  223.                                 <div class="tab-content__item tab-content__item-addresses" data-coords="30.439506,59.908882">
  224.                                     <div class="contacts-address__address-item">
  225.                                             <h3>Офис компании</h3>
  226.                                             <p><span>Адрес:</span> Полюстровский проспект, 59</p>
  227.                                             <p><span>Режим работы:</span> пн-пт - с 9:00 до 18:00, сб-вс - выходной</p>
  228.                                     </div>
  229.                                 </div>
  230.                             </div>
  231.                             <div id="warehouse-main" class="contacts-address__address-item-block">
  232.                                 <div class="tab-content__item tab-content__item-addresses active" data-coords="30.439506,59.908882">
  233.                                     <div class="contacts-address__address-item">
  234.                                             <h3>Офис компании</h3>
  235.                                             <p><span>Адрес:</span> Полюстровский проспект, 59</p>
  236.                                             <p><span>Режим работы:</span> пн-пт - с 9:00 до 18:00, сб-вс - выходной</p>
  237.                                     </div>
  238.                                 </div>
  239.                                 <div class="tab-content__item tab-content__item-addresses" data-coords="30.497391,59.824804">
  240.                                     <div class="contacts-address__address-item">
  241.                                         <h3>Офис компании</h3>
  242.                                             <p><span>Адрес:</span> проезд 3-й Рыбацкий, д. 3 лит. Б</p>
  243.                                             <p><span>Режим работы:</span> пн-пт - с 10:00 до 20:00, сб-вс - выходной</p>
  244.                                             <button class="btn btn--primary">Cхема проезда</button>
  245.                                     </div>
  246.                                 </div>
  247.                             </div>
  248.                         </div>
  249.                         
  250.                     </div>
  251.                 </div>
  252.             </div>
  253.         </div>
  254.     </main>
  255. {% endblock %}
  257. {% block scripts %}
  258. <script>
  259. document.addEventListener('DOMContentLoaded', function() {
  260.     const map = document.querySelector('.map iframe');
  261.     
  262.     // Переключение городов
  263.     const cityTabs = document.querySelectorAll('.tabs__link-city');
  264.     const cityContents = document.querySelectorAll('.tab-content__item[id]');
  265.     
  266.     cityTabs.forEach(tab => {
  267.         tab.addEventListener('click', function(e) {
  268.             e.preventDefault();
  269.             const targetId = this.getAttribute('data-tab');
  270.             
  271.             cityTabs.forEach(t => t.classList.remove('active'));
  272.             this.classList.add('active');
  273.             
  274.             cityContents.forEach(content => {
  275.                 if (content.id === targetId) {
  276.                     content.classList.add('active');
  277.                 } else {
  278.                     content.classList.remove('active');
  279.                 }
  280.             });
  281.         });
  282.     });
  284.     // Переключение адресов
  285.     const addressTabs = document.querySelectorAll('.tabs__item-addresses');
  286.     const addressItems = document.querySelectorAll('.tab-content__item-addresses');
  287.     
  288.     function updateMap(coords) {
  289.         const [longitude, latitude] = coords.split(',');
  290.         map.src = `https://yandex.ru/map-widget/v1/?ll=${longitude}%2C${latitude}&mode=search&z=15.15&balloon_autopan=false`;
  291.     }
  292.     
  293.     addressTabs.forEach(tab => {
  294.         tab.addEventListener('click', function() {
  295.             const targetId = this.getAttribute('data-tab');
  296.             
  297.             addressTabs.forEach(t => t.classList.remove('active'));
  298.             this.classList.add('active');
  299.             
  300.             document.querySelectorAll('.contacts-address__address-item-block').forEach(block => {
  301.                 if (block.id === targetId) {
  302.                     block.style.display = 'block';
  303.                     const activeAddressItem = block.querySelector('.tab-content__item-addresses.active');
  304.                     if (activeAddressItem) {
  305.                         updateMap(activeAddressItem.dataset.coords);
  306.                     }
  307.                 } else {
  308.                     block.style.display = 'none';
  309.                 }
  310.             });
  311.         });
  312.     });
  314.     addressItems.forEach(item => {
  315.         item.addEventListener('click', function() {
  316.             const parentBlock = this.closest('.contacts-address__address-item-block');
  317.             parentBlock.querySelectorAll('.tab-content__item-addresses').forEach(address => {
  318.                 address.classList.remove('active');
  319.             });
  320.             this.classList.add('active');
  321.             updateMap(this.dataset.coords);
  322.         });
  323.     });
  324. });
  325. </script>
  326. {% endblock %}