templates/contact/contact.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Контакты – Николай Макаров{% endblock %}
  5. {% block head %}
  6.   <meta name="description" content="Контактная информация художника Николая Макарова. Свяжитесь в Telegram, по телефону или электронной почте, чтобы задать вопросы о работах и заказах.">
  7.   <meta property="og:title" content="Контакты – Николай Макаров">
  8.   <meta property="og:description" content="Контактная информация художника Николая Макарова. Свяжитесь с нами для получения информации о произведениях искусства и заказах.">
  9.   <meta property="og:type" content="website">
  10.   <meta property="og:image" content="{{ asset('photos/contact-image.jpg') }}">
  11.   {{ parent() }}
  12. {% endblock %}
  14. {% block body %}
  15.   <div class="flex flex-col items-center">
  16.     <h1 class="font-serif text-4xl my-6 font-semibold">Контакты</h1>
  17.     
  18.     <div class="lg:flex w-full contact_container">
  19.       <div id="mapContainer" class="lg:w-1/2">
  20.         {% include 'contact/map.html.twig' %}
  21.       </div>
  23.       <div id="contactInfo" class="lg:w-1/2 mb-2.5">
  24.         <div class="text-left max-w-xl mt-8">
  25.           <p class="my-4">Мы работаем над созданием уникального и вдохновляющего места, где вы сможете насладиться множеством произведений искусства.</p>
  26.           <p class="my-4">На данный момент галерея недоступна для посещения. Рекомендуем посетить музей Эрмитаж для знакомства с искусством.</p>
  27.         </div>
  29.         <p class="my-4 text-xl font-bold">Для связи со мной:</p>
  31.         <div class="flex flex-col gap-3 text-lg">
  33.           <div>
  34.             <span class="font-medium">Telegram:</span>
  35.             <a href="https://t.me/makarov_nikola"
  36.                target="_blank"
  37.                rel="noopener"
  38.                class="text-blue-700 underline hover:text-blue-900"
  39.                aria-label="Написать в Telegram @makarov_nikola">
  40.               @makarov_nikola
  41.             </a>
  42.             <p class="text-sm text-gray-600 mt-0.5">
  43.               Самый быстрый способ связаться — отвечаю обычно сразу.
  44.             </p>
  45.           </div>
  47.           <div>
  48.             <span class="font-medium">Телефон:</span>
  49.             <a href="tel:+79811575441"
  50.                class="text-blue-700 underline hover:text-blue-900"
  51.                aria-label="Позвонить по номеру +7 981 157 54 41">
  52.               +7 981 157 54 41
  53.             </a>
  54.           </div>
  56.           <div>
  57.             <span class="font-medium">Email:</span>
  58.             <a href="mailto:79052288389@yandex.ru"
  59.                class="text-blue-700 underline hover:text-blue-900"
  60.                aria-label="Отправить письмо на 79052288389@yandex.ru">
  61.               79052288389@yandex.ru
  62.             </a>
  63.           </div>
  65.         </div>
  67.         {# 
  68.           СТАРАЯ КНОПКА И МОДАЛЬНОЕ ОКНО С ФОРМОЙ
  69.           Полностью сохранены, но отключены.
  71.         <!-- Modal toggle -->
  72.         <button data-modal-target="authentication-modal" data-modal-toggle="authentication-modal" class="button_contact block text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 mt-4" type="button" aria-label="Написать сообщение">Написать мне</button>
  73.         
  74.         <!-- Main modal -->
  75.         <div id="authentication-modal" tabindex="-1" aria-hidden="true" class="fixed top-0 left-0 right-0 z-50 hidden w-full p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-[calc(100%-1rem)] max-h-full animate-fade-in">
  76.           <div class="relative w-full max-w-md max-h-full">
  77.             <!-- Modal content -->
  78.             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
  79.               <button type="button" class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white" data-modal-hide="authentication-modal" aria-label="Закрыть модальное окно">
  80.                 <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  81.                   <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
  82.                 </svg>
  83.               </button>
  84.               <div class="px-6 py-6 lg:px-8">
  85.                 <h3 class="mb-4 text-xl font-medium text-gray-900 dark:text-white">Напишите мне сообщение</h3>
  86.                 <form id="contactForm" class="space-y-6" action="{{ path('contact') }}" method="POST">
  87.                   <div>
  88.                     <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Ваш номер телефона</label>
  89.                     <input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" placeholder="Введите номер телефона" required aria-label="Введите номер телефона">
  90.                   </div>
  91.                   <div>
  92.                     <label for="text" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Текст сообщения</label>
  93.                     <textarea name="text" id="text" placeholder="Введите сообщение" class="whitespace-normal align-top bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white" required maxlength="200" style="height: 80px; text-align: left; vertical-align: top; padding-top: 20px; resize: none;" aria-label="Введите текст сообщения"></textarea>
  94.                     <span id="warningMessage" class="text-red-600 text-sm" style="display: none;">
  95.                       <span id="characterCount">200</span> символов осталось
  96.                     </span>
  97.                   </div>
  98.                   <button type="submit" class="w-full text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Отправить</button>
  99.                 </form>
  100.               </div>
  101.             </div>
  102.           </div>
  103.         </div>
  104.         #}
  106.       </div>
  107.     </div>
  108.   </div>
  110.   {% block javascript %}
  111.     {# Старые скрипты для маски телефона и reCAPTCHA — отключены, но сохранены.
  112.     <script src="https://cdnjs.cloudflare.com/ajax/libs/imask/7.1.3/imask.js"></script>
  113.     <script src="https://www.google.com/recaptcha/enterprise.js?render=6LcUV0UnAAAAAAeRtvxAL7YDDqeuPrTi07hlKMrl"></script>
  114.     #}
  115.     
  116.     <script>
  117.       document.addEventListener('DOMContentLoaded', function () {
  118.         const mapContainer = document.getElementById('mapContainer');
  119.         const toggleMapButton = document.getElementById('toggleMap');
  120.         
  121.         if (toggleMapButton && mapContainer) {
  122.           toggleMapButton.addEventListener('click', function () {
  123.             mapContainer.classList.toggle('hidden');
  124.             toggleMapButton.textContent = mapContainer.classList.contains('hidden') ? 'Открыть карту' : 'Закрыть карту';
  125.           });
  126.         }
  127.       });
  128.     </script>
  129.   {% endblock %}
  130. {% endblock %}