templates/website/page/index.html.twig line 1

  1. {% extends '@web/base.html.twig' %}
  2. {% set metaParams = {
  3.     'title': "The Infinite Moment Gazette",
  4.     'description': "One capture = Endless memory = Positive Emotion = Infinite Moment",
  5.     'keywords': "photo, photo booth, gazette, memory, picture, foto, event, photo zone",
  6.     'ogImage': "/images/infinite-moment.png"
  7. } %}
  8. {% block meta %}
  9.     {% include '@web/parts/meta.html.twig' with metaParams %}
  10. {% endblock meta %}
  11. {% block title %}The Infinite Moment Gazette{% endblock title %}
  12. {% block body %}
  13.     {% set locale = app.request.locale %}
  14.     {% set cisLocales = ['ru', 'ua', 'ka'] %}
  15.     {% for label, messages in app.flashes %}
  16.         {% for message in messages %}
  17.             <div id="christmasSuccessModal" class="christmas-modal">
  18.                 <div class="christmas-modal-content">
  19.                     <h2>🎅 {{ 'modal.success_title'|trans }}</h2>
  20.                     <p>{{ 'modal.success_message' | trans }}</p>
  21.                     <button id="closeChristmasModal" class="main-button">✨ {{ 'modal.close_button'|trans }}</button>
  22.                 </div>
  23.             </div>
  24.         {% endfor %}
  25.     {% endfor %}
  26.     <div id="cropModal" class="crop-modal">
  27.         <div class="crop-modal-content">
  28.             <h3>{{ 'Adjust your image'|trans }}</h3>
  29.             <div class="crop-info">
  30.                 <p>Drag to move image • Scroll to zoom • Crop area: 4:5 ratio (500×625px)</p>
  31.             </div>
  33.             <div class="crop-container">
  34.                 <img id="cropImage" style="display:block; max-width:100%; max-height:100%;">
  35.             </div>
  37.             <div class="crop-actions">
  38.                 <button type="button" id="cropCancel">{{ 'Cancel'|trans }}</button>
  39.                 <button type="button" id="cropConfirm" class="main-button">{{ 'Use this image'|trans }}</button>
  40.             </div>
  41.         </div>
  42.     </div>
  43.     <section class="section-home">
  44.         <div class="custom-container">
  45. {#            <section class="section-services wrapper-home-santa-section">#}
  46. {#                <div class="custom-container">#}
  47. {#                    <div class="wrapper-navigation">#}
  48. {#                        <h1>🎅 {{ 'Message to Santa'|trans }} 🎄</h1>#}
  49. {#                        <div class="music-control">#}
  50. {#                            <button id="musicToggle" class="main-button">⏸️ Pause Music</button>#}
  51. {#                        </div>#}
  52. {#                        <ul>#}
  53. {#                            <li><a href="{{ path('page_index') }}">{{ 'Home'|trans }}</a></li>#}
  54. {#                            <li><span>{{ 'Message to Santa'|trans }}</span></li>#}
  55. {#                        </ul>#}
  56. {#                    </div>#}
  58. {#                    <ul class="wrapper-santa-languages">#}
  60. {#                        {% set currentLocale = app.request.get('_locale') %}#}
  62. {#                        <li class="{{ currentLocale == 'en' ? 'active' : '' }}">#}
  63. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  64. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'en'})) }}">#}
  65. {#                                <img src="{{ asset('images/flag/en.png') }}" alt="">#}
  66. {#                            </a>#}
  67. {#                        </li>#}
  69. {#                        <li class="{{ currentLocale == 'hy' ? 'active' : '' }}">#}
  70. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  71. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'hy'})) }}">#}
  72. {#                                <img src="{{ asset('images/flag/am.jpg') }}" alt="">#}
  73. {#                            </a>#}
  74. {#                        </li>#}
  76. {#                        <li class="{{ currentLocale == 'ru' ? 'active' : '' }}">#}
  77. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  78. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'ru'})) }}">#}
  79. {#                                <img src="{{ asset('images/flag/ru.png') }}" alt="">#}
  80. {#                            </a>#}
  81. {#                        </li>#}
  83. {#                        <li class="{{ currentLocale == 'ka' ? 'active' : '' }}">#}
  84. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  85. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'ka'})) }}">#}
  86. {#                                <img src="{{ asset('images/flag/ge.jpg') }}" alt="">#}
  87. {#                            </a>#}
  88. {#                        </li>#}
  90. {#                        <li class="{{ currentLocale == 'de' ? 'active' : '' }}">#}
  91. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  92. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'de'})) }}">#}
  93. {#                                <img src="{{ asset('images/flag/de.png') }}" alt="">#}
  94. {#                            </a>#}
  95. {#                        </li>#}
  97. {#                        <li class="{{ currentLocale == 'es' ? 'active' : '' }}">#}
  98. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  99. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'es'})) }}">#}
  100. {#                                <img src="{{ asset('images/flag/es.png') }}" alt="">#}
  101. {#                            </a>#}
  102. {#                        </li>#}
  104. {#                        <li class="{{ currentLocale == 'fr' ? 'active' : '' }}">#}
  105. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  106. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'fr'})) }}">#}
  107. {#                                <img src="{{ asset('images/flag/fr.png') }}" alt="">#}
  108. {#                            </a>#}
  109. {#                        </li>#}
  111. {#                        <li class="{{ currentLocale == 'ua' ? 'active' : '' }}">#}
  112. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  113. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'ua'})) }}">#}
  114. {#                                <img src="{{ asset('images/flag/uk.png') }}" alt="">#}
  115. {#                            </a>#}
  116. {#                        </li>#}
  118. {#                        <li class="{{ currentLocale == 'it' ? 'active' : '' }}">#}
  119. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  120. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'it'})) }}">#}
  121. {#                                <img src="{{ asset('images/flag/it.png') }}" alt="">#}
  122. {#                            </a>#}
  123. {#                        </li>#}
  125. {#                        <li class="{{ currentLocale == 'el' ? 'active' : '' }}">#}
  126. {#                            <a href="{{ path(app.request.attributes.get('_route'),#}
  127. {#                                app.request.attributes.get('_route_params')|merge({'_locale': 'el'})) }}">#}
  128. {#                                <img src="{{ asset('images/flag/gr.png') }}" alt="">#}
  129. {#                            </a>#}
  130. {#                        </li>#}
  132. {#                    </ul>#}
  134. {#                    <div class="wrapper-items">#}
  135. {#                        <div class="wrapper-video">#}
  136. {#                            {% set videoUrls = {#}
  137. {#                                'en': {'src': 'video_template/en.mp4'},#}
  138. {#                                'ru': {'src': 'video_template/ru.mp4'},#}
  139. {#                                'hy': {'src': 'video_template/hy.mp4'},#}
  140. {#                                'es': {'src': 'video_template/es.mp4'},#}
  141. {#                                'it': {'src': 'video_template/it.mp4'},#}
  142. {#                                'fr': {'src': 'video_template/fr.mp4'},#}
  143. {#                                'el': {'src': 'video_template/el.mp4'},#}
  144. {#                                'ua': {'src': 'video_template/ua.mp4'},#}
  145. {#                                'ka': {'src': 'video_template/ka.mp4'},#}
  146. {#                                'de': {'src': 'video_template/de.mp4'}#}
  147. {#                            } %}#}
  149. {#                            #}{# If locale not found, default to English #}
  150. {#                            {% set videoUrl = videoUrls[app.request.locale] ?? videoUrls['en'] %}#}
  152. {#                            <video width="455" controls poster="{{ asset('images/santa-poster.jpg') }}">#}
  153. {#                                <source src="{{ asset(videoUrl.src) }}" type="video/mp4">#}
  154. {#                                {{ 'Your browser does not support the video tag.'|trans }}#}
  155. {#                            </video>#}
  156. {#                            <div class="santa-pricing-info">#}
  158. {#                                <p class="pricing-title">#}
  159. {#                                    🎅 {{ 'Santa Video Options'|trans }}#}
  160. {#                                </p>#}
  162. {#                                <ul class="pricing-list">#}
  163. {#                                    <li>#}
  164. {#                                        <strong>🎄 {{ 'Default Santa greeting'|trans }}</strong><br>#}
  166. {#                                        {% if locale == 'hy' %}#}
  167. {#                                            2000 ֏#}
  168. {#                                        {% elseif locale in cisLocales %}#}
  169. {#                                            10 $#}
  170. {#                                        {% else %}#}
  171. {#                                            10 €#}
  172. {#                                        {% endif %}#}
  173. {#                                    </li>#}
  175. {#                                    <li>#}
  176. {#                                        <strong>🎥 {{ 'Personalized message'|trans }}</strong><br>#}
  178. {#                                        {% if locale == 'hy' %}#}
  179. {#                                            3000 ֏#}
  180. {#                                        {% elseif locale in cisLocales %}#}
  181. {#                                            15 $#}
  182. {#                                        {% else %}#}
  183. {#                                            15 €#}
  184. {#                                        {% endif %}#}
  185. {#                                    </li>#}
  187. {#                                </ul>#}
  189. {#                                <p class="pricing-note">#}
  190. {#                                    {{ 'If you write a personal message, Santa will read it in the video.'|trans }}#}
  191. {#                                </p>#}
  193. {#                            </div>#}
  194. {#                        </div>#}
  196. {#                        <div class="wrapper-form wrapper-santa-form section-services wrapper-home-santa">#}
  197. {#                            <form  id="santaForm" action="{{ path('page_santa') }}" method="post" enctype="multipart/form-data">#}
  198. {#                                <div class="wrapper-input">#}
  199. {#                                    <input required type="text"#}
  200. {#                                           placeholder="{{ 'form.from_name_placeholder'|trans }}*"#}
  201. {#                                           name="fromName">#}
  203. {#                                    <input required type="text"#}
  204. {#                                           placeholder="{{ 'form.recipient_name_placeholder'|trans }}*"#}
  205. {#                                           name="name">#}
  207. {#                                    <input type="email"#}
  208. {#                                           placeholder="{{ 'form.from_email_placeholder'|trans }}"#}
  209. {#                                           name="fromEmail">#}
  211. {#                                    <input required type="email"#}
  212. {#                                           placeholder="{{ 'form.recipient_email_placeholder'|trans }}*"#}
  213. {#                                           name="email">#}
  214. {#                                </div>#}
  216. {#                                <div class="wrapper-input">#}
  217. {#                                    <input required type="text"#}
  218. {#                                           placeholder="{{ 'form.gift_placeholder'|trans }}*"#}
  219. {#                                           name="gift">#}
  221. {#                                    <input type="tel" required#}
  222. {#                                           placeholder="{{ 'form.phone_placeholder'|trans }}*"#}
  223. {#                                           name="phone">#}
  224. {#                                </div>#}
  226. {#                                <div class="wrapper-input">#}
  227. {#            <textarea#}
  228. {#                    placeholder="{{ 'form.comment_placeholder'|trans }}"#}
  229. {#                    name="comment"></textarea>#}
  230. {#                                </div>#}
  232. {#                                <div class="wrapper-input">#}
  233. {#                                    <label class="file-label">#}
  234. {#                                        {{ 'form.image_placeholder'|trans }}#}
  235. {#                                        <input required type="file" name="image" accept="image/*">#}
  236. {#                                    </label>#}
  237. {#                                </div>#}
  239. {#                                <div class="wrapper-button two-buttons">#}
  240. {#                                    <button type="submit"#}
  241. {#                                            name="action"#}
  242. {#                                            value="pay_now"#}
  243. {#                                            class="main-button">#}
  244. {#                                        💳 {{ 'form.pay_now'|trans }}#}
  245. {#                                    </button>#}
  247. {#                                    <button type="submit"#}
  248. {#                                            name="action"#}
  249. {#                                            value="request"#}
  250. {#                                            class="secondary-button">#}
  251. {#                                        ✉️ {{ 'form.leave_request'|trans }}#}
  252. {#                                    </button>#}
  253. {#                                </div>#}
  254. {#                            </form>#}
  255. {#                        </div>#}
  256. {#                    </div>#}
  257. {#                </div>#}
  258. {#            </section>#}
  259.             <div class="wrapper-home-slider">
  260.                 <div class="wrapper-banner-image" style="background-image: url({{ banner.image }})">
  261.                     <div class="wrapper-text">
  262.                                 <span>
  263.                                     {{ "now"|date('M')|trans }}
  264.                                     {{ "now"|date('d,') }}
  265.                                     {{ "now"|date(' Y') }}
  266.                                 </span>
  267.                         <h2>
  268.                             {{ banner.title }}
  269.                         </h2>
  270.                         <p>
  271.                             {{ banner.shortDescription }}
  272.                         </p>
  273.                         <a href="#">
  274.                             {{ 'READ MORE'|trans }}…
  275.                         </a>
  276.                     </div>
  277.                 </div>
  278.                 <div class="wrapper-slider">
  279.                     <h3>
  280.                         Daily Feed
  281.                     </h3>
  282.                     <div class="slider">
  283.                         {% for item in news %}
  284.                             <div>
  285.                                 <div class="wrapper-item">
  286.                                     <h2>
  287.                                         {{ item.title }}
  288.                                     </h2>
  289.                                     <a href="#">
  290.                                         {{ item.shortDescription }}
  291.                                     </a>
  292.                                 </div>
  293.                             </div>
  294.                         {% endfor %}
  295.                     </div>
  296.                 </div>
  297.             </div>
  298.             <div class="wrapper-news">
  299.                 <h2 class="main-title">
  300.                     Featured News
  301.                 </h2>
  302.                 <div class="wrapper-items">
  303.                     <div class="wrapper-item wrapper-left-item">
  304.                         <div class="wrapper-image">
  305.                             <img src="{{ services[0].image }}" alt="">
  306.                         </div>
  307.                         <h3>
  308.                             {{ services[1].title }}
  309.                         </h3>
  310.                         <div class="wrapper-image">
  311.                             <img src="{{ services[1].image }}" alt="">
  312.                         </div>
  313.                     </div>
  314.                     <div class="wrapper-item wrapper-middle-item">
  315.                         <div class="wrapper-text">
  316.                             <h3>
  317.                                 {{ services[0].title }}
  318.                             </h3>
  319.                             <p>
  320.                                 {{ services[0].shortDescription }}
  321.                             </p>
  322.                             <a href="{{ path('page_service',{'id':services[0].id}) }}">READ MORE</a>
  323.                         </div>
  324.                         <div class="wrapper-text">
  325.                             <p>
  326.                                 {{ services[1].shortDescription }}
  327.                             </p>
  328.                             <a href="{{ path('page_service',{'id':services[1].id}) }}">READ MORE</a>
  329.                         </div>
  331.                     </div>
  332.                     <div class="wrapper-item wrapper-right-item">
  333.                         <div class="wrapper-image">
  334.                             <img src="{{ services[2].image }}" alt="">
  335.                         </div>
  336.                         <div class="wrapper-text">
  337.                             <h3>
  338.                                 {{ services[2].title }}
  339.                             </h3>
  340.                             <p>
  341.                                 {{ services[2].shortDescription }}
  342.                             </p>
  343.                             <a href="{{ path('page_service',{'id':services[2].id}) }}">READ MORE</a>
  344.                         </div>
  345.                     </div>
  346.                 </div>
  347.             </div>
  348.             <div class="wrapper-subscribe">
  349.                 <h5>
  350.                     Request my picture
  351.                 </h5>
  352.                 <form action="{{ path('page_view_image') }}" class="wrapper-input">
  353.                     <input name="code" type="text" placeholder="Your private code">
  354.                     <button>
  355.                         Send
  356.                     </button>
  357.                 </form>
  358.             </div>
  359.         </div>
  360.     </section>
  362.     <audio id="jingle" src="{{ asset('sounds/jingle-bells.mp3') }}"></audio>
  363.     <audio id="hoho" src="{{ asset('sounds/ho-ho-ho.mp3') }}"></audio>
  364.     <audio id="music"
  365.            src="{{ asset('sounds/kids-happy-background-music.mp3') }}"
  366.            loop muted autoplay playsinline></audio>
  367. {% endblock %}
  368. {% block javascripts %}
  369.     {{ parent() }}
  370.     <script>
  371.         fbq('track', 'ViewContent', {
  372.             content_name: 'Home Page'
  373.         });
  375.         const santaForm = document.getElementById('santaForm');
  377.         if (santaForm) {
  378.             santaForm.addEventListener('submit', function () {
  380.                 if (!santaForm.checkValidity()) {
  381.                     return;
  382.                 }
  384.                 const eventId = crypto.randomUUID();
  386.                 fbq('track', 'AddToCart', {
  387.                     content_name: 'Santa Message'
  388.                 }, { eventID: eventId });
  389.             });
  390.         }
  391.     </script>
  392. {% endblock %}