templates/default/contact.html.twig line 1

Open in your IDE?
  1. {# BASE LOAD #}
  2. {% extends 'base.html.twig' %}
  4. {# TITLE TOP PAGE #}
  5. {% block title %}CPI | Contact{% endblock %}
  7. {# CSS #}
  8. {% block stylesheet %}
  9.     <meta property="og:image" content="{{asset('img/industrialisation/expertise.png')}}">
  10.     <link rel="stylesheet" href="{{ asset('css/contact.css')}}">
  11. {% endblock %}
  13. {# BODY HOME PAGE #}
  14. {% block body %}
  15. <main>
  16.             <div class="accueil">
  17.                 <div class="container text-light">
  18.                     <div class="row pt-5" >
  19.                         <div class="col-12">
  20.                             <div class="row">
  21.                                 <h1 data-aos="fade-right" data-aos-duration="1000" class="opensans_bold_50">Contact</h1>
  22.                                 <div class="col-6">
  23.                                     <div class="traitBlanc"></div>
  24.                                 </div>
  25.                             </div>
  26.                             
  27.                             
  28.                         </div>
  29.                     </div>
  30.                 </div>
  31.             </div>
  32.             <div class="accueil2" style="padding-bottom:40px;">
  33.                 <div class="container">
  35.                     <div class="row">
  36.                         <div class="col-12">
  37.                             <div class="row py-5" >
  38.                                 <h1 data-aos="fade-right" data-aos-duration="1000" class="opensans_bold_40" style="color:#0048FF;">{% trans %}contact-sous-titre{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':119})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  39.                                 <br>
  40.                                 {% if app.request.get('send') == 'success' %}
  41.                                 <h4 style="color:green">{% if app.request.locale == 'fr' %}Votre message a bien été envoyé{% else %}Your message has been sent{% endif %}</h4>
  42.                                 {% endif %}
  43.                                 <form class="py-5" action="{{path('sendFormContact')}}" method="POST">
  44.                                     <div class="formulaire">
  45.                                         <div class="row my-4">
  46.                                             <div data-aos="fade-up" data-aos-duration="1000" class="col">
  47.                                                 <p><b>{% trans %}form-nom{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':97})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  48.                                                 <input type="text" id="nom" name="nom" required>
  49.                                             </div>
  50.                                             <div data-aos="fade-up" data-aos-duration="1500" class="col">
  51.                                                 <p><b>{% trans %}form-prenom{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':98})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  52.                                                 <input type="text" id="prenom" name="prenom" required>
  53.                                             </div>
  54.                                         </div>
  55.                                         <div class="row my-4">
  56.                                             <div data-aos="fade-up" data-aos-duration="1000" class=" col-12">
  57.                                                 <p><b>{% trans %}form-societe{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':99})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  58.                                                 <input type="text" id="societe" name="societe" required>
  59.                                             </div>
  60.                                         </div>
  61.                                         <div class="row my-4">
  62.                                             <div data-aos="fade-up" data-aos-duration="1000" class="col-md-2 col-6">
  63.                                                 <p><b>{% trans %}form-bp{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':100})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b></p>
  64.                                                 <input type="text" id="bp" name="bp">
  65.                                             </div>
  66.                                             <div data-aos="fade-up" data-aos-duration="1500" class="col-md-5 col-6">
  67.                                                 <p><b>{% trans %}form-batiment{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':101})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b></p>
  68.                                                 <input type="text" id="batiment" name="batiment">
  69.                                             </div>
  70.                                             <div  data-aos="fade-up" data-aos-duration="1000"class="col-md-5 col-12">
  71.                                                 <p><b>{% trans %}form-cp{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':102})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b></p>
  72.                                                 <input type="text" id="cp" name="cp">
  73.                                             </div>
  74.                                         </div>
  75.                                         <div class="row my-4">
  76.                                             
  77.                                             <div data-aos="fade-up" data-aos-duration="1500" class="col-md-6 col-8">
  78.                                                 <p><b>{% trans %}form-ville{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':103})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  79.                                                 <input type="text" id="ville" name="ville" required>
  80.                                             </div>
  81.                                             <div data-aos="fade-up" data-aos-duration="2000" class="col-md-6 col-12">
  82.                                                 <p><b>{% trans %}form-Pays{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':104})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b><span style="color:red;">*</span></p>
  83.                                                 <input type="text" id="pays" name="pays" required>
  84.                                             </div>
  85.                                         </div>
  86.                                         <div class="row mb-4">
  87.                                             <div data-aos="fade-up" data-aos-duration="1000" class="col-md-6 col-12">
  88.                                                 <p><b>{% trans %}form-email{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':105})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b><span style="color:red;">*</span></p>
  89.                                                 <input type="email" id="email" name="email" required>
  90.                                             </div>
  91.                                             <div data-aos="fade-up" data-aos-duration="1500" class="col-md-6 col-12">
  92.                                                 <p><b>{% trans %}form-tel{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':106})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b> <span style="color:red;">*</span></p>
  93.                                                 <input type="text" id="telephone" name="telephone" required>
  94.                                             </div>
  95.                                         </div>
  96.                                         <div class="row mb-4">
  97.                                             <div data-aos="fade-up" data-aos-duration="1000" class="col-12">
  98.                                                 <p><b>{% trans %}form-message{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':107})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</b></p>
  99.                                                 <textarea id="message" name="message"></textarea>
  100.                                             </div>
  101.                                         </div>
  102.                                        
  103.                                     </div>
  104.                                     <div class="d-flex flex-md-row flex-column">
  105.                                     
  106.                                         <div class="col-md-6 col-12" data-aos="fade-up" data-aos-duration="1000">
  107.                                             <div class="g-recaptcha" data-sitekey="6Lf0RGEnAAAAAJcwFd-oTX1mAE4Rqr7ENpEHL70L"></div>
  108.                                             <div class="error-message">
  109.                                             {% if app.request.query.has('recaptcha_error') %}
  110.                                                 <span style="color: red;">
  111.                                                  {% if app.request.locale == 'fr' %}La vérification reCAPTCHA a échoué. Veuillez réessayer.{% else %}The reCAPTCHA check failed. Please try again.{% endif %}
  112.                                                 </span>
  113.                                             {% endif %}
  114.                                             </div>
  115.                                         </div>
  117.                                         
  118.                                         <div  class="col-md-6 col-12 " data-aos="fade-up" data-aos-duration="1000"  data-aos="fade-up" data-aos-duration="1000"  >
  119.                                             
  120.                                                 <div class="form-check">
  121.                                                     <input class="form-check-input" type="checkbox" id="flexCheckDefault" name="flexCheckDefault" required>
  122.                                                     <label class="form-check-label" for="flexCheckDefault">
  123.                                                         {% trans %}form-condition1{% endtrans %} {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':108})}}"><button type="button"  style="margin-left:10px;margin-right:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}<a href="{{ path('politique',{'locale':app.request.locale})}}" target="_blank">{% trans %}form-condition2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':109})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</a>
  124.                                                     </label>
  125.                                                 </div>
  126.                                             
  127.                                         
  128.                                         </div>
  129.                                     </div>
  131.                                     <div class="col-12 ">
  132.                                                 <div class="bouton-page-contact">
  133.                                                     <button id="envoyer" type="submit" name="envoyer"> {% if app.request.locale == 'fr' %}Envoyer{% else %}Send{% endif %}</button>
  134.                                                 </div>
  135.                                             </div>
  136.                               
  137.                                 </form>
  139.                               
  140.                                     
  142. <!-- Google reCAPTCHA script -->
  143. <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  144. <script src="https://www.google.com/recaptcha/api.js?hl={{ app.request.locale == 'fr' ? 'fr' : 'en' }}"></script>
  147.                             </div>
  148.                             
  149.                             <div class="row">
  152.                             {% for res in adresses %}
  153.                                 <div class="col-lg-6">
  154.                                     <div class="titre">
  155.                                         <p  data-aos="fade-right" data-aos-duration="1000" > <b>{{res.nom}}</b> </p>
  156.                                         <img  class="img-fluid" src="{{asset('img/contact/Ligne 25.svg')}}" alt="">
  157.                                     </div>
  159.                                     <img  data-aos="fade-up" data-aos-duration="1000" class="img-fluid w-100" src="{{asset('uploads/adresses/'~res.image)}}" style="border-radius:20px" alt="{{res.nom}}">
  160.                                     <div  data-aos="fade-up" data-aos-duration="1000" class="row py-5 noBottom">
  161.                                         <div class="col-12 col-lg-8">
  162.                                             <div class="map">
  163.                                                {{res.map|raw}}
  164.                                             </div>
  165.                                         </div>
  166.                                         <div class="col-12 col-lg-4">
  167.                                             <p style="line-height:24px;"> {% if app.request.locale == 'en' %}{{res.texte1En|raw}}{% else %}{{res.texte1Fr|raw}}{% endif %} </p>
  168.                                         
  169.                                         </div>
  170.                                     </div>
  171.                                     <hr>
  172.                                     <div class="row">
  173.                                         <div class="infos">
  174.                                             <p  data-aos="fade-up" data-aos-duration="1000" >{% if app.request.locale == 'en' %}{{res.texte2En|raw}}{% else %}{{res.texte2Fr|raw}}{% endif %}</p>
  175.                                         </div>
  176.                                     </div>
  177.                                 </div>
  178.                                 {% endfor %}
  182.                                
  183.                             
  184.                             {% if app.user %}
  185.                              <a href="{{path('app_adresses_index')}}"><button class="btn btn-success">Gestion des adresses</button><br><br></a>
  186.                            
  187.                             {% endif %}
  188.                             <div class="row" style="display:none;">
  189.                                 <div class="row py-5">
  190.                                     <h1>{% trans %}contact-sous-titre2{% endtrans %}{% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':120})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  191.                                 </div>
  192.                                 <div class="col-4 col-lg-3">
  193.                                     <div class="carte">
  194.                                         <div class="image-carte">
  195.                                             <img class="img-fluid" src="img/contact/Contact.png" alt="">
  196.                                         </div>
  197.                                         <div class="texte-carte">
  198.                                             <p>Pascale Dine</p>
  199.                                         </div>
  200.                                     </div>
  201.                                 </div>
  202.                               
  203.                                 <div class="col-4 col-lg-3">
  204.                                     <div class="carte">
  205.                                         <div class="image-carte">
  206.                                             <img class="img-fluid" src="img/contact/Contact.png" alt="">
  207.                                         </div>
  208.                                         <div class="texte-carte">
  209.                                             <p>Alexandra Muser</p>
  210.                                         </div>
  211.                                     </div>
  212.                                 </div>
  213.                                 <div class="col-4 col-lg-3">
  214.                                     <div class="carte">
  215.                                         <div class="image-carte">
  216.                                             <img class="img-fluid" src="img/contact/Contact.png" alt="">
  217.                                         </div>
  218.                                         <div class="texte-carte">
  219.                                             <p>Mickael Bazelaire</p>
  220.                                         </div>
  221.                                     </div>
  222.                                 </div>
  223.                                 <div class="col-4 col-lg-3">
  224.                                     <div class="carte">
  225.                                         <div class="image-carte">
  226.                                             <img class="img-fluid" src="img/contact/Contact.png" alt="">
  227.                                         </div>
  228.                                         <div class="texte-carte">
  229.                                             <p>Julien Zins</p>
  230.                                         </div>
  231.                                     </div>
  232.                                 </div>
  233.                                 <div class="col-4 col-lg-3">
  234.                                     <div class="carte">
  235.                                         <div class="image-carte">
  236.                                             <img class="img-fluid" src="img/contact/Contact.png" alt="">
  237.                                         </div>
  238.                                         <div class="texte-carte">
  239.                                             <p>Caroline Delesalle</p>
  240.                                         </div>
  241.                                     </div>
  242.                                 </div>
  243.                             </div>
  245.                                {% if app.user %}
  246.                              
  247.                             <a href="{{path('app_teams_index')}}"><button class="btn btn-warning">Gestion des membres de l'équipe</button></a>
  248.                             {% endif %}
  249.                         </div>
  250.                     </div>
  252.                 </div>
  253.             </div>
  254.              </div>
  259.             {# LES COLLABORATEURS - CSS LIGNE 120 DANS CONTACT.CSS #}
  261.             <section class="section-collaborateur" style="margin-bottom:100px">
  262.             <div class="container">
  263.                 <div class="row">
  264.                     <div class="col-12 col-xl-5">
  265.                         <h1 data-aos="fade-right" data-aos-duration="1000" class="opensans_bold_40">{% trans %}contact-collaborateur{% endtrans %} {% if app.user %}<a href="{{path('app_dictionnaire_edit',{'id':127})}}"><button type="button"  style="margin-left:10px" class="btn btn-warning"><i class="fa-solid fa-pen"></i></button></a>{% endif %}</h1>
  266.                     </div>
  267.                 </div>
  269.                 <div class="row">
  271.                 {% for res in teams %}
  273.                     <div class="col-xl-3 col-12 col-md-6 carte-collaborateur">
  274.                         <div class="carte-image" style="background: url('{{ asset('uploads/teams/'~res.photo) }}');">
  275.                             <div class="carte-texte d-flex align-items-center justify-content-center">
  276.                                 <p>{% if app.request.locale == 'fr' %}{{res.titreFr|raw}}{% else %}{{res.titreEn|raw}}{% endif %}</p>
  277.                             </div>
  278.                         </div>                  
  279.                         <p>{{res.prenom}} {{res.nom}}</p>
  280.                     </div>
  281.                {% endfor %}
  283.                    
  285.                     
  286.                 </div>
  289.             </div>
  291.           
  292.   
  293.               <script>
  294.     const carteImages = document.querySelectorAll('.carte-image');
  296.     carteImages.forEach(carteImage => {
  297.         // Fonction pour gérer l'affichage du texte
  298.         const toggleCarteTexte = () => {
  299.             const carteTexte = carteImage.querySelector('.carte-texte');
  300.             if (carteTexte.style.opacity === '0.7') {
  301.                 carteTexte.style.opacity = '0';
  302.                 carteTexte.style.transform = 'translateY(20px)';
  303.             } else {
  304.                 carteTexte.style.opacity = '0.7';
  305.                 carteTexte.style.transform = 'translateY(0)';
  306.             }
  307.         };
  309.         // Gestion des événements pour les ordinateurs
  310.         carteImage.addEventListener('mouseenter', () => {
  311.             const carteTexte = carteImage.querySelector('.carte-texte');
  312.             carteTexte.style.opacity = '0.7';
  313.             carteTexte.style.transform = 'translateY(0)';
  314.         });
  316.         carteImage.addEventListener('mouseleave', () => {
  317.             const carteTexte = carteImage.querySelector('.carte-texte');
  318.             carteTexte.style.opacity = '0';
  319.             carteTexte.style.transform = 'translateY(20px)';
  320.         });
  322.         // Gestion des événements pour les appareils tactiles
  323.         carteImage.addEventListener('touchend', (e) => {
  324.             e.preventDefault(); // Empêche le comportement par défaut du navigateur
  325.             toggleCarteTexte();
  326.         });
  327.     });
  328. </script>
  329. ``
  332.            
  333.             </section>
  335.         </main>
  338. {% endblock %}