templates/Theme/Users/User/Security/accueilsite.html.twig line 1

Open in your IDE?
  1. {% set menudisplay = 0 %} 
  2. {% extends "Theme/Users/User/layoutuser.html.twig" %}
  3. {% block meta %}
  5.     {{ parent() }}
  6.     <meta name="keywords" content="{{ site }}, Business, Innovation,Administration"/>
  7.     <meta name="author" content="Noel Kenfack"/>
  8.     <meta name="description" content="{{ site }} | Inscription | Cameroun | {{ metier }}"/>
  10. {% endblock %}
  12. {% block title %}
  13.     {{ parent() }} | Accueil
  14. {% endblock %}
  16. {% block stylesheets %}
  17.     {{ parent() }}
  18.     <style>
  19.         .box-slide-top{
  20.             height: 120px; border: 1px solid #ddd; margin: 2px 0px;
  21.             padding: 3px;
  22.             border-radius: 5px;
  23.             background: #fff;
  24.         }
  25.         .controls{
  26.             background: #fff;
  27.             margin-top: 2px;
  28.             padding: 2px;
  29.             border-radius: 0px 0px 5px 5px;
  30.         }
  31.         .controls a{
  32.             background: #f5f5f5;
  33.             padding: 1px 5px;
  34.             border-radius: 5px;
  35.             display: inline-block;
  36.             font-size: 10px;
  37.         }
  38.         .box-slide-top:hover{
  39.             background: #f7f7f7;
  40.             border: 1px solid green;
  41.         }
  42.         .carousel-link{
  43.             display: block!important;
  44.         }
  45.         .carousel-link img:hover{
  46.             box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  47.         }
  48.     </style>
  49. {% endblock %}
  51. {% block userblog_body %}
  52. <!-- Slider Area -->
  53.     <section class="hero-slider" style="background-image: url('https://via.placeholder.com/1900x700');">
  54.         <!-- Single Slider -->
  55.         <div class="single-slider">
  56.             <div class="container">
  57.                 <div class="row no-gutters">
  58.                     <div class="col-lg-6 offset-lg-3 col-12" style="padding: 0px;">
  59.                         <div class="text-inner" style="background: #fff; min-height: 482px; margin: 16px 3px 0px 3px; border-radius: 5px; padding-top: 20px;">
  61.                             <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
  62.                               <ol class="carousel-indicators">
  63.                                 {% for silde in liste_slide %}
  64.                                     <li data-target="#carouselIndicators" data-slide-to="{{ loop.index0 }}" class="{% if loop.first %}active{% endif %}"></li>
  65.                                 {% endfor %}
  66.                               </ol>
  68.                               <div class="carousel-inner">
  69.                               {% for silde in liste_slide %}
  70.                                 <div class="carousel-item {% if loop.first %}active{% endif %}">
  71.                                     <a href="#!" class="carousel-link">
  72.                                       <img  src="{% if silde.src != null %}{{ asset(silde.getwebpath) }}{% else %}{{ asset('template/images/tresorerie.jpg') }}{% endif %}" alt="First slide" style="width: 100%; height: 445px;">
  73.                                       <div class="carousel-caption  text-center">
  74.                                         <h2 class="white-text-shadow">{{ silde.titre }}</h2>
  75.                                       </div>
  76.                                     </a>
  77.                                 </div>
  78.                               {% endfor %}
  80.                               </div>
  82.                               <a class="carousel-control-prev" data-target="#carouselIndicators" href="#!" role="button" data-slide="prev">
  83.                                 <img src="{{ asset('template/images/arrow-left-acc.svg') }}" class="indicateur-carousel"/>
  84.                                 <span class="sr-only">Previous</span>
  85.                               </a>
  87.                               <a class="carousel-control-next" data-target="#carouselIndicators" href="#!" role="button" data-slide="next">
  88.                                     <img src="{{ asset('template/images/arrow-right-acc.svg') }}" class="indicateur-carousel"/>
  89.                                 <span class="sr-only">Next</span>
  90.                               </a>
  91.                             </div>
  94.                             <!--div class="row">
  95.                                 <div class="col-lg-12 col-12">
  96.                                     <div class="hero-text">
  97.                                         <h1><span>UP TO 50% OFF </span>Shirt For Man</h1>
  98.                                         <p>Maboriosam in a nesciung eget magnae <br> dapibus disting tloctio in the find it pereri <br> odiy maboriosm.</p>
  99.                                         <div class="button">
  100.                                             <a href="#" class="btn">Shop Now!</a>
  101.                                         </div>
  102.                                     </div>
  103.                                 </div>
  104.                             </div-->
  106.                         </div>
  107.                     </div>
  108.                     <div class="col-lg-3 col-12">
  109.                         <div class="text-inner" style="height: 510px; margin-top: 15px;">
  111.                             <ul class="newsticker" style="height: 450px; bottom: 0px;">
  112.                                 {% for offre in liste_offre|slice(0,8) %}
  113.                                 <li class="box-slide-top">
  114.                                     <a href="{% if offre.link != null %}{{ offre.link }}{% else %}{{ path('produit_produit_tous_produits_souscategorie_binplace_market', {'id': offre.projet.id, 'scat': offre.souscategorie.id }) }}{% endif %}" style="display: inline-block!important; height: 100%!important; width: 100%!important; position: sticky;">
  115.                                     <div class="row" style="padding: 4px 2px;">
  116.                                         <div style="width: 35%!important; padding: 0px 7px;">
  117.                                             <img src="{% if offre.src != 'source' %}{{ asset(offre.getwebpath) }}{% else %}{{ asset('template/images/assistance-bg.jpg') }}{% endif %}" style="height: 90%!important; width: 100%!important; display: inline-block;"/>
  118.                                         </div>
  119.                                         <div style="width: 65%!important; padding: 0px 7px;">
  120.                                             <strong class="coustom-my-text" style="display: block;">{{ offre.projet.name(30) }}</strong>
  121.                                             {{ offre.titre }}
  122.                                         </div>
  123.                                     </div>
  124.                                     <span style="position: absolute; right: 7px; bottom: 15px; padding: 2px; border-radius: 5px; background: #f4f4f4;">Consulter</span>
  125.                                     </a>
  126.                                 </li>
  127.                                 {% endfor %}
  128.                             </ul>
  130.                             <div class="controls" style="text-align: right!important; padding-left: 5px; padding-right: 5px;"><a href="{{ path('produit_produit_speciales_offres') }}" style="float: left;"><i class="ti-thought"></i> Offres spéciales</a> <a class="prev-button" href="#!" title="Précédent"><span class="fa fa-arrow-circle-left"></span></a>  | <a class="next-button" href="#!" title="Suivant"><span class="fa fa-arrow-circle-right"></span></a> | <a class="stop-button" href="#!" title="Pause"><span class="fa fa-stop"></span></a> | <a class="start-button" href="#!" title="Arrêter/Jouer"><span class="fa fa-play"></span></a> </div>
  131.                         </div>
  132.                     </div>
  133.                 </div>
  134.             </div>
  135.         </div>
  136.         <!--/ End Single Slider -->
  137.     </section>
  140.     <script type="text/javascript">
  141.         var multilines = $('.newsticker').newsTicker({
  142.             row_height: 150,
  143.             speed: 50,
  144.             prevButton: $('.prev-button'),
  145.             nextButton: $('.next-button'),
  146.             stopButton: $('.stop-button'),
  147.             startButton: $('.start-button'),
  148.         });
  149.     </script>
  151.     <style>
  152.         .box-hover {
  153.             position:relative;
  154.             width: 100%;
  155.             height: 100%;
  156.             background:#000;
  157.             box-sizing:border-box;
  158.             overflow:hidden;
  159.             box-shadow:0 5px 10px rgba(0,0,0,.8);
  160.         }
  161.         .box-hover:before {
  162.             content:'';
  163.             position:absolute;
  164.             top:10px;
  165.             left:10px;
  166.             right:10px;
  167.             bottom:10px;
  168.             border-top:1px solid #fff;
  169.             border-bottom:1px solid #fff;
  170.             box-sizing:border-box;
  171.             transition:0.5s;
  172.             transform: scaleX(0);
  173.             opacity:0;
  174.         }
  175.         .box-hover:hover:before {
  176.             transform:scaleX(1);
  177.             opacity:1;
  178.         }
  179.         .box-hover:after {
  180.             content:'';
  181.             position:absolute;
  182.             top:10px;
  183.             left:10px;
  184.             right:10px;
  185.             bottom:10px;
  186.             border-left:1px solid #fff;
  187.             border-right:1px solid #fff;
  188.             box-sizing:border-box;
  189.             transition:0.5s;
  190.             transform: scaleY(0);
  191.             opacity:0;
  192.         }
  193.         .box-hover:hover:after {
  194.             transform:scaleY(1);
  195.             opacity:1;
  196.         }
  197.         .box-hover .imgBox {
  198.             position:relative;
  199.         }
  200.         .box-hover .imgBox img {
  201.             width:100%;
  202.             transition:0.5s;
  203.         }
  204.         .box-hover:hover .imgBox img {
  205.             opacity:.2;
  206.             transform:scale(1.2);
  207.         }
  208.         .box-hover .content {
  209.             position:absolute;
  210.             width:100%;
  211.             top:40%;
  212.             transform:translateY(-50%);
  213.             z-index:2;
  214.             padding:20px;
  215.             box-sizing:border-box;
  216.             text-align:center;
  217.         }
  218.         .box-hover .content h2 {
  219.             margin: 0 0 10px;
  220.             padding:0;
  221.             color:#fff;
  222.             transition:0.5s;
  223.             transform:translateY(-50px);
  224.             opacity:0;
  225.             visibility:hidden;
  226.         }
  227.         .box-hover .content p {
  228.             margin:0;
  229.             padding:0;
  230.             color:#fff;
  231.             transform:translateY(50px);
  232.             opacity:0;
  233.             visibility:hidden;
  234.         }
  235.         .box-hover:hover .content h2,
  236.         .box-hover:hover .content P {
  237.             opacity:1;
  238.             visibility:visible;
  239.             transform:translateY(0px);
  240.         }
  241.         
  242.     </style>
  244.     <section>
  245.         <div class="container">
  246.             <div class="row">
  247.                 <div class="col-md-12" >
  248.                 <section class="logo-partner" style="background: #f2f2f2;">
  249.                 
  250.                 <div class="my-container">
  251.                 <div class="cover-wrapper" style="height: 120px;">
  252.                     <div id="client-logos" class="owl-carousel text-center">
  253.                         {% for marque in liste_marque %}
  254.                         <div class="item" style="padding: 0px!important;">
  255.                             <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idmarque': marque.id }) }}" value="{{ marque.id }}" class="box-hover open_scat_catalogue" style="display: inline-block;">
  256.                                 <div class="imgBox">
  257.                                     <img src="{% if marque.src != null %}{{ asset(marque.getwebpath) }}{% else %}{{ asset('template/images/logo-afh.png') }}{% endif %}" style="width: 100%!important; height: auto;">
  258.                                 </div>
  259.                                 <div class="content">
  260.                                     <p>
  261.                                         <strong>{{ marque.nom }}</strong></br>
  262.                                         {% set nbproduits = marque.produits|length %}
  263.                                         <span>{{ nbproduits }} produit(s)</span>
  264.                                     </p>
  265.                                 </div>
  266.                             </a>
  267.                         </div>
  268.                         {% else %}
  269.                         <!-- div class="item">
  270.                             <a href="" style="display: block;" >
  271.                               <img src="{{ asset('template/images/domainebox.png') }}" alt=""/>
  272.                               <div>Une Bonne No</div>
  273.                             </a>
  274.                         </div>
  275.                         <div class="item">
  276.                             <a href="" style="display: block;">
  277.                               <img src="{{ asset('template/images/i-web.png') }}" alt=""/>
  278.                               <div>Une Bonne No</div>
  279.                             </a>
  280.                         </div>
  281.                         <div class="item">
  282.                             <a href="" style="display: block;">
  283.                               <img src="{{ asset('template/images/logo-afh.png') }}" alt=""/>
  284.                               <div>Une Bonne No</div>
  285.                             </a>
  286.                         </div>
  287.                         <div class="item">
  288.                             <a href="" style="display: block;">
  289.                               <img src="{{ asset('template/images/ovh-host.png') }}" alt=""/>
  290.                               <div>Une Bonne No</div>
  291.                             </a>
  292.                         </div>
  293.                         <div class="item">
  294.                             <a href="" style="display: block;">
  295.                               <img src="{{ asset('template/images/france-dns.png') }}" alt=""/>
  296.                               <div>Une Bonne No</div>
  297.                             </a>
  298.                         </div>
  299.                         <div class="item">
  300.                             <a href="" style="display: block;">
  301.                               <img src="{{ asset('template/images/logo-cpanel.png') }}" alt=""/>
  302.                               <div>Une Bonne No</div>
  303.                             </a>
  304.                         </div>
  305.                         <div class="item">
  306.                             <a href="" style="display: block;">
  307.                               <img src="{{ asset('template/images/logo-oj.png') }}" alt=""/>
  308.                               <div>Une Bonne No</div>
  309.                             </a>
  310.                         </div -->
  312.                         <div class="item" style="padding: 0px!important;">
  313.                             <a href="#!" class="box-hover open_scat_catalogue" style="display: inline-block;">
  314.                                 <div class="imgBox">
  315.                                     <img src="{{ asset('template/images/part01.jpeg') }}" style="height: 100px;">
  316.                                 </div>
  317.                                 <div class="content">
  318.                                     <p>
  319.                                         <strong>Nom structure</strong></br>
  320.                                         <span>Partenaires</span>
  321.                                     </p>
  322.                                 </div>
  323.                             </a>
  324.                         </div>
  325.                         <div class="item" style="padding: 0px!important;">
  326.                             <a href="#!" class="box-hover open_scat_catalogue" style="display: inline-block;">
  327.                                 <div class="imgBox">
  328.                                     <img src="{{ asset('template/images/part02.jpeg') }}" style="height: 100px;">
  329.                                 </div>
  330.                                 <div class="content">
  331.                                     <p>
  332.                                         <strong>Nom structure</strong></br>
  333.                                         <span>Partenaires</span>
  334.                                     </p>
  335.                                 </div>
  336.                             </a>
  337.                         </div>
  338.                         <div class="item" style="padding: 0px!important;">
  339.                             <a href="#!" class="box-hover open_scat_catalogue" style="display: inline-block;">
  340.                                 <div class="imgBox">
  341.                                     <img src="{{ asset('template/images/part03.jpeg') }}" style="height: 100px;">
  342.                                 </div>
  343.                                 <div class="content">
  344.                                     <p>
  345.                                         <strong>Nom structure</strong></br>
  346.                                         <span>Partenaires</span>
  347.                                     </p>
  348.                                 </div>
  349.                             </a>
  350.                         </div>
  351.                         <div class="item" style="padding: 0px!important;">
  352.                             <a href="#!" class="box-hover open_scat_catalogue" style="display: inline-block;">
  353.                                 <div class="imgBox">
  354.                                     <img src="{{ asset('template/images/part04.jpeg') }}" style=" height: 100px;">
  355.                                 </div>
  356.                                 <div class="content">
  357.                                     <p>
  358.                                         <strong>Nom structure</strong></br>
  359.                                         <span>Partenaires</span>
  360.                                     </p>
  361.                                 </div>
  362.                             </a>
  363.                         </div>
  364.                         {% endfor %}
  365.                     </div>
  366.                 </div>
  367.                 </div>
  368.                 </section>
  370.                 <script type="text/javascript">
  371.                 $('#client-logos').owlCarousel({
  372.                     loop:true,
  373.                     margin:15,
  374.                     nav:true,
  375.                     responsive:{
  376.                         0:{
  377.                             items:2
  378.                         },
  379.                         600:{
  380.                             items:4
  381.                         },
  382.                         1000:{
  383.                             items:6
  384.                         }
  385.                     },
  386.                     navText: ["<img src='{{ asset('template/images/av8a49a4f81c3318dc69d.png') }}'/>","<img src='{{ asset('template/images/avcc910c4ee5888b858fe.png') }}'/>"]
  387.                 });
  388.                 </script>
  389.                 </div>
  390.             </div>
  391.         </div>
  392.     </section>
  393. <!--/ End Slider Area -->
  395. <style>
  396. .card-view{
  397.     -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  398.     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);
  399.     border-radius: 4px;
  400.     padding: 22px;
  401.     margin-bottom: 20px;
  402.     background: #fff;
  403.     max-width: 100%;
  404.     border-right: 3px solid green;
  405. }
  406. .card-view:hover {
  407.     box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.01);
  408.     background: #f9f9f9;
  409.     cursor: pointer;
  410.     border-right: 3px solid blue;
  411. }
  412. .flex-row {
  413.     display: -webkit-box;
  414.     display: -ms-flexbox;
  415.     display: flex;
  416.     -ms-flex-wrap: wrap;
  417.     flex-wrap: wrap;
  418.     margin-right: -15px;
  419.     margin-left: -15px;
  420. }
  421. .spacer {
  422.     padding-top: 50px;
  423.     padding-bottom: 50px;
  424. }
  425. .bg-gray{
  426.     background: #F8F8F8;
  427. }
  428. .no-margin{
  429.     margin: 0 !important;
  430. }
  431. .flex-row .flex-col{
  432.     -ms-flex-preferred-size: 0;
  433.     flex-basis: 0;
  434.     -webkit-box-flex: 1;
  435.     -ms-flex-positive: 1;
  436.     flex-grow: 1;
  437.     max-width: 100%;
  438.     position: relative;
  439.     width: 100%;
  440.     min-height: 1px;
  441.     padding-right: 15px;
  442.     padding-left: 15px;
  443. }
  444. .r-layout {
  445.     display: -webkit-box;
  446.     display: -ms-flexbox;
  447.     display: flex;
  448.     position: relative;
  449. }
  450. .r-layout .r-img {
  451.     position: relative;
  452.     width: 199px;
  453.     height: 192px;
  454.     margin-right: 20px;
  455. }
  456. .cm-sm {
  457.     width: 154px !important;
  458.     height: 156px !important;
  459. }
  460. .r-layout .r-img img {
  461.     width: 100%;
  462.     height: 100%;
  463.     border-radius: 3px;
  464.     -o-object-fit: cover;
  465.     object-fit: cover;
  466. }
  467. .r-layout .s-tag {
  468.     position: absolute;
  469.     top: 0;
  470.     right: 0;
  471.     font-weight: 500;
  472.     margin-right: 0;
  473. }
  474. .s-tag {
  475.     width: 41px;
  476.     height: 36px;
  477.     background: transparent;
  478.     color: #ed6e11;
  479.     border-radius: 3px;
  480.     background: var(--theme-color1);
  481.     text-align: center;
  482.     display: -webkit-box;
  483.     display: -ms-flexbox;
  484.     display: flex;
  485.     -webkit-box-align: center;
  486.     -ms-flex-align: center;
  487.     align-items: center;
  488.     -webkit-box-pack: center;
  489.     -ms-flex-pack: center;
  490.     justify-content: center;
  491.     font-weight: bold;
  492.     margin-right: 10px;
  493.     margin-top: -25px;
  494. }
  495. .card-sm-content .r-layout .r-content .title {
  496.     font-size: 17px;
  497. }
  498. .r-layout .r-content .title {
  499.     font-size: 22px;
  500.     font-weight: 600;
  501.     color: #212121;
  502.     margin: 0;
  503. }
  504. .title {
  505.     font-size: 28px;
  506.     font-weight: bold;
  507.     margin: 0;
  508. }
  509. .r-layout .r-content p {
  510.     font-size: 14px;
  511.     color: #666666;
  512.     margin: 0;
  513.     margin-bottom: 10px;
  514. }
  515. .taglist {
  516.     display: -webkit-box;
  517.     display: -ms-flexbox;
  518.     display: flex;
  519.     margin-bottom: 10px;
  520. }
  521. .taglist .tag:first-child {
  522.     margin-left: 0;
  523. }
  524. .taglist .tag {
  525.     margin-left: 10px;
  526. }
  527. .tag {
  528.     height: 26px;
  529.     border-radius: 2px;
  530.     background-color: #e4e4e4;
  531.     font-size: 14px;
  532.     color: #666666;
  533.     display: -webkit-box;
  534.     display: -ms-flexbox;
  535.     display: flex;
  536.     -webkit-box-align: center;
  537.     -ms-flex-align: center;
  538.     align-items: center;
  539.     -webkit-box-pack: center;
  540.     -ms-flex-pack: center;
  541.     justify-content: center;
  542.     text-align: center;
  543.     padding-left: 4px;
  544.     padding-right: 4px;
  545. }
  546. .r-layout .r-content p {
  547.     font-size: 14px;
  548.     color: #666666;
  549.     margin: 0;
  550.     margin-bottom: 10px;
  551. }
  552. .r-layout .r-content .color-text {
  553.     font-weight: 600;
  554.     color: #00796b;
  555. }
  556. .r-layout .r-content p {
  557.     font-size: 14px;
  558.     color: #666666;
  559.     margin: 0;
  560.     margin-bottom: 10px;
  561. }
  562. /* common css up */
  564. .h3-titlte {
  565.     font-size: 20px;
  566.     font-weight: 600;
  567.     color: #212121;
  568.     margin-top: 30px;
  569.     margin-bottom: 15px;
  570. }
  573. .panel-detail-top{
  574.     background: #fff!important;
  575. }
  577. .section-tabs {
  578.   display: none;
  579.   padding: 20px 0 0;
  580.   border-top: 1px solid #ddd;
  581. }
  583. .input-tabs {
  584.   display: none!important;
  585. }
  587. .label-tab{
  588.     display: inline-block;
  589.     margin: 0 0 -1px;
  590.     padding: 15px 10px;
  591.     font-weight: 600;
  592.     text-align: center;
  593.     color: #bbb;
  594.     border: 1px solid transparent;
  595.     font-size: 14px!important;
  596.     height: 50px!important;
  597. }
  599. .label-tab:after{
  600.     border: 2px solid transparent!important;
  601.     display: none;
  602. }
  603. .label-tab:before{
  604.     border: 2px solid transparent!important;
  605.     padding-top: 7px!important;
  606.     margin-left: 7px!important;
  607. }
  609. .label-tab:before{
  610.   font-family: fontawesome;
  611.   font-weight: normal;
  612.   margin-right: 10px;
  613. }
  614. .label-tab[for*='1']:before {
  615.   content: '\f1cb';
  616. }
  617. .label-tab[for*='2']:before {
  618.   content: '\f17d';
  619. }
  621. .label-tab[for*='3']:before {
  622.   content: '\f16b';
  623. }
  625. .label-tab[for*='4']:before {
  626.   content: '\f1a9';
  627. }
  629. .label-tab:hover {
  630.   color: #888;
  631.   cursor: pointer;
  632. }
  634. .input-tabs:checked + .label-tab {
  635.   color: #555;
  636.   border: 1px solid #ddd;
  637.   border-top: 2px solid #092759;
  638.   border-bottom: 1px solid #fff;
  639. }
  641. #tab-1:checked ~ #content1,
  642. #tab-2:checked ~ #content2,
  643. #tab-3:checked ~ #content3,
  644. #tab-4:checked ~ #content4 {
  645.   display: block;
  646. }#tab-5:checked ~ #content5 {
  647.   display: block;
  648. }
  650. @media screen and (max-width: 650px) {
  651.   .label-tab {
  652.     font-size: 0;
  653.   }
  655.   .label-tab:before {
  656.     margin: 0;
  657.     font-size: 18px;
  658.   }
  659. }
  660. @media screen and (max-width: 400px) {
  661.   .label-tab {
  662.     padding: 15px;
  663.   }
  664. }
  665. .tab-label{
  666.     font-family: 'Montserrat', sans-serif!important;
  667. }
  669. /* mixin for multiline */
  670. .card2 {
  671.   border: 0;
  672.   border-radius: 0;
  673.   background-color: #f4f4f4;
  674.   margin-top: -20px;
  675. }
  676. .card-img-top {
  677.   position: relative;
  678.   padding: 15px;
  679.   width: 100%;
  680.   height: 250px;
  681.   -o-object-fit: contain;
  682.      object-fit: contain;
  683. }
  684. .card-body {
  685.   border-radius: 15px 15px 0px 0px;
  686.   padding-top: 100px;
  687.   background-color: #fff;
  688.   box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  689.   height: 280px;
  690. }
  691. .card-text {
  692.   display: block;
  693.   overflow: hidden;
  694.   font-size: 16px;
  695.   line-height: 1.5;
  696.   max-height: 72px;
  697. }
  698. </style>
  701. <section class="theme-bg-light" style="background: #f4f4f4; padding: 20px 0px;">
  702.   <div class="container">           
  704.       <style>
  705.         div.demotabs {
  706.           border: 2px dashed #e6e6e6;
  707.           border-radius: .8125rem;
  708.           box-shadow: inset 0px 0px 1.625rem rgba(0, 0, 0, 0.05);
  709.           margin-top: 1.625rem;
  710.           padding: 15px;
  711.           background: #fff;
  712.         }
  713.         
  714.         .demotabs:hover .owl-next img, .demotabs:hover .owl-prev img{
  715.             background: #fff!important;
  716.             display: inline-block!important;
  717.             border-radius: 50%;
  718.             box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  719.             transition: all 0.3s cubic-bezier(.25,.8,.25,1);
  720.             cursor: pointer;
  721.         }
  723.         .demotabs .owl-next img, .demotabs .owl-prev img{
  724.             top: 150px!important;
  725.             display: none;
  726.             height: 50px;
  727.             width: 50px;
  728.             padding: 15px;
  729.         }
  730.         .demotabs .owl-next img:hover, .demotabs .owl-prev img:hover{
  731.             background: #f2f2f2;
  732.             border: 1px solid red;
  733.         }
  734.         
  735.         .default-item{
  736.             font-weight: nomal; font-size: 15px;
  737.         }
  738.         .default-item .diviser-item{
  739.             width: 120px; height: 7px; background: #fff; margin-top: 15px;
  740.         }
  741.         .active-item{
  742.             font-weight: bold; font-size: 25px;
  743.         }
  744.         .active-item .diviser-item{
  745.             width: 120px; height: 7px; margin-top: 15px;
  746.             background-color: var(--bg-principal)!important;
  747.         }
  748.         #produits-enregistres, #produits-nouveaux{
  749.             display: none;
  750.         }
  751.       </style>
  753.   <div class="demotabs">
  754.     <div class="tabs-container" style="padding-top: 15px; border: none;">
  755.         
  756.         <div class="row" style="margin-bottom: 30px;">
  757.             <div class="col-md-4">
  758.                 <div class="default-item active-item" value="1">
  759.                     <a href="#!">Recommandations</a>
  760.                     <div class="diviser-item"></div>
  761.                 </div>
  762.             </div>
  763.             <div class="col-md-4">
  764.                 <div class="default-item" value="2">
  765.                     <a href="#!">Enregistrements</a>
  766.                     <div class="diviser-item"></div>
  767.                 </div>
  768.             </div>
  769.             <div class="col-md-4">
  770.                 <div class="default-item" value="3">
  771.                     <a href="#!">Nouveaux Produits</a>
  772.                     <div class="diviser-item"></div>
  773.                 </div>
  774.             </div>
  775.         </div>
  776.         
  777.         <script type="text/javascript">
  778.             $('.default-item').click(function(){
  779.                 $('.default-item').removeClass('active-item');
  780.                 $(this).addClass('active-item');
  781.                 $('.carousel-product').hide();
  782.                 if($(this).attr('value') == 1)
  783.                 {
  784.                     $('#produits-recommandes').show();
  785.                 }else if($(this).attr('value') == 2){
  786.                     $('#produits-enregistres').show();
  787.                 }else{
  788.                     $('#produits-nouveaux').show();
  789.                 }
  790.             });
  791.         </script>
  793.         <div id="produits-recommandes" class="owl-carousel text-center carousel-product">
  794.                     
  795.         {% for produit in produit_recommander %}
  796.             {% if produit.ancienPrixProduit > 0 %}
  797.                 {% set taux =  (produit.newprise - produit.ancienPrixProduit)/produit.ancienPrixProduit %}
  798.             {% else %}
  799.                 {% set taux = 0 %}
  800.             {% endif %}
  801.             {% set taux = taux*100 %}
  802.             {% set img = produit.getBestProduit %}
  804.           <div class="item-2">
  805.              <div class="card2">
  806.                 <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" class="card-img-top" style="margin-bottom: -15px; position: relative; z-index: 1;"/>
  807.                 <div class="card-body" style="position: relative; z-index: 2;">
  808.                    <h5 class="card-title"><a href="{{ path('produit_produit_detail_produit_market', {'id': produit.id }) }}">{{ produit.nom }}</a></h5>
  809.                    <p class="card-text">{{ produit.description }}</p>
  810.                    <div class="text-center" style="margin-top: 7px;">
  811.                     <a href="#!" class="open-modal-souscription-offert" value="{{ produit.id }}" name="0"><button type="button" class="button-hover" name="button"> Ajouter <span class="fa fa-plus"></span></button></a>
  812.                    </div>
  813.                 </div>
  814.              </div>
  815.           </div>
  816.         {% endfor %}
  818.         </div>
  819.         
  820.         <script type="text/javascript">
  821.         $('#produits-recommandes').owlCarousel({
  822.             loop:true,
  823.             margin:15,
  824.             nav:true,
  825.             responsive:{
  826.                 0:{
  827.                     items: 1
  828.                 },
  829.                 600:{
  830.                     items: 3
  831.                 },
  832.                 1000:{
  833.                     items: 4
  834.                 }
  835.             },
  836.             navText: ["<img src='{{ asset('template/images/av8a49a4f81c3318dc69d.png') }}'/>","<img src='{{ asset('template/images/avcc910c4ee5888b858fe.png') }}'/>"]
  837.         });
  838.         </script>
  839.         
  840.         <div id="produits-enregistres" class="owl-carousel text-center carousel-product">
  841.                     
  842.         {% for enregistrement in liste_enregistrement %}
  843.         {% set produit = enregistrement.produit %}
  844.         {% if produit.ancienPrixProduit > 0 %}
  845.             {% set taux =  (produit.newprise - produit.ancienPrixProduit)/produit.ancienPrixProduit %}
  846.         {% else %}
  847.             {% set taux = 0 %}
  848.         {% endif %}
  849.         {% set taux = taux*100 %}
  850.         {% set img = produit.getBestProduit %}
  851.           <div class="item-2">
  852.              <div class="card2">
  853.                 <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" class="card-img-top" style="margin-bottom: -15px; position: relative; z-index: 1;"/>
  854.                 <div class="card-body" style="position: relative; z-index: 2;">
  855.                    <h5 class="card-title"><a href="{{ path('produit_produit_detail_produit_market', {'id': produit.id }) }}">{{ produit.nom }}</a></h5>
  856.                    <p class="card-text">{{ produit.contenu }}</p>
  857.                    <div class="text-center" style="margin-top: 7px;">
  858.                     <a href="#!" class="open-modal-souscription-offert" value="{{ produit.id }}" name="0"><button type="button" class="button-hover" name="button"> Ajouter <span class="fa fa-plus"></span></button></a>
  859.                    </div>
  860.                 </div>
  861.              </div>
  862.           </div>
  863.         {% endfor %}
  865.         </div>
  866.         
  867.         <script type="text/javascript">
  868.         $('#produits-enregistres').owlCarousel({
  869.             loop:true,
  870.             margin:15,
  871.             nav:true,
  872.             responsive:{
  873.                 0:{
  874.                     items: 1
  875.                 },
  876.                 600:{
  877.                     items: 3
  878.                 },
  879.                 1000:{
  880.                     items: 4
  881.                 }
  882.             },
  883.             navText: ["<img src='{{ asset('template/images/av8a49a4f81c3318dc69d.png') }}'/>","<img src='{{ asset('template/images/avcc910c4ee5888b858fe.png') }}'/>"]
  884.         });
  885.         </script>
  886.    
  887.         <div id="produits-nouveaux" class="owl-carousel text-center carousel-product">
  888.                     
  889.         {% for i in range(1, 6) %}
  890.           <div class="item-2">
  891.              <div class="card2">
  892.                 <img src="https://consumer-img.huawei.com/content/dam/huawei-cbg-site/common/mkt/list-image/wearables/watch-gt/watch-gt-listimage-black.png" class="card-img-top" style="margin-bottom: -15px; position: relative; z-index: 1;"/>
  893.                 <div class="card-body" style="position: relative; z-index: 2;">
  894.                    <h5 class="card-title">nouveaux</h5>
  895.                    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  896.                    <div class="text-center" style="margin-top: 7px;">
  897.                     <a href="#!" class="open-modal-souscription-offert" value="1" name="0"><button type="button" class="button-hover" name="button"> Ajouter <span class="fa fa-plus"></span></button></a>
  898.                    </div>
  899.                 </div>
  900.              </div>
  901.           </div>
  902.         {% endfor %}
  904.         </div>
  905.         
  906.         <script type="text/javascript">
  907.         $('#produits-nouveaux').owlCarousel({
  908.             loop:true,
  909.             margin:15,
  910.             nav:true,
  911.             responsive:{
  912.                 0:{
  913.                     items: 1
  914.                 },
  915.                 600:{
  916.                     items: 3
  917.                 },
  918.                 1000:{
  919.                     items: 4
  920.                 }
  921.             },
  922.             navText: ["<img src='{{ asset('template/images/av8a49a4f81c3318dc69d.png') }}'/>","<img src='{{ asset('template/images/avcc910c4ee5888b858fe.png') }}'/>"]
  923.         });
  924.         </script>
  925.         
  926.         
  927.        {#
  928.         <h2 class="tab-label">Recommandations</h2>
  929.         <p style="margin: 0px; ">
  930.         <div class="row" style="margin: 0px; ">
  931.                 {% for produit in produit_recommander %}
  932.                 {% if produit.ancienPrixProduit > 0 %}
  933.                     {% set taux =  (produit.newprise - produit.ancienPrixProduit)/produit.ancienPrixProduit %}
  934.                 {% else %}
  935.                     {% set taux = 0 %}
  936.                 {% endif %}
  937.                 {% set taux = taux*100 %}
  938.                 <div class="col-md-4 grid-margin grid-margin-md-0">
  939.                   <a href="{{ path('produit_produit_detail_produit_market', {'id': produit.id }) }}" class="card-view" style="display: inline-block!important; text-decoration: none;">
  940.                     <div class="r-layout">
  941.                         <div class="r-img cm-sm">
  942.                             {% set img = produit.getBestProduit %}
  943.                             <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}">
  945.                         </div>
  946.                         <div class="r-content">
  947.                           <div class="s-tag"><span class="mdi-action-stars"></span></div>
  948.                           <h4 class="title">{{ produit.nom }}</h4>
  949.                           <p>
  950.                               {{ produit.souscategorie.nom }}
  951.                           </p>
  952.                           <div class="taglist">
  953.                               <div class="tag" style="text-decoration: line-through">{{ produit.lastprise }}{{ devise }}</div>
  954.                               <div class="tag">{{ produit.newprise }}{{ devise }}</div>
  955.                               <div class="tag">NIRF</div>
  956.                           </div>
  959.                         </div>
  960.                     </div>
  961.                 </a>
  962.                 </div>
  963.                 {% endfor %}
  964.             </div>
  965.         </p>
  967.         <h2 class="tab-label collapsed">Mes enregistrements</h2>
  968.         <p>
  969.             <div class="row" style="margin: 20px 0px; ">
  970.                 {% for enregistrement in liste_enregistrement %}
  971.                 {% set produit = enregistrement.produit %}
  972.                 {% if produit.ancienPrixProduit > 0 %}
  973.                     {% set taux =  (produit.newprise - produit.ancienPrixProduit)/produit.ancienPrixProduit %}
  974.                 {% else %}
  975.                     {% set taux = 0 %}
  976.                 {% endif %}
  977.                 {% set taux = taux*100 %}
  978.                 <div class="col-md-4 grid-margin grid-margin-md-0">
  979.                   <a href="{{ path('produit_produit_detail_produit_market', {'id': produit.id }) }}" class="card-view" style="display: inline-block!important; text-decoration: none;">
  980.                     <div class="r-layout">
  981.                         <div class="r-img cm-sm">
  982.                             {% set img = produit.getBestProduit %}
  983.                             <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}">
  985.                         </div>
  986.                         <div class="r-content">
  987.                           <div class="s-tag"><span class="mdi-action-stars"></span></div>
  988.                           <h4 class="title">{{ produit.nom }}</h4>
  989.                           <p>
  990.                               {{ produit.souscategorie.nom }}
  991.                           </p>
  992.                           <div class="taglist">
  993.                               <div class="tag" style="text-decoration: line-through">{{ produit.lastprise }}{{ devise }}</div>
  994.                               <div class="tag">{{ produit.newprise }}{{ devise }}</div>
  995.                               <div class="tag">NIRF</div>
  996.                           </div>
  998.                           <p>
  999.                             {{ produit.description }}
  1000.                           </p>
  1001.                           <p class="color-text">
  1002.                               {% if taux > 0 %}Augmentation de{% else %}Réduction de {% endif %}{{ taux|round }}% sur ce produit.
  1003.                           </p>
  1006.                         </div>
  1007.                     </div>
  1008.                 </a>
  1009.                 </div>
  1010.                 {% endfor %}
  1011.             </div>
  1012.         </p>
  1014.         <h2 class="tab-label collapsed">Commandes en cours ...</h2>
  1015.         <p>
  1016.             <div class="row" style="margin: 20px 0px; ">
  1017.                 <div class="col-md-4">
  1018.                   <div class="card-view" style="min-height: 200px; padding: 15px; line-height: 15px; -webkit-box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.05);">
  1019.                       <div class="row">
  1020.                         <div class="col-md-3">
  1021.                             <img class="img-md rounded" src="{{ asset('template/images/icons8-buying-100.png') }}" alt="" style="width: 100%;"/>
  1022.                         </div>
  1023.                         <div class="col-md-9">
  1024.                           <h2 style="font-size: 20px;">Etat de votre panier</h2>
  1025.                           <div style="width: 100px; margin-top: 15px;"><span class="tag">{{ prod_panier|length }} produit(s)</span></div><br/>
  1026.                           {% if prod_panier|length > 0 %}
  1027.                           <a href="{{ path('produit_produit_reglement_commande_du_panier', {'id': oldpanier.id}) }}" class="btn bg-struct">Passer à la caisse</a>
  1028.                           {% else %}
  1029.                           <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place') }}" class="btn bg-struct">Passer à la caisse</a>
  1030.                           {% endif %}
  1031.                         </div>
  1032.                       </div>
  1033.                   </div>
  1034.                 </div>
  1036.                 {% for propan in prod_panier|slice(0,2) %}
  1037.                 {% if propan.produit.ancienPrixProduit > 0 %}
  1038.                     {% set taux =  (propan.produit.newprise - propan.produit.ancienPrixProduit)/propan.produit.ancienPrixProduit %}
  1039.                 {% else %}
  1040.                     {% set taux = 0 %}
  1041.                 {% endif %}
  1042.                 {% set taux = taux*100 %}
  1043.                 <div class="col-md-4 grid-margin grid-margin-md-0">
  1044.                   <a href="{{ path('produit_produit_detail_produit_market', {'id': propan.produit.id }) }}" class="card-view" style="display: inline-block!important; text-decoration: none;">
  1045.                     <div class="r-layout">
  1046.                         <div class="r-img cm-sm">
  1047.                             {% set img = propan.produit.getBestProduit %}
  1048.                             <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}">
  1050.                         </div>
  1051.                         <div class="r-content">
  1052.                           <div class="s-tag"><span class="mdi-action-stars"></span></div>
  1053.                           <h4 class="title">{{ propan.produit.nom }}</h4>
  1054.                           <p>
  1055.                               {{ propan.produit.souscategorie.nom }}
  1056.                           </p>
  1057.                           <div class="taglist">
  1058.                               <div class="tag" style="text-decoration: line-through">{{ propan.produit.lastprise }}{{ devise }}</div>
  1059.                               <div class="tag">{{ propan.produit.newprise }}{{ devise }}</div>
  1060.                               <div class="tag">NIRF</div>
  1061.                           </div>
  1063.                           <p>
  1064.                             {{ propan.produit.description }}
  1065.                           </p>
  1066.                           <p class="color-text">
  1067.                               {% if taux > 0 %}Augmentation de{% else %}Réduction de {% endif %}{{ taux|round }}% sur ce produit.
  1068.                           </p>
  1069.                         </div>
  1070.                     </div>
  1071.                 </a>
  1072.                 </div>
  1073.                 {% endfor %}
  1075.             </div>
  1076.         </p>
  1077.         
  1078.         
  1079.           <h2>Votre partenaire idéal</h2>
  1080.           {% if aproposaccueil != null %}
  1081.             <p>{{ aproposaccueil.valeur }} {% if aproposaccueil.link != null %}<a href="{{ aproposaccueil.link }}" style="color: green;">En savoir plus <span class="fa fa-angle-right"></span></a>{% endif %}</p>
  1082.           {% else %}
  1083.             <p>Aucun article trouvé pour cette section</p>
  1084.           {% endif %}
  1085.         #}
  1087.     </div>
  1089.   </div>
  1091.   </div>
  1092. </section>
  1095. <style>
  1096. .ux-card {
  1097.     -webkit-box-shadow: 0 1px 6px 0 rgba(117,117,117,.25);
  1098.     box-shadow: 0 1px 6px 0 rgba(117,117,117,.25);
  1099.     margin: 0 0 20px;
  1100.     color: #444;
  1101.     border: 0;
  1102.     border-radius: 6px;
  1103.     background: #fff;
  1104.     cursor: pointer;
  1105.     text-align: center!important;
  1106.     height: 400px!important;
  1107.     width: 100%;
  1108. }
  1109. .ux-card:hover{
  1110.   box-shadow: -10px -10px 25px 0px rgba(0,0,0,0.3);
  1111. }
  1114. /**
  1115.  * Helper Styles
  1116.  */
  1117. .ir {
  1118.   text-indent: 100%;
  1119.   white-space: nowrap;
  1120.   overflow: hidden;
  1121. }
  1123. /**
  1124.  * Gallery Styles
  1125.  * 1. Enable fluid images
  1126.  */
  1127. .gallery {
  1128.   overflow: hidden;
  1129. }
  1131. .gallery__hero {
  1132.   overflow: hidden;
  1133.   position: relative;
  1134.   padding: 2em;
  1135.   margin: 0 0 0.3333333333em;
  1136.   background: #fff;
  1137. }
  1138. .is-zoomed .gallery__hero {
  1139.   cursor: move;
  1140. }
  1141. .is-zoomed .gallery__hero img {
  1142.   max-width: none;
  1143.   position: absolute;
  1144.   z-index: 0;
  1145.   top: -50%;
  1146.   left: -50%;
  1147. }
  1149. .gallery__hero-enlarge {
  1150.   position: absolute;
  1151.   right: 0.5em;
  1152.   bottom: 0.5em;
  1153.   z-index: 1;
  1154.   width: 30px;
  1155.   height: 30px;
  1156.   opacity: 0.5;
  1157.   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBmaWxsPSIjMzRCZjQ5Ij48cGF0aCBkPSJNOTMuNTkzIDg2LjgxNkw3Ny4wNDUgNzAuMjY4YzUuNDEzLTYuODczIDguNjQyLTE1LjUyNiA4LjY0Mi0yNC45MTRDODUuNjg3IDIzLjEwNCA2Ny41OTMgNSA0NS4zNDMgNVM1IDIzLjEwNCA1IDQ1LjM1NGMwIDIyLjI0IDE4LjA5NCA0MC4zNDMgNDAuMzQzIDQwLjM0MyA5LjQgMCAxOC4wNjItMy4yNCAyNC45MjQtOC42NTNsMTYuNTUgMTYuNTZjLjkzNy45MjcgMi4xNjIgMS4zOTYgMy4zODggMS4zOTYgMS4yMjUgMCAyLjQ1LS40NyAzLjM5LTEuMzk2IDEuODc0LTEuODc1IDEuODc0LTQuOTEyLS4wMDItNi43ODh6bS00OC4yNS0xMC43MWMtMTYuOTU0IDAtMzAuNzUzLTEzLjc5OC0zMC43NTMtMzAuNzUyIDAtMTYuOTY0IDEzLjgtMzAuNzY0IDMwLjc1My0zMC43NjQgMTYuOTY0IDAgMzAuNzUzIDEzLjggMzAuNzUzIDMwLjc2NCAwIDE2Ljk1NC0xMy43ODggMzAuNzUzLTMwLjc1MyAzMC43NTN6TTYzLjAzMiA0NS4zNTRjMCAyLjM0NC0xLjkwNyA0LjI2Mi00LjI2MiA0LjI2MmgtOS4xNjR2OS4xNjRjMCAyLjM0NC0xLjkwNyA0LjI2Mi00LjI2MiA0LjI2Mi0yLjM1NSAwLTQuMjYyLTEuOTE4LTQuMjYyLTQuMjYydi05LjE2NGgtOS4xNjRjLTIuMzU1IDAtNC4yNjItMS45MTgtNC4yNjItNC4yNjIgMC0yLjM1NSAxLjkwNy00LjI2MiA0LjI2Mi00LjI2Mmg5LjE2NHYtOS4xNzVjMC0yLjM0NCAxLjkwNy00LjI2MiA0LjI2Mi00LjI2MiAyLjM1NSAwIDQuMjYyIDEuOTE4IDQuMjYyIDQuMjYydjkuMTc1aDkuMTY0YzIuMzU1IDAgNC4yNjIgMS45MDcgNC4yNjIgNC4yNjJ6Ii8+PC9zdmc+);
  1158.   background-repeat: no-repeat;
  1159.   transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  1160. }
  1161. .gallery__hero-enlarge:hover {
  1162.   opacity: 1;
  1163. }
  1164. .is-zoomed .gallery__hero-enlarge {
  1165.   background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBmaWxsPSIjMzRCZjQ5Ij48cGF0aCBkPSJNOTMuNTkzIDg2LjgxNkw3Ny4wNDUgNzAuMjY4YzUuNDEzLTYuODczIDguNjQyLTE1LjUyNiA4LjY0Mi0yNC45MTRDODUuNjg3IDIzLjEwNCA2Ny41OTMgNSA0NS4zNDMgNVM1IDIzLjEwNCA1IDQ1LjM1NGMwIDIyLjI0IDE4LjA5NCA0MC4zNDMgNDAuMzQzIDQwLjM0MyA5LjQgMCAxOC4wNjItMy4yNCAyNC45MjQtOC42NTNsMTYuNTUgMTYuNTZjLjkzNy45MjcgMi4xNjIgMS4zOTYgMy4zODggMS4zOTYgMS4yMjUgMCAyLjQ1LS40NyAzLjM5LTEuMzk2IDEuODc0LTEuODc1IDEuODc0LTQuOTEyLS4wMDItNi43ODh6TTE0LjU5IDQ1LjM1NGMwLTE2Ljk2NCAxMy44LTMwLjc2NCAzMC43NTMtMzAuNzY0IDE2Ljk2NCAwIDMwLjc1MyAxMy44IDMwLjc1MyAzMC43NjQgMCAxNi45NTQtMTMuNzkgMzAuNzUzLTMwLjc1MyAzMC43NTMtMTYuOTUzIDAtMzAuNzUzLTEzLjgtMzAuNzUzLTMwLjc1M3pNNTguNzcyIDQ5LjYxSDMxLjkyYy0yLjM1NSAwLTQuMjYzLTEuOTA3LTQuMjYzLTQuMjZzMS45MDgtNC4yNjMgNC4yNjItNC4yNjNINTguNzdjMi4zNTQgMCA0LjI2MiAxLjkwOCA0LjI2MiA0LjI2MnMtMS45MSA0LjI2LTQuMjYyIDQuMjZ6Ii8+PC9zdmc+);
  1166. }
  1168. .gallery__thumbs {
  1169.   text-align: center;
  1170.   background: #fff;
  1171. }
  1172. .gallery__thumbs a {
  1173.   display: inline-block;
  1174.   width: 20%;
  1175.   padding: 0.5em;
  1176.   opacity: 0.75;
  1177.   transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
  1178. }
  1179. .gallery__thumbs a:hover {
  1180.   opacity: 1;
  1181. }
  1182. .gallery__thumbs a.is-active {
  1183.   opacity: 0.2;
  1184. }
  1186. figure.snip1321{
  1187.   font-family: 'Raleway', Arial, sans-serif;
  1188.   position: relative;
  1189.   overflow: hidden;
  1190.   width: 100%;
  1191.   color: #000000;
  1192.   text-align: center;
  1193.   -webkit-perspective: 50em;
  1194.   perspective: 50em;
  1195. }
  1196. figure.snip1321 * {
  1197.   -webkit-box-sizing: padding-box;
  1198.   box-sizing: padding-box;
  1199.   -webkit-transition: all 0.2s ease-out;
  1200.   transition: all 0.2s ease-out;
  1201. }
  1202. figure.snip1321 img {
  1203.   max-width: 100%;
  1204.   vertical-align: top;
  1205. }
  1206. figure.snip1321 figcaption {
  1207.   top: 50%;
  1208.   left: 20px;
  1209.   right: 20px;
  1210.   position: absolute;
  1211.   opacity: 0;
  1212.   z-index: 1;
  1213. }
  1214. figure.snip1321 h2,
  1215. figure.snip1321 h4 {
  1216.   margin: 0;
  1217. }
  1218. figure.snip1321 h2 {
  1219.   font-weight: 600;
  1220. }
  1221. figure.snip1321 h4 {
  1222.   font-weight: 400;
  1223.   text-transform: uppercase;
  1224. }
  1225. figure.snip1321 i {
  1226.   font-size: 32px;
  1227. }
  1228. figure.snip1321:after {
  1229.   background-color: #ffffff;
  1230.   position: absolute;
  1231.   content: "";
  1232.   display: block;
  1233.   top: 20px;
  1234.   left: 20px;
  1235.   right: 20px;
  1236.   bottom: 20px;
  1237.   -webkit-transition: all 0.4s ease-in-out;
  1238.   transition: all 0.4s ease-in-out;
  1239.   -webkit-transform: rotateX(-90deg);
  1240.   transform: rotateX(-90deg);
  1241.   -webkit-transform-origin: 50% 50%;
  1242.   -ms-transform-origin: 50% 50%;
  1243.   transform-origin: 50% 50%;
  1244.   opacity: 0;
  1245. }
  1246. figure.snip1321 a {
  1247.   left: 0;
  1248.   right: 0;
  1249.   top: 0;
  1250.   bottom: 0;
  1251.   position: absolute;
  1252.   z-index: 1;
  1253. }
  1254. figure.snip1321:hover figcaption,
  1255. figure.snip1321.hover figcaption {
  1256.   -webkit-transform: translateY(-50%);
  1257.   transform: translateY(-50%);
  1258.   opacity: 1;
  1259.   -webkit-transition-delay: 0.2s;
  1260.   transition-delay: 0.2s;
  1261. }
  1262. figure.snip1321:hover:after,
  1263. figure.snip1321.hover:after {
  1264.   -webkit-transform: rotateX(0);
  1265.   transform: rotateX(0);
  1266.   opacity: 0.9;
  1267. }
  1268. .item{
  1269.     background: #fff;
  1270.     border: 1px solid #fff;
  1271. }
  1272. .item:hover{
  1273.     background: #f7f7f7;
  1274.     cursor: pointer;
  1275.     box-shadow: 0 4px 10px -6px #0005;
  1276.     border: none;
  1277. }
  1278. </style>
  1280. <div style="background: #f5f7f8; padding-top: 20px;">
  1281. <div class="container">
  1283. <div class="row" style="margin: 0px 0px 15px 0px; background: #fafafa;">
  1284. <div class="col-md-12">
  1285.     <h3 class="breadcrumbs-title">
  1286.      Meilleures ventes {{ site }}
  1288.      <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place') }}" class="flat-busness pull-right" style="margin-top: -7px;">Afficher plus</a>
  1289.     </h3>
  1290.     <hr>
  1291. </div>
  1293. <div class="col-md-12">
  1294. <div  style="overflow: hidden; height: 500px;">
  1295. <link rel="stylesheet" href="{{ asset('template/carousel/css/style.css') }}"/>
  1297. <div class="resCarousel" data-items="1,3,4,4" data-slide="1" style="overflow: visible; padding-left: 0px; padding-right: 0px;">
  1298. <div class="resCarousel-inner">
  1300. {% for prod in top_produit %}
  1301.     {% if prod.ancienPrixProduit > 0 %}
  1302.         {% set taux =  (prod.newprise - prod.ancienPrixProduit)/prod.ancienPrixProduit %}
  1303.     {% else %}
  1304.         {% set taux = 0 %}
  1305.     {% endif %}
  1306.     {% set taux = taux*100 %}
  1308.     <div class="item">
  1309.         <div style="background: #fff; margin-bottom: 5px; padding: 5px;">
  1310.         <h5><a href="{{ path('produit_produit_detail_produit_market', {'id': prod.id }) }}">{{ prod.name(50) }}</a> </h5>
  1311.         <div style="margin-top: 5px;"><span style="text-decoration: line-through; font-size: 12px;">{{ prod.ancienPrixProduit }}</span>{{ devise }} <span>{{ prod.newprise }}</span></div>
  1312.         </div>
  1314.         <div id="" class="js-gallery gallery" style="border: 1px solid #ddd;">
  1315.         <!--Gallery Hero-->
  1316.         <div class="gallery__hero">
  1317.             <span style="background: yellow; color: green; padding: 5px; display: inline-block;">{% if taux > 0 %}+{% else %}-{% endif %}{{ taux|round }}%</span>
  1318.             <a href="#!" class="btn bg-struct  open-modal-souscription-offert" value="{{ prod.id }}" name="0" style="font-size: 10px; padding: 4px 7px!important; height: 25px; line-height: 15px; border-radius: 7px; float: right; text-transform: capitalize;"><span class="mdi-action-add-shopping-cart" style="font-size: 8px;"></span> Ajouter</a>
  1319.             <a href="{{ path('produit_produit_detail_produit_market', {'id': prod.id }) }}" class="gallery__hero-enlarge ir"></a>
  1320.             {% set img = prod.getBestProduit %}
  1321.             <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" style="height: 200px;">
  1322.         </div>
  1324.         <!--Gallery Hero-->
  1326.         <!--Gallery Thumbs-->
  1327.         <div class="gallery__thumbs">
  1328.             {% for imge in prod.imgproduits|slice(0,4) %}
  1329.             <a href="{% if imge != null %}{{ asset(imge.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" data-gallery="thumb" class="item-image-ca">
  1330.               <img src="{% if imge != null %}{{ asset(imge.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" style="height: 40px; width: 40px;">
  1331.             </a>
  1332.             {% endfor %}
  1333.         </div>
  1335.         <!--Gallery Thumbs-->
  1336.         </div>
  1337.     </div>
  1338. {% endfor %}
  1339. </div>
  1340. <button class="btn btn-default leftLst pull-left" style="position: relative; margin-top: -250px; background: #fff; color: #333; padding: 0px;"><i class="fa fa-fw fa-angle-left"></i></button>
  1341. <button class="btn btn-default rightLst pull-right" style="position: relative; margin-top: -250px; background: #fff; color: #333; padding: 0px;"><i class="fa fa-fw fa-angle-right"></i></button>
  1342. </div>
  1344. </div>
  1345. <script type="text/javascript" src="{{ asset('template/carousel/js/main.js') }}"></script>
  1346. </div>
  1348. </div>
  1349. </div>
  1350. </div>
  1353. <section style="padding-top: 20px;">
  1354. <div class="container">
  1355. <h3>Offres spéciales</h3>
  1356. <div class="kapsayici">
  1357. <div class="row">
  1359. {% for offre in liste_offre %}
  1360.     <div class="col-md-4 panel-offer text-right">
  1361.         <div class="slid3">
  1362.             <!-- <span class="emoji"><img src="{{ asset('template/images/smile.png') }}"> <img src="{{ asset('template/images/hearteye.png') }}"></span> -->
  1363.             <a href="{% if offre.link != null %}{{ offre.link }}{% else %}{{ path('produit_produit_tous_produits_souscategorie_binplace_market', {'id': offre.projet.id, 'scat': offre.souscategorie.id }) }}{% endif %}">
  1364.                 <div class="resim3">
  1365.                     <img src="{% if offre.src != 'source' %}{{ asset(offre.getwebpath) }}{% else %}{{ asset('template/images/assistance-bg.jpg') }}{% endif %}"/>
  1366.                     <h2>{{ offre.titre }}</h2>
  1367.                     <p>{{ offre.projet.name(30) }}</p>
  1368.                 </div>
  1369.             </a>
  1370.         </div>
  1371.     </div>
  1372. {% else %}
  1373.     <div class="col-md-12">
  1374.         <div class="text-center" style="height: 400px; padding-top: 100px; background: #fff; display: block; width: 100%!important; border: 1px solid #f4f4f4; border-radius: 5px;">
  1375.             <span class="fa fa-frown-o"></span> Aucune données disponible pour cette requête.</br>
  1376.             <hr style="width: 100px; border-bottom: 1px solid red; display: inline-block;">
  1377.         </div>
  1378.     </div>
  1379. {% endfor %}
  1381. </div>
  1382. </div>
  1383. </div>
  1384. </section>
  1387. <style>
  1388. .owl-theme .owl-nav {
  1389.     text-align: center;
  1390.     -webkit-tap-highlight-color: transparent;
  1391.     position: absolute;
  1392.     top: -40px;
  1393.     right: 0px;
  1394. }
  1395. </style>
  1397. <section style="position: sticky;">
  1398. <div class="container" style="margin-bottom: -20px;">
  1399.     <div class="row">
  1400.         <div class="col-md-12">
  1401.             <div class="text-left" style="margin-bottom: -10px;margin-top: 20px;">
  1402.                 <h2>Appréciés en ce moment</h2>
  1403.                 <p>Consultez les produits les plus appréciés en ce moment dans notre plateforme</p>
  1404.             </div>
  1405.         </div>
  1406.     </div>
  1408.     <div class="row">
  1409.         <div class="col-md-12">
  1410.             <div class="owl-carousel staff-list" style="padding-top: 10px;">
  1411.                 {% for produit in top_produit %}
  1412.                     {% include 'Theme/Produit/Produit/Produit/slideproduitdescript.html.twig' %}
  1413.                 {% endfor %}
  1414.             </div>
  1415.         </div>
  1416.     </div>
  1419.     <script type="text/javascript">
  1420.     $(document).ready(function(){
  1421.       $(".staff-list").owlCarousel({
  1422.           items:4,
  1423.           autoplay:false,
  1424.           margin:30,
  1425.           loop:true,
  1426.           nav:true,
  1427.           responsive:{
  1428.             0:{
  1429.                 items:1,
  1430.                 nav:true
  1431.             },
  1432.             600:{
  1433.                 items:3,
  1434.                 nav:false
  1435.             },
  1436.             1000:{
  1437.                 items:4,
  1438.                 nav:true,
  1439.                 loop:false
  1440.             }
  1441.           },
  1442.           navText:["<i class='fa fa-arrow-left'></i>","<i class='fa fa-arrow-right'></i>" ]
  1444.       });
  1445.     });
  1446.     </script>
  1447. </div>
  1448. </section>
  1451. <style>
  1454. figure.snip1321{
  1455.   font-family: 'Raleway', Arial, sans-serif;
  1456.   position: relative;
  1457.   overflow: hidden;
  1458.   width: 100%;
  1459.   color: #000000;
  1460.   text-align: center;
  1461.   -webkit-perspective: 50em;
  1462.   perspective: 50em;
  1463. }
  1464. figure.snip1321 * {
  1465.   -webkit-box-sizing: padding-box;
  1466.   box-sizing: padding-box;
  1467.   -webkit-transition: all 0.2s ease-out;
  1468.   transition: all 0.2s ease-out;
  1469. }
  1470. figure.snip1321 img {
  1471.   max-width: 100%;
  1472.   vertical-align: top;
  1473. }
  1474. figure.snip1321 figcaption {
  1475.   top: 50%;
  1476.   left: 20px;
  1477.   right: 20px;
  1478.   position: absolute;
  1479.   opacity: 0;
  1480.   z-index: 1;
  1481. }
  1482. figure.snip1321 h2,
  1483. figure.snip1321 h4 {
  1484.   margin: 0;
  1485. }
  1486. figure.snip1321 h2 {
  1487.   font-weight: 600;
  1488. }
  1489. figure.snip1321 h4 {
  1490.   font-weight: 400;
  1491.   text-transform: uppercase;
  1492. }
  1493. figure.snip1321 i {
  1494.   font-size: 32px;
  1495. }
  1496. figure.snip1321:after {
  1497.   background-color: #ffffff;
  1498.   position: absolute;
  1499.   content: "";
  1500.   display: block;
  1501.   top: 20px;
  1502.   left: 20px;
  1503.   right: 20px;
  1504.   bottom: 20px;
  1505.   -webkit-transition: all 0.4s ease-in-out;
  1506.   transition: all 0.4s ease-in-out;
  1507.   -webkit-transform: rotateX(-90deg);
  1508.   transform: rotateX(-90deg);
  1509.   -webkit-transform-origin: 50% 50%;
  1510.   -ms-transform-origin: 50% 50%;
  1511.   transform-origin: 50% 50%;
  1512.   opacity: 0;
  1513. }
  1514. figure.snip1321 a {
  1515.   left: 0;
  1516.   right: 0;
  1517.   top: 0;
  1518.   bottom: 0;
  1519.   position: absolute;
  1520.   z-index: 1;
  1521. }
  1522. figure.snip1321:hover figcaption,
  1523. figure.snip1321.hover figcaption {
  1524.   -webkit-transform: translateY(-50%);
  1525.   transform: translateY(-50%);
  1526.   opacity: 1;
  1527.   -webkit-transition-delay: 0.2s;
  1528.   transition-delay: 0.2s;
  1529. }
  1530. figure.snip1321:hover:after,
  1531. figure.snip1321.hover:after {
  1532.   -webkit-transform: rotateX(0);
  1533.   transform: rotateX(0);
  1534.   opacity: 0.9;
  1535. }
  1536. .item{
  1537.     background: #fff;
  1538.     border: 1px solid #fff;
  1539. }
  1540. .item:hover{
  1541.     border: 1px solid #ddd;
  1542.     background: #f7f7f7;
  1543.     cursor: pointer;
  1544. }
  1545. </style>
  1548. <section style="background: #f4f4f4; padding: 20px 0px;">
  1549. <div class="container">
  1550. <div class="row" style="background: #fafafa; padding: 15px 0px;">
  1551. <div class="col-md-12">
  1552.     <h3 class="breadcrumbs-title">
  1553.      Catalogue {{ site }}
  1554.      
  1555.      <a href="{{ path('produit_produit_catalogue_produits') }}" class="flat-busness" style="margin-top: -7px; float: right;">Afficher plus</a>
  1556.     </h3>
  1557.     <hr style="margin: 0px; "/>
  1558. </div>
  1560. {% for scat in top_scat|slice(0,8) %}
  1561. <div class="col-md-3" style="border-top: 1px solid #f7f7f7; border-left: 1px solid #f7f7f7; border-right: 1px solid #f7f7f7; padding-top: 7px; padding-bottom: 7px;">
  1562.     <a href="{{ path('produit_produit_acceuil_sousdomaine_type_market_place', {'idscat': scat.id }) }}" style="display: block;">
  1563.     <figure class="snip1321">
  1564.         <div style="text-align: center;">
  1565.             <img src="{% if scat.src != null %}{{ asset(scat.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" alt="sq-sample26" style="height: 150px; max-width: 100%;"/>
  1566.         </div>
  1567.       <figcaption><i class="ion-upload"></i>
  1568.         <div>{{ scat.nbproduit }}</div>
  1569.         <div>Produits</div>
  1570.       </figcaption>
  1571.     </figure>
  1572.     <div style="text-align: center; margin-top: -10px; text-decoration: underline;">
  1573.         {{ scat.nom }}
  1574.     </div>
  1575.     </a>
  1576. </div>
  1577. {% endfor %}
  1580. </div>
  1581. </div>
  1582. </section>
  1585. <style>
  1586.     /*** START BS OVERRIDES ***/
  1587.     .features {
  1588.       padding: 50px 0;
  1589.     }
  1590.     .features.light-brown {
  1591.       background-color: #fff;
  1592.       padding: 7px;
  1593.     }
  1594.     .features h2.section-title {
  1595.       color: #333333;
  1596.       font-size: 22px;
  1597.       margin: 0;
  1598.       text-align: center;
  1599.     }
  1600.     .features .v-tabs .v-tab-head a,
  1601.     .features .v-tabs a.v-tab-head {
  1602.       color: #292929;
  1603.       cursor: pointer;
  1604.       display: block;
  1605.       padding: 15px 30px 15px 15px;
  1606.       border-right: 1px solid #33cc66;
  1607.       margin: 0;
  1608.       text-align: right;
  1609.       font: 20px "Raleway", "franklin-gothic-urw", "Helvectica Neue", helvetica, clean, sans-serif;
  1610.     }
  1611.     .features .v-tabs .v-tab-head a.active, .features .v-tabs .v-tab-head a:hover,
  1612.     .features .v-tabs a.v-tab-head.active,
  1613.     .features .v-tabs a.v-tab-head:hover {
  1614.       font-weight: bold;
  1615.       text-decoration: none;
  1616.     }
  1617.     .features .v-tabs .v-tab-head a {
  1618.       position: relative;
  1619.       display: block;
  1620.     }
  1621.     .features .v-tabs .v-tab-head a.active::after, .features .v-tabs .v-tab-head a.active::before {
  1622.       content: "";
  1623.       border-style: solid;
  1624.       border-width: 15px;
  1625.       position: absolute;
  1626.       right: 0;
  1627.       top: 15px;
  1628.       transform: rotate(90deg);
  1629.       -ms-transform: rotate(90deg);
  1630.       -webkit-transform: rotate(90deg);
  1631.       -o-transform: rotate(90deg);
  1632.       -moz-transform: rotate(90deg);
  1633.     }
  1634.     .features .v-tabs .v-tab-head a.active::before {
  1635.       border-color: #3fcf6e transparent transparent;
  1636.     }
  1637.     .features .v-tabs .v-tab-head a.active::after {
  1638.       margin-right: -1px;
  1639.       border-color: #faf8f5 transparent transparent;
  1640.     }
  1641.     .features .v-tabs a.v-tab-head {
  1642.       border: none;
  1643.       padding: 15px 0;
  1644.       text-align: left;
  1645.       position: relative;
  1646.     }
  1647.     .features .v-tabs a.v-tab-head:after {
  1648.       color: #e2dcd6;
  1649.       content: "\f054";
  1650.       font-family: FontAwesome;
  1651.       position: absolute;
  1652.       right: 10px;
  1653.       top: 50%;
  1654.       transform: translateY(-50%);
  1655.       -webkit-transform: translateY(-50%);
  1656.       -moz-transform: translateY(-50%);
  1657.       -o-transform: translateY(-50%);
  1658.     }
  1659.     .features .v-tabs a.v-tab-head.active::after {
  1660.       color: #3c6;
  1661.       content: "\f078";
  1662.     }
  1663.     .features .v-tabs .v-tab-pane {
  1664.       padding: 0 15px;
  1665.     }
  1666.     .features .v-tabs .v-tab-pane ul {
  1667.       list-style: outside none none;
  1668.       margin: 0;
  1669.       padding: 0;
  1670.     }
  1671.     .features .v-tabs .v-tab-pane ul li {
  1672.       border-bottom: 1px solid #e2dcd6;
  1673.       color: #292929;
  1674.       font-size: 16px;
  1675.       padding: 15px 0;
  1676.     }
  1677.     .features .v-tabs .v-tab-pane ul li i {
  1678.       color: #4c81b6;
  1679.       cursor: pointer;
  1680.       font-size: 14px;
  1681.     }
  1682.     .features .v-tabs .v-tab-pane .in {
  1683.       border-top: none;
  1684.       padding-top: 0;
  1685.     }
  1686.     .features .v-tabs .v-tab-pane .popover {
  1687.       border: 1px solid #014d7e !important;
  1688.       border-radius: 0;
  1689.       width: auto;
  1690.       margin: 10px 0 0 0;
  1691.       max-width: 276px;
  1692.       left: auto;
  1693.       box-shadow: none;
  1694.     }
  1695.     .features .v-tabs .v-tab-pane .popover.bottom .arrow {
  1696.       border-bottom-color: #014d7e;
  1697.     }
  1698.     .features .v-tabs .v-tab-pane .popover .popover-content {
  1699.       font-size: 14px;
  1700.       padding: 15px;
  1701.       text-align: center;
  1702.     }
  1704.     @media screen and (max-width: 768px) {
  1705.       .features.light-brown {
  1706.         border-top: 0 none;
  1707.       }
  1708.       .features h2.section-title {
  1709.         font-size: 32px;
  1710.       }
  1711.       .features .v-tabs .v-tab-pane .in {
  1712.         border-top: 1px solid #ddd;
  1713.         border-bottom: 2px solid #ddd;
  1714.       }
  1715.       .features .popover {
  1716.         margin: 10px 5% 0;
  1717.         max-width: none;
  1718.         width: 90%;
  1719.       }
  1720.     }
  1722. </style>
  1723.     
  1724. <link rel="stylesheet" href="{{ asset('template/css/bootstrap-3-3-7.css') }}" />    
  1725.     <section class="benefits-section">
  1726.     <div class="container light-brown features" id="features">
  1728.         <div class="row">
  1729.           <div class="col-xs-12 col-md-12 text-center" style="margin-top: 15px;">
  1730.             <h4 style="display: block!important; width: 100%;"> Produits et points de livraison </h4>
  1731.             <p style="display: block;"> Découvrez nos zones d'exercice et les coûts de livraison dans ces localités. </p>
  1732.           </div>
  1733.         </div>
  1734.         
  1735.         <div class="row v-tabs" style="padding: 15px 0px!important; margin: 15px!important -15px!important; border-radius: 5px;">
  1736.         <div class="col-md-4">
  1737.             
  1738.             <div class="text-inner" style="height: 510px; margin-top: 15px;">
  1739.                 <ul class="newstickerprod" style="height: 450px; bottom: 0px;">
  1740.                     {% for livraison in points_livraison|slice(0,4) %}
  1741.                         {% set img = livraison.produitboutique.produit.getBestProduit %}
  1742.                         <li class="box-slide-top">
  1743.                             <a href="{{ path('produit_produit_detail_produit_market', {'id': livraison.produitboutique.produit.id }) }}" style="display: inline-block!important; height: 100%!important; width: 100%!important; position: sticky;">
  1744.                             <div class="row" style="padding: 4px 2px;">
  1745.                                 <div style="width: 35%!important; padding: 0px 7px;">
  1746.                                     <img src="{% if img != null %}{{ asset(img.getwebpath) }}{% else %}{{ asset('template/images/test.png') }}{% endif %}" style="height: 90%!important; width: 100%!important; display: inline-block;"/>
  1747.                                 </div>
  1748.                                 <div style="width: 65%!important; padding: 0px 7px;">
  1749.                                     <strong class="coustom-my-text" style="display: block;">{% if livraison.produitboutique.nom  != null %}{{ livraison.produitboutique.nom }}{% else %}{{ livraison.produitboutique.produit.nom }}{% endif %}</strong>
  1750.                                     <strong>{% if livraison.produitboutique.newprise  != null %}{{ livraison.produitboutique.newprise }}{% else %}{{ livraison.produitboutique.produit.newprise }}{% endif %}{{ devise }}</strong> - Livraison: {{ livraison.montant }} {{ devise }}<br/>
  1751.                                     {% if livraison.ville != null %}{{ livraison.ville.nom }} <span class="fa fa-angle-right"></span> {% endif %}{{ livraison.quartiertext }}
  1752.                                 </div>
  1753.                             </div>
  1754.                             <span style="position: absolute; right: 7px; bottom: 15px; padding: 2px; border-radius: 5px; background: #f4f4f4;">Consulter</span>
  1755.                             </a>
  1756.                         </li>
  1757.                     {% endfor %}
  1758.                 </ul>
  1759.             </div>
  1760.         </div>
  1761.         <div class="col-sm-3 v-tab-head hidden-xs">
  1762.           {% for ville in liste_ville %}
  1763.             <a class="v-tab-link text-left {% if loop.first %}active{% endif %}" data-target="#coreFeatures-service-{{ ville.id }}"> 
  1764.                 <img src="{% if ville.src != null %}{{ asset(ville.getwebpath) }}{% else %}{{ asset('template/images/logomarket.png') }}{% endif %}" alt="" class="img-thumbnail" style="height: 40px; float: left; margin-right: 7px;"/>
  1765.                 {{ ville.nom }} 
  1766.                 <div style="font-size: 12px; font-weight: normal;">{% if ville.pays != null %}{{ ville.pays.nom }}{% else %}Pays non indiqué{% endif %}</div>
  1767.             </a>
  1768.           {% endfor %}
  1769.         </div>
  1770.           
  1771.         <div class="col-sm-5 v-tab-pane">
  1772.             {% for ville in liste_ville %}
  1773.             <a class="v-tab-head v-tab-link visible-xs {% if loop.first %}active{% endif %}" data-target="#coreFeatures-service-{{ ville.id }}">
  1774.                 {{ ville.nom }}
  1775.             </a>
  1776.             <div id="coreFeatures-service-{{ ville.id }}" class="collapse fade {% if loop.first %}in{% endif %}">
  1777.               <ul>
  1778.                 {% for livraison in ville.coutlivraisons|slice(0,9) %}
  1779.                     <li> {{ livraison.produitboutique.produit.nom }} <i data-toggle="popover" data-placement="bottom" data-content="{{ livraison.produitboutique.produit.nom }}" class="fa fa-question-circle" data-original-title="" title=""></i><a class="pull-right"  href="{{ path('produit_produit_detail_produit_market', {'id': livraison.produitboutique.produit.id }) }}">Consulter</a></li>
  1780.                 {% endfor %}
  1781.               </ul>
  1782.             </div>
  1783.             {% endfor %}
  1784.             
  1785.         </div>
  1787.         </div>
  1788.         
  1789.         <div class="row">
  1790.             <div class="col-md-12 text-center">
  1791.             
  1792.                 <div style="display:flex; justify-content: center; margin-top: 5px; margin-bottom: 20px;">
  1793.                     <a href="{{ path('produit_produit_localisation_popular_points') }}"><button type="button" class="button-hover" name="button">Liste complète <span class="fa fa-angle-right"></span></button></a>
  1794.                 </div>
  1795.         
  1796.             </div>
  1797.         </div>
  1800.     <script type="text/javascript">
  1802.         $(document).ready(function() {
  1804.           $('[data-toggle="popover"]').popover({trigger: 'click'});
  1806.           $('.v-tab-head .v-tab-link').mouseover(tabHandler);
  1807.           $('.v-tab-head.v-tab-link').click(tabHandler);
  1809.         });
  1811.         var tabHandler = function(e) {
  1812.           e.preventDefault();
  1814.           var target = $($(this).data('target')),
  1815.               tabLink = $('.v-tab-link[data-target="' + $(this).data('target') + '"]');
  1816.           
  1817.           tabPanelToShow(tabLink);
  1818.           tabLinkToActivate(target);
  1819.           
  1820.         };
  1822.         var tabPanelToShow = function(elem) {
  1823.           $('.v-tab-link').removeClass('active').parent().find(elem).addClass('active');
  1824.         };
  1826.         var tabLinkToActivate = function(elem) {
  1827.           $('.v-tab-pane').children('div').removeClass('in').parent().find(elem).addClass('in');
  1828.         };
  1830.     </script>
  1831.     </div>
  1832.     </section>
  1835. <style>
  1836. .card-code {
  1837.     position: relative;
  1838.     cursor: pointer;
  1839.     height: 170px;
  1840.     background: url("https://image.freepik.com/free-vector/colorful-gradient-liquid-shapes-background_23-2148250143.jpg"),
  1841.         #ffffff;
  1842.     background-position: center;
  1843.     background-repeat: no-repeat;
  1844.     background-size: cover;
  1845.     border-radius: 25px;
  1846.     margin: 10px;
  1847.     transition: 0.25s ease-in;
  1848. }
  1850. .card-code .overlay-code {
  1851.     position: absolute;
  1852.     top: 0;
  1853.     bottom: 0;
  1854.     width: 100%;
  1855.     height: 170px;
  1856.     background: linear-gradient(
  1857.         120.55deg,
  1858.         rgba(39, 39, 39, 0.38) 0%,
  1859.         rgba(39, 39, 39, 0.2394) 100%
  1860.     );
  1861.     border-radius: 25px;
  1862. }
  1864. .card-code .content-code {
  1865.     position: absolute;
  1866.     bottom: 10px;
  1867.     left: 25px;
  1868. }
  1870. .card-code .content-code h4 {
  1871.     font-family: Ubuntu;
  1872.     font-style: normal;
  1873.     font-weight: bold;
  1874.     font-size: 18px;
  1875.     color: #f2f2f2;
  1876.     margin-bottom: 10px;
  1877.     margin-top: 0;
  1878. }
  1880. .card-code .content-code h6 {
  1881.     font-family: Ubuntu;
  1882.     font-style: normal;
  1883.     font-weight: 500;
  1884.     font-size: 14px;
  1885.     color: #f2f2f2;
  1886.     margin-bottom: 10px;
  1887.     margin-top: 0;
  1888. }
  1890. .card-code .fav {
  1891.     position: absolute;
  1892.     top: 25px;
  1893.     right: 25px;
  1894.     cursor: pointer;
  1895. }
  1897. .card-code .fav i {
  1898.     color: white;
  1899. }
  1901. .card-code:hover {
  1902.     transform: scale(1.05);
  1903. }
  1905. .card-code:hover {
  1906.     background-position: top;
  1907. }
  1909. </style>
  1911. <section style="padding: 20px 0px; margin-bottom: 15px;">
  1912. <div class="container">
  1914.     <div style="background: #f4f4f4; padding: 15px; border-radius: 7px;">
  1915.         {% if aproposaccueil != null %}
  1916.             <h5>{{ aproposaccueil.valeur }}</h5>
  1917.             
  1918.             <div>
  1919.                 {{ aproposaccueil.link|raw }}
  1920.             </div>
  1921.         {% else %}
  1922.             <h2>À propos {{ site }}</h2>
  1923.         {% endif %}
  1924.     </div>
  1926. </div>
  1927. </section>
  1929. {#
  1930. <section style="margin: 15px 0px 30px 0px;">
  1931. <div class="container">
  1932.     <h3>Coupons de réductions</h3>
  1933.     <div class="row">
  1934.         {% for i in range(1,6) %}
  1935.         <div class="col-lg-4 col-md-6 col-sm-12">
  1936.             <div class="card-code">
  1937.                 <div style="font-size: 20px; position: absolute; top: 15px; left: 15px; color: #fff;">-25000 XAF</div>
  1938.                 <div class="overlay-code"></div>
  1939.                 <div class="content-code">
  1940.                     <h4>UI DESIGN COURSE</h4>
  1941.                     <h6>4 Réservations | 13 Places</h6>
  1942.                 </div>
  1943.                 <div class="fav">
  1944.                     <i class="fa fa-heart"></i>
  1945.                 </div>
  1946.             </div>
  1947.         </div>
  1948.         {% endfor %}
  1949.     </div>
  1950. </div>
  1951. </section>
  1952. #}
  1954. <script type="text/javascript">
  1955. var App = (function () {
  1957.   //=== Use Strict ===//
  1958.   'use strict';
  1960.   //=== Private Variables ===//
  1961.   var gallery = $('.js-gallery');
  1963.   //=== Gallery Object ===//
  1964.   var Gallery = {
  1965.     zoom: function(imgContainer, img) {
  1966.       var containerHeight = imgContainer.outerHeight(),
  1967.       src = img.attr('src');
  1969.       if ( src.indexOf('/products/normal/') != -1 ) {
  1970.         // Set height of container
  1971.         imgContainer.css( "height", containerHeight );
  1973.         // Switch hero image src with large version
  1974.         img.attr('src', src.replace('/products/normal/', '/products/zoom/') );
  1976.         // Add zoomed class to gallery container
  1977.         gallery.addClass('is-zoomed');
  1979.         // Enable image to be draggable
  1980.         img.draggable({
  1981.           drag: function( event, ui ) {
  1982.             ui.position.left = Math.min( 100, ui.position.left );
  1983.             ui.position.top = Math.min( 100, ui.position.top );
  1984.           }
  1985.         });
  1986.       } else {
  1987.         // Ensure height of container fits image
  1988.         imgContainer.css( "height", "auto" );
  1990.         // Switch hero image src with normal version
  1991.         img.attr('src', src.replace('/products/zoom/', '/products/normal/') );
  1993.         // Remove zoomed class to gallery container
  1994.         gallery.removeClass('is-zoomed');
  1995.       }
  1996.     },
  1997.     switch: function(trigger, imgContainer) {
  1998.       var src = trigger.attr('href'),
  1999.       thumbs = trigger.siblings(),
  2000.             img = trigger.parent().prev().children();
  2002.       // Add active class to thumb
  2003.       trigger.addClass('is-active');
  2005.       // Remove active class from thumbs
  2006.       thumbs.each(function() {
  2007.         if( $(this).hasClass('is-active') ) {
  2008.           $(this).removeClass('is-active');
  2009.         }
  2010.       });
  2012.       // Reset container if in zoom state
  2013.       if ( gallery.hasClass('is-zoomed') ) {
  2014.         gallery.removeClass('is-zoomed');
  2015.         imgContainer.css( "height", "auto" );
  2016.       }
  2018.       // Switch image source
  2019.       img.attr('src', src);
  2020.     }
  2021.   };
  2023.   //=== Public Methods ===//
  2024.   function init() {
  2026.     // Listen for clicks on anchors within gallery
  2027.     gallery.delegate('.item-image-ca', 'click', function(event) {
  2028.       var trigger = $(this);
  2029.       var triggerData = trigger.data("gallery");
  2031.       if ( triggerData === 'zoom') {
  2032.         var imgContainer = trigger.parent(),
  2033.         img = trigger.siblings();
  2034.         Gallery.zoom(imgContainer, img);
  2035.       } else if ( triggerData === 'thumb') {
  2036.         var imgContainer = trigger.parent().siblings();
  2037.         Gallery.switch(trigger, imgContainer);
  2038.       } else {
  2039.         return;
  2040.       }
  2042.       event.preventDefault();
  2043.     });
  2045.   }
  2047.   //=== Make Methods Public ===//
  2048.   return {
  2049.     init: init
  2050.   };
  2052. })();
  2054. App.init();
  2055. </script>
  2056. {% endblock %}
  2058. {% block javascripttemplate %}
  2060. $(function(){
  2061. {% for infos in app.session.flashbag.get('information') %}
  2062. {% if loop.first %}
  2063.     resetNotif();
  2064.     alertify.alert("{{ infos }}");
  2065. {% endif %}
  2066. {% endfor %}
  2068. $('.open-modal-souscription-offert').click(function(){
  2069.     $('#modal-souscription-offert').modal('show');
  2070.     var id = $(this).attr('value');
  2071.     if($(this).attr('name') == 0)
  2072.     {
  2073.     $(this).attr('name', 1);
  2074.     $('.wait-chargement-content-module').show();
  2075.     $('.content-module-loading').hide();
  2076.     $.post('{{ path('produit_produit_personnaliser_produit_pour_commande') }}',{id: id}, function(data){
  2077.         $('.wait-chargement-content-module').hide();
  2078.         $('.content-module-loading').html(data);
  2079.         $('.content-module-loading').show();
  2080.         $('.open-modal-souscription-offert').attr('name', 0);
  2081.     });
  2082.     }
  2083. });
  2085. });
  2086. {% endblock %}