templates/includes/footer.html.twig line 1

Open in your IDE?
  1. <!-- Footer container -->
  2. <footer class="bg-neutral-200 text-center text-white dark:bg-neutral-600">
  3.   <div class="container pt-9 mx-auto">
  4.     <div class="mb-9 flex justify-center">
  5.       <!-- Telegram Link with aria-label for accessibility -->
  6.       <a href="https://t.me/makarov_nikola" class="mr-9 text-neutral-800 dark:text-neutral-200" aria-label="Перейти в Telegram канал художника Николая Макарова">
  7.         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hover:fill-cyan-700" fill="currentColor" viewBox="0 0 24 24">
  8.           <path stroke="null" id="svg_1" d="m23.91177,3.782323l-3.615728,17.051686c-0.272784,1.20346 -0.984163,1.502987 -1.995069,0.936024l-5.509171,-4.05967l-2.658309,2.556683c-0.294179,0.294179 -0.54022,0.54022 -1.107183,0.54022l0.395804,-5.610796l10.210686,-9.226524c0.443943,-0.395804 -0.096277,-0.615102 -0.689984,-0.219297l-12.622954,7.948182l-5.434289,-1.70089c-1.182065,-0.369061 -1.20346,-1.182065 0.246041,-1.749028l21.255771,-8.188874c0.984163,-0.369061 1.845305,0.219297 1.524382,1.722284z"/>
  9.         </svg>
  10.       </a>
  12.       <!-- VK Link with aria-label for accessibility -->
  13.       <a href="https://vk.com/id62813594" class="mr-9 text-neutral-800 dark:text-neutral-200" aria-label="Перейти на страницу ВКонтакте художника Николая Макарова">
  14.         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hover:fill-cyan-700" fill="currentColor" viewBox="0 0 24 24">
  15.           <path stroke="null" id="svg_1" d="m2.032074,1.77942c-1.67432,1.674315 -1.67432,4.36942 -1.67432,9.759079l0,0.952783c0,5.389659 0,8.084781 1.67432,9.759063c1.674315,1.674336 4.36942,1.674336 9.759079,1.674336l0.952783,0c5.389659,0 8.084781,0 9.759063,-1.674336c1.674336,-1.674283 1.674336,-4.369405 1.674336,-9.759063l0,-0.952783c0,-5.389659 0,-8.084765 -1.674336,-9.759079c-1.674283,-1.67432 -4.369405,-1.67432 -9.759063,-1.67432l-0.952783,0c-5.389659,0 -8.084765,0 -9.759079,1.67432zm2.345235,5.570821l2.71942,0c0.089323,4.545552 2.094103,6.470951 3.682093,6.867962l0,-6.867962l2.560605,0l0,3.920288c1.568105,-0.168704 3.215644,-1.955173 3.771416,-3.920288l2.560605,0c-0.209485,1.019138 -0.627019,1.984044 -1.226443,2.83453c-0.599371,0.850434 -1.367765,1.568052 -2.257171,2.108033c0.993032,0.49298 1.870156,1.191139 2.573312,2.048271c0.703156,0.857186 1.216394,1.853833 1.505791,2.924066l-2.818633,0c-0.259729,-0.929655 -0.788279,-1.761852 -1.519296,-2.39222c-0.730963,-0.630315 -1.631854,-1.030729 -2.589582,-1.150943l0,3.543163l-0.307687,0c-5.428844,0 -8.525406,-3.72181 -8.65443,-9.914901z"/>
  16.         </svg>
  17.       </a>
  19.       <!-- Instagram Link Placeholder with Tooltip -->
  20.       <a href="#!" class="mr-9 text-neutral-800 dark:text-neutral-200" title="В разработке" aria-label="Instagram в разработке" onclick="showTooltip(this)">
  21.         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 hover:fill-cyan-700" fill="currentColor" viewBox="0 0 24 24">
  22.           <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/>
  23.         </svg>
  24.         <span class="tooltip">В разработке</span>
  25.       </a>
  26.     </div>
  27.   </div>
  29.   <!-- Copyright Section -->
  30.   <div class="bg-neutral-300 p-4 text-center text-neutral-700 dark:bg-neutral-700 dark:text-neutral-200">
  31.     © {{ "now"|date("Y") }} Copyright:  
  32.     <a href="https://vladimirmakarof.github.io/makarov-cv/" class="text-blue-500 hover:underline" target="_blank" aria-label="Открыть портфолио Владимира Макарова">Макаров Владимир</a>
  33.   </div>
  34. </footer>
  36. <!-- Tooltip Styles -->
  37. <style>
  38.   .tooltip {
  39.     position: absolute;
  40.     background-color: rgba(0, 0, 0, 0.8);
  41.     color: #fff;
  42.     padding: 8px;
  43.     border-radius: 4px;
  44.     font-size: 14px;
  45.     white-space: nowrap;
  46.     opacity: 0;
  47.     visibility: hidden;
  48.     transition: opacity 0.3s ease, visibility 0.3s ease;
  49.   }
  50.   .tooltip.active {
  51.     opacity: 1;
  52.     visibility: visible;
  53.   }
  54. </style>
  56. <!-- Tooltip Script -->
  57. <script>
  58.   function showTooltip(element) {
  59.     const tooltip = element.querySelector('.tooltip');
  60.     tooltip.classList.toggle('active');
  61.   }
  62. </script>