templates/public/index.html.twig line 1

Open in your IDE?
  1. {% extends 'public/base.html.twig' %}
  3. {% block pageCSS %}
  4.     <style>
  5.         .partage-fb {
  6.             bottom: 40px;
  7.             right: 50px;
  8.             top: auto;
  9.             font-size: 13px;
  10.             /* font-weight: 700; */
  11.             padding: 14px 26px;
  12.             color: #4C97FD;
  13.             background: white;
  14.             transition: all 0.3s linear;
  15.         }
  16.         .partage-fb:hover {
  17.             bottom: 40px;
  18.             right: 50px;
  19.             top: auto;
  20.             font-size: 13px;
  21.             /* font-weight: 700; */
  22.             padding: 14px 26px;
  23.             background: #4C97FD;
  24.             color: white;
  25.         }
  26.     </style>
  27. {% endblock %}
  29. {% block content %}
  30.     <!--section  -->
  31.     {#    <section class="hero-section" data-scrollax-parent="true"> #}
  32.     {#        <div class="bg-tabs-wrap"> #}
  33.     {#            <video class="h-full w-full object-cover home-slide-video" autoplay="" loop="" muted="" playsinline=""> #}
  34.     {#                <source src="{{ asset('videos/bg.mp4') }}" type="video/mp4"> #}
  35.     {#            </video> #}
  36.     {#            <div class="bg-parallax-wrap home-slide-image" data-scrollax="properties: { translateY: '200px' }"> #}
  37.     {#                <div class="bg bg_tabs" data-bg="{{ asset('images/bg.jpg') }}"></div> #}
  38.     {#                #}
  39.     {#                <div class="overlay op7"></div> #}
  40.     {#            </div> #}
  41.     {#        </div> #}
  42.     {#        <div class="container small-container" style="min-height: calc( 100vh - 279px ); display: grid"> #}
  43.     {#            <div class="intro-item fl-wrap"> #}
  44.     {#                <span class="section-separator"></span> #}
  45.     {#                <div class="bubbles"> #}
  46.     {#                    <h1>JE PRIE POUR MADAGASCAR</h1> #}
  47.     {#                    <h3>Un mouvement d'unité pour Madagascar</h3> #}
  48.     {#                </div> #}
  49.     {#            </div> #}
  50.     {#        </div> #}
  51.     {#        <div class="header-sec-link"> #}
  52.     {#            <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a> #}
  53.     {#        </div> #}
  54.     {#    </section> #}
  55.     <!--section end-->
  57.     <div class="hero-map-wrap">
  58.         <div class="hero-map">
  59.             <!-- Map -->
  60.             <div class="map-container  fw-map big_map">
  61.                 <div id="map-main"></div>
  62.                 <ul class="mapnavigation no-list-style">
  63.                     <li><a href="#" class="prevmap-nav mapnavbtn"><span><i class="fas fa-caret-left"></i></span></a>
  64.                     </li>
  65.                     <li><a href="#" class="nextmap-nav mapnavbtn"><span><i class="fas fa-caret-right"></i></span></a>
  66.                     </li>
  67.                 </ul>
  68.                 <div class="scrollContorl mapnavbtn tolt" data-microtip-position="top-left"
  69.                      data-tooltip="Enable Scrolling"><span><i class="fal fa-unlock"></i></span></div>
  70.                 <div class="location-btn geoLocation tolt" data-microtip-position="top-left"
  71.                      data-tooltip="Your location"><span><i class="fal fa-location"></i></span></div>
  72.             </div>
  73.             <!-- Map end -->
  75.             <div class="header-sec-link">
  76.                 <a href="#sec1" class="custom-scroll-link"><i class="fal fa-angle-double-down"></i></a>
  77.             </div>
  78.         </div>
  79.     </div>
  80.     <!--section  -->
  81.     <section class="slw-sec" id="sec1">
  82.         <div class="section-title">
  83.             <h2>Les Dernières Prières</h2>
  84.             <span class="section-separator"></span>
  85.         </div>
  86.         <div class="listing-slider-wrap fl-wrap">
  87.             <div class="listing-slider fl-wrap">
  88.                 <div class="swiper-container">
  89.                     <div class="swiper-wrapper">
  90.                         {% for prayer in lastPrayers %}
  91.                             {{ include('public/common/_prayer_slide_item.html.twig') }}
  92.                         {% endfor %}
  93.                     </div>
  94.                 </div>
  95.                 <div class="listing-carousel-button listing-carousel-button-next2"><i
  96.                             class="fas fa-caret-right"></i></div>
  97.                 <div class="listing-carousel-button listing-carousel-button-prev2"><i
  98.                             class="fas fa-caret-left"></i></div>
  99.             </div>
  100.             <div class="tc-pagination_wrap">
  101.                 <div class="tc-pagination2"></div>
  102.             </div>
  103.         </div>
  104.     </section>
  105.     <!--section end-->
  107.     <div class="sec-circle fl-wrap"></div>
  109.     <!--section -->
  110.     <section class="gray-bg hidden-section particles-wrapper" id="sec2">
  111.         <div class="container">
  112.             <div class="section-title">
  113.                 <h2>Participants par localisation</h2>
  114.                 <span class="section-separator"></span>
  115.             </div>
  116.             <div class="listing-item-grid_container fl-wrap">
  117.                 <div class="row">
  118.                     <!--  listing-item-grid  -->
  119.                     {% for city in stat.cities|slice(0,6) %}
  120.                         <a href="{{ path('prayer', { "prayer": {"city" : city.name}}) }}">
  121.                             <div class="col-sm-4 city-item" data-city-name="{{ city.name }}">
  122.                                 <div class="listing-item-grid">
  123.                                     {% set cityImagePath = city.image ? get_parameter('image_city_directory_prefix') ~ city.image : 'images/localisation.jpg' %}
  124.                                     <div class="bg"
  125.                                          data-bg="{{ url('asset_url', {'path': cityImagePath, 'h':'530' }) }}"></div>
  126.                                     <div class="d-gr-sec"></div>
  127.                                     <div class="listing-counter color2-bg"><span>{{ city.participants|length }} </span>
  128.                                         Participant{{ city.participants|length > 1 ? "s" : "" }}</div>
  129.                                     <div class="listing-item-grid_title">
  130.                                         <h3>
  131.                                             <a href="{{ path('prayer', { "prayer": {"city" : city.name}}) }}">{{ city.name }}</a>
  132.                                         </h3>
  133.                                         {#                                    <p>Constant care and attention to the patients makes good record</p> #}
  134.                                     </div>
  135.                                 </div>
  136.                             </div>
  137.                         </a>
  138.                     {% endfor %}
  139.                     <!--  listing-item-grid end  -->
  140.                 </div>
  141.             </div>
  142.             <a href="{{ path('city') }}" class="btn dec_btn color2-bg">Voir toutes les localisations
  143.                 <i class="fal fa-arrow-alt-right" style="color:#fff;"></i></a>
  144.         </div>
  145.     </section>
  146.     <!--section end-->
  148.     <!--  section  -->
  149.     <section class="parallax-section small-par" data-scrollax-parent="true">
  150.         <div class="bg par-elem " data-bg="{{ asset('images/bg.jpg') }}"
  151.              data-scrollax="properties: { translateY: '30%' }"></div>
  152.         <div class="overlay  op7"></div>
  153.         <div class="container">
  154.             <div class=" single-facts single-facts_2 fl-wrap">
  155.                 <!-- inline-facts -->
  156.                 <div class="inline-facts-wrap" style="width: 33.3% !important;">
  157.                     <div class="inline-facts">
  158.                         <div class="milestone-counter">
  159.                             <div class="stats animaper">
  160.                                 <div class="num" data-content="0"
  161.                                      data-num="{{ stat.prayingCities|length }}">{{ stat.prayingCities|length }}</div>
  162.                             </div>
  163.                         </div>
  164.                         <h6>Nombre de villes priant pour madagascar</h6>
  165.                     </div>
  166.                 </div>
  167.                 <!-- inline-facts end -->
  168.                 <!-- inline-facts  -->
  169.                 <div class="inline-facts-wrap" style="width: 33.3% !important;">
  170.                     <div class="inline-facts">
  171.                         <div class="milestone-counter">
  172.                             <div class="stats animaper">
  173.                                 <div class="num" data-content="0"
  174.                                      data-num="{{ stat.prayers|length }}">{{ stat.prayers|length }}</div>
  175.                             </div>
  176.                         </div>
  177.                         <h6>Nombre total de sujet de prières</h6>
  178.                     </div>
  179.                 </div>
  180.                 <!-- inline-facts end -->
  181.                 <!-- inline-facts  -->
  182.                 <div class="inline-facts-wrap" style="width: 33.3% !important;">
  183.                     <div class="inline-facts">
  184.                         <div class="milestone-counter">
  185.                             <div class="stats animaper">
  186.                                 <div class="num" data-content="0"
  187.                                      data-num="{{ stat.religious|length }}">{{ stat.religious|length }}</div>
  188.                             </div>
  189.                         </div>
  190.                         <h6>Nombre total de personne ayant prié pour Madagascar</h6>
  191.                     </div>
  192.                 </div>
  193.                 <!-- inline-facts end -->
  194.             </div>
  195.         </div>
  196.     </section>
  197.     <!--section end-->
  199.     <!--section  -->
  200.     <section class="process-section" data-scrollax-parent="true">
  201.         <div class="container">
  202.             <div class="section-title">
  203.                 <h2>Comment Ça Marche</h2>
  204.                 {#                <div class="section-subtitle">Discover &amp; Connect</div> #}
  205.                 <span class="section-separator"></span>
  206.                 {#                <p>Morbi varius, nulla sit amet rutrum elementum, est elit finibus tellus, ut tristique #}
  207.                 {#                    elit #}
  208.                 {#                    risus at metus.</p> #}
  209.             </div>
  210.             <div class="process-wrap fl-wrap">
  211.                 <ul class="no-list-style">
  212.                     <li>
  213.                         <div class="process-item">
  214.                             <span class="process-count">01 </span>
  215.                             <div class="time-line-icon"><i class="fal fa-user-plus"></i></div>
  216.                             <h4> S'inscrire</h4>
  217.                         </div>
  218.                         <span class="pr-dec"></span>
  219.                     </li>
  220.                     <li>
  221.                         <div class="process-item">
  222.                             <span class="process-count">03</span>
  223.                             <div class="time-line-icon"><i class="fal fa-praying-hands"></i></div>
  224.                             <h4> Prier pour Madagascar</h4>
  225.                         </div>
  226.                     </li>
  227.                     <li>
  228.                         <div class="process-item">
  229.                             <span class="process-count">02</span>
  230.                             <div class="time-line-icon"><i class="fal fa-mail-bulk"></i></div>
  231.                             <h4> Soumettre un sujet de prière pour le pays</h4>
  232.                         </div>
  233.                         <span class="pr-dec"></span>
  234.                     </li>
  236.                 </ul>
  237.                 <div class="process-end"><i class="fal fa-check"></i></div>
  238.             </div>
  239.         </div>
  240.     </section>
  241.     <!--section end-->
  242.     {#{% if postsFb %}
  243.         <!--section  -->
  244.         <section class="slw-sec" id="sec1">
  245.             <div class="section-title">
  246.                 <h2>Les Dernières Publications</h2>
  247.                 <span class="section-separator"></span>
  248.             </div>
  249.             <div class="listing-slider-wrap fl-wrap">
  250.                 <div class="listing-slider fl-wrap">
  251.                     <div class="swiper-container">
  252.                         <div class="swiper-wrapper">
  253.                             {% for postFb in postsFb.data %}
  254.                                 {{ include('public/common/_facebook_post_slide_item.html.twig') }}
  255.                             {% endfor %}
  256.                         </div>
  257.                     </div>
  258.                     <div class="listing-carousel-button listing-carousel-button-next2"><i
  259.                                 class="fas fa-caret-right"></i></div>
  260.                     <div class="listing-carousel-button listing-carousel-button-prev2"><i
  261.                                 class="fas fa-caret-left"></i></div>
  262.                 </div>
  263.                 <div class="tc-pagination_wrap">
  264.                     <div class="tc-pagination2"></div>
  265.                 </div>
  266.             </div>
  267.         </section>
  268.         <!--section end-->
  269.     {% endif %}#}
  271. {% endblock %}
  273. {% block modal %}
  274.     {{ parent() }}
  275.     {% for prayer in lastPrayers %}
  276.         {{ include('public/prayer/_listing_item_modal.html.twig') }}
  277.     {% endfor %}
  278. {% endblock %}
  281. {% block pageJS %}
  282.     {{ parent() }}
  283.     <script>
  284.         $(document).on("click", ".praying-btn", function () {
  285.             let element = this;
  286.             let $element = $(element);
  287.             let url = $element.data('url') ? $element.data('url') : null;
  288.             let dataMethod = $element.data('method') ? $element.data('method') : 'POST';
  290.             let args = {
  291.                 element: `#${element.id}`,
  292.                 url,
  293.                 dataMethod,
  294.             }
  295.             sendPraying(args)
  296.         });
  297.     </script>
  298.     <script src="{{ asset('townhub/js/map-plugins.js') }}"></script>
  299.     <script>
  300.         {{ include('public/prayer/_map.js.twig') }}
  301.     </script>
  303. {% endblock %}