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="hero-edition-bar">
  260.                 <span>{{ "now"|date('l, F j')|trans }}</span>
  261.                 <span class="hero-edition-divider">✦</span>
  262.                 <span>{{ "now"|date('Y')|trans }}</span>
  263.                 <span class="hero-edition-divider">✦</span>
  264.                 <span>{{ 'Est. 2024'|trans }}</span>
  265.             </div>
  266.             <div class="hero-grid">
  267.                 <div class="hero-feature">
  268.                     <div class="hero-feature-image">
  269.                         <img src="{{ banner.image }}" alt="{{ banner.title }}">
  270.                     </div>
  271.                     <div class="hero-feature-text">
  272.                         <span class="hero-eyebrow">{{ 'Featured Story'|trans }}</span>
  273.                         <h2>
  274.                             {{ banner.title }}
  275.                         </h2>
  276.                         <p>
  277.                             {{ banner.shortDescription }}
  278.                         </p>
  279.                         <a href="{{ path('page_about') }}" class="main-button">
  280.                             {{ 'READ MORE'|trans }} →
  281.                         </a>
  282.                     </div>
  283.                 </div>
  284.                 <div class="hero-feed">
  285.                     <h3>
  286.                         {{ 'Daily Feed'|trans }}
  287.                     </h3>
  288.                     <div class="hero-feed-list">
  289.                         {% for item in news %}
  290.                             <div class="hero-feed-item">
  291.                                 <span class="feed-badge">{{ '%02d'|format(loop.index) }}</span>
  292.                                 <div class="hero-feed-item-text">
  293.                                     <h4>
  294.                                         {{ item.title }}
  295.                                     </h4>
  296.                                     <p>
  297.                                         {{ item.shortDescription }}
  298.                                     </p>
  299.                                 </div>
  300.                             </div>
  301.                         {% endfor %}
  302.                     </div>
  303.                 </div>
  304.             </div>
  305.             <div class="wrapper-news">
  306.                 <h2 class="main-title">
  307.                     {{ 'Our Services'|trans }}
  308.                 </h2>
  309.                 <div class="wrapper-items">
  310.                     {% for item in services %}
  311.                         <div class="wrapper-item">
  312.                             <a href="{{ path('page_service',{'id':item.id}) }}" class="wrapper-image">
  313.                                 <span class="service-index">{{ '%02d'|format(loop.index) }}</span>
  314.                                 <img src="{{ item.image }}" alt="{{ item.title }}">
  315.                             </a>
  316.                             <div class="wrapper-text">
  317.                                 <h3>
  318.                                     {{ item.title }}
  319.                                 </h3>
  320.                                 <p>
  321.                                     {{ item.shortDescription }}
  322.                                 </p>
  323.                                 <a href="{{ path('page_service',{'id':item.id}) }}">{{ 'READ MORE'|trans }}</a>
  324.                             </div>
  325.                         </div>
  326.                     {% endfor %}
  327.                 </div>
  328.             </div>
  329. {#            {% include '@web/parts/partner-nviraberir.html.twig' %}#}
  330.             <div class="wrapper-subscribe">
  331.                 <h5>
  332.                     {{ 'Request my picture'|trans }}
  333.                 </h5>
  334.                 <form action="{{ path('page_view_image') }}" class="wrapper-input">
  335.                     <input name="code" type="text" placeholder="{{ 'Your private code'|trans }}">
  336.                     <button class="main-button">
  337.                         {{ 'Send'|trans }}
  338.                     </button>
  339.                 </form>
  340.             </div>
  341.         </div>
  342.     </section>
  344.     <audio id="jingle" src="{{ asset('sounds/jingle-bells.mp3') }}"></audio>
  345.     <audio id="hoho" src="{{ asset('sounds/ho-ho-ho.mp3') }}"></audio>
  346.     <audio id="music"
  347.            src="{{ asset('sounds/kids-happy-background-music.mp3') }}"
  348.            loop muted autoplay playsinline></audio>
  349. {% endblock %}
  350. {% block javascripts %}
  351.     {{ parent() }}
  352.     <script>
  353.         fbq('track', 'ViewContent', {
  354.             content_name: 'Home Page'
  355.         });
  357.         const santaForm = document.getElementById('santaForm');
  359.         if (santaForm) {
  360.             santaForm.addEventListener('submit', function () {
  362.                 if (!santaForm.checkValidity()) {
  363.                     return;
  364.                 }
  366.                 const eventId = crypto.randomUUID();
  368.                 fbq('track', 'AddToCart', {
  369.                     content_name: 'Santa Message'
  370.                 }, { eventID: eventId });
  371.             });
  372.         }
  373.     </script>
  374. {% endblock %}