templates/shared/ui/modal/modal_web.html.twig line 1

Open in your IDE?
  1. <div id="modal_{% if id is defined %}{{ id }}{% endif %}" tabindex="-1" class="modal-window max-w-[680px] fixed hidden top-0 left-0 right-0 z-50 show:opacity-100 w-full py-4 px-[32px] h-[100vh] justify-center items-center overflow-x-hidden mx-auto max-h-full flex">
  2.     <div class="relative w-full max-h-full overflow-y-auto">
  3.         <!-- Modal content -->
  4.         <div class="relative bg-white rounded-lg shadow px-[12px]">
  5.             <!-- Modal header -->
  6.             <div class="flex items-center justify-between p-4 md:p-5 rounded-t">
  7.                 <button type="button" class="modal-close text-gray-400 bg-transparent hover:bg-gray-50 hover:text-gray-900 rounded-full text-sm w-8 h-8 ms-auto inline-flex justify-center items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-hide="extralarge-modal">
  8.                     <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
  9.                         <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
  10.                     </svg>
  11.                     <span class="sr-only">Close modal</span>
  12.                 </button>
  13.             </div>
  14.             <!-- Modal body -->
  15.             {% if image is defined and image is not empty %}
  16.                 <div class="w-[100px] h-[100px] rounded-full bg-[#cd2b300d] {% if companyStyles.secondTitleTextAlign == 'center' %}mx-auto{% endif %} p-[16px] mb-[16px]">
  17.                     <div class="w-[68px] h-[68px] mx-auto">
  18.                         {{ sonata_media(image, 'reference') }}
  19.                     </div>
  20.                 </div>
  21.             {% elseif imageLink is defined and imageLink is not empty %}
  22.                 <div class="w-[100px] h-[100px] rounded-full bg-[#cd2b300d] {% if companyStyles.secondTitleTextAlign == 'center' %}mx-auto{% endif %} p-[16px] mb-[16px]">
  23.                     <div class="w-[68px] h-[68px] mx-auto">
  24.                         <img src="{{ imageLink }}" alt="{% if name is defined %}{{ name }}{% endif %}">
  25.                     </div>
  26.                 </div>
  27.             {% endif %}
  28.             <div class="text-[24px] font-semibold text-[#1B2028] mb-[24px]"
  29.                  style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::BLOCK_TITLE_STYLES')) }}"
  30.             >{% if name is defined %}
  31.                     {{ name }}
  32.                 {% endif %}</div>
  34. {#            TODO  fix data from admin #}
  35.             <!-- rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mb-[12px] w-[16px] min-w-[16px] h-[16px] m-0 inline text-[18px] text-[#1B2028] text-[14px] text-[#909299] font-semibold leading-[18px] font-semibold mb-[24px] flex gap-[24px] flex-col flex gap-[16px] w-[34px] min-w-[34px] h-[34px] text-[14px] text-[#1B2028] leading-[18px] -->
  36. {#            <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mb-[12px]">#}
  37. {#                <div class="text-[18px] text-[#1B2028] font-semibold mb-[24px]">{% trans from 'tarif_choice' %}Які особливості eSim від Vodafone{% endtrans %}</div>#}
  38. {#                <div class="flex gap-[24px] flex-col">#}
  39. {#                    <div class="flex gap-[16px]">#}
  40. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  41. {#                            <use href="{{ asset('build/sprite.svg#phone_icon') }}"></use>#}
  42. {#                        </svg>#}
  43. {#                        <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Обирай номер з запропонованих{% endtrans %}</div>#}
  44. {#                    </div>#}
  45. {#                    <div class="flex gap-[16px]">#}
  46. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  47. {#                            <use href="{{ asset('build/sprite.svg#cash_icon') }}"></use>#}
  48. {#                        </svg>#}
  49. {#                        <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Перша абонплата включені у вартість eSim{% endtrans %}</div>#}
  50. {#                    </div>#}
  51. {#                    <div class="flex gap-[16px]">#}
  52. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  53. {#                            <use href="{{ asset('build/sprite.svg#number_icon') }}"></use>#}
  54. {#                        </svg>#}
  55. {#                        <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}eSim від Vodafone можна встановити до 5 разів{% endtrans %}</div>#}
  56. {#                    </div>#}
  57. {#                </div>#}
  59. {#            </div>#}
  60. {#            <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mb-[12px]">#}
  61. {#                <div class="text-[18px] text-[#1B2028] font-semibold mb-[24px]">{% trans from 'tarif_choice' %}Деталі тарифу{% endtrans %}</div>#}
  62. {#                <div class="flex gap-[24px] flex-col">#}
  63. {#                    <div class="flex gap-[16px]">#}
  64. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  65. {#                            <use href="{{ asset('build/sprite.svg#wifi_icon') }}"></use>#}
  66. {#                        </svg>#}
  67. {#                        <div class="flex flex-col">#}
  68. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Інтернет{% endtrans %}</div>#}
  69. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}25 ГБ {% endtrans %}</div>#}
  70. {#                        </div>#}
  71. {#                    </div>#}
  72. {#                    <div class="flex gap-[16px]">#}
  73. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  74. {#                            <use href="{{ asset('build/sprite.svg#phone_icon') }}"></use>#}
  75. {#                        </svg>#}
  76. {#                        <div class="flex flex-col">#}
  77. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Дзвінки по Україні{% endtrans %}</div>#}
  78. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}1200 хв{% endtrans %}</div>#}
  79. {#                        </div>#}
  80. {#                    </div>#}
  81. {#                    <div class="flex gap-[16px]">#}
  82. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  83. {#                            <use href="{{ asset('build/sprite.svg#endless_icon') }}"></use>#}
  84. {#                        </svg>#}
  85. {#                        <div class="flex flex-col">#}
  86. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Дзвінки на Vodafone{% endtrans %}</div>#}
  87. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Безліміт{% endtrans %}</div>#}
  88. {#                        </div>#}
  89. {#                    </div>#}
  90. {#                    <div class="flex gap-[16px]">#}
  91. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  92. {#                            <use href="{{ asset('build/sprite.svg#fb_icon') }}"></use>#}
  93. {#                        </svg>#}
  94. {#                        <div class="flex flex-col">#}
  95. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Інтернет для соц мереж{% endtrans %}</div>#}
  96. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Безліміт{% endtrans %}</div>#}
  97. {#                        </div>#}
  98. {#                    </div>#}
  99. {#                    <div class="flex gap-[16px]">#}
  100. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  101. {#                            <use href="{{ asset('build/sprite.svg#sms_icon') }}"></use>#}
  102. {#                        </svg>#}
  103. {#                        <div class="flex flex-col">#}
  104. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}на мобільні мережі України{% endtrans %}</div>#}
  105. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}50 SMS{% endtrans %}</div>#}
  106. {#                        </div>#}
  107. {#                    </div>#}
  109. {#                </div>#}
  111. {#            </div>#}
  112. {#            <div class="rounded-[16px] p-[18px] border border-[#E2E2E9] bg-[#F7F7FA] mb-[12px]">#}
  113. {#                <div class="text-[18px] text-[#1B2028] font-semibold mb-[24px]">{% trans from 'tarif_choice' %}Вартість послуг{% endtrans %}</div>#}
  114. {#                <div class="flex gap-[24px] flex-col">#}
  115. {#                    <div class="flex gap-[16px]">#}
  116. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  117. {#                            <use href="{{ asset('build/sprite.svg#cash_icon') }}"></use>#}
  118. {#                        </svg>#}
  119. {#                        <div class="flex flex-col">#}
  120. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Підключення та перші 4 тижні{% endtrans %}</div>#}
  121. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}200 ₴{% endtrans %}</div>#}
  122. {#                        </div>#}
  123. {#                    </div>#}
  124. {#                    <div class="flex gap-[16px]">#}
  125. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  126. {#                            <use href="{{ asset('build/sprite.svg#check_icon') }}"></use>#}
  127. {#                        </svg>#}
  128. {#                        <div class="flex flex-col">#}
  129. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Пакет послуг на 4 тижні уже включений{% endtrans %}</div>#}
  130. {#                        </div>#}
  131. {#                    </div>#}
  132. {#                    <div class="flex gap-[16px]">#}
  133. {#                        <svg class="w-[34px] min-w-[34px] h-[34px]">#}
  134. {#                            <use href="{{ asset('build/sprite.svg#cash_icon') }}"></use>#}
  135. {#                        </svg>#}
  136. {#                        <div class="flex flex-col">#}
  137. {#                            <div class="text-[14px] text-[#909299] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}Абонплата на наступні 4 тижні{% endtrans %}</div>#}
  138. {#                            <div class="text-[14px] text-[#1B2028] font-semibold leading-[18px]">{% trans from 'tarif_choice' %}230 ₴{% endtrans %}</div>#}
  139. {#                        </div>#}
  140. {#                    </div>#}
  142. {#                </div>#}
  144. {#            </div>#}
  145.             <article class="max-h-[284px] overflow-y-auto prose mb-[10px] pr-[8px]">
  146.                 {% if description is defined %}
  147.                     {{ description | raw }}
  148.                 {% endif %}
  149.             </article>
  150.             <!-- Modal footer -->
  151.             {% if showButton is defined and showButton == true %}
  152.                 <a href="{{ path('tariff_selected_page',{tariff:id}) }}">
  153.                     <button style="{{ inlineStyles(app.request.get('companyInner'), constant('App\\Constants\\SettingConstants::FILLED_BUTTON_STYLES')) }}" class="drop-shadow-[0_7px_5px_rgba(0,0,0,0.25)] hover:drop-shadow-none disabled:drop-shadow-none transition ease-in-out duration-150 hover:!opacity-90 sticky bottom-[28px] mb-[28px] disabled:bg-[#E2E2E9] disabled:text-[#909299] w-full h-[48px] hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-semibold text-[16px] px-5 py-2.5 focus:outline-none">
  154.                         {% trans from 'modal' %}Обрати{% endtrans %}
  155.                     </button>
  156.                 </a>
  157.             {% endif %}
  158.         </div>
  159.     </div>
  160. </div>