src/Flexy/FrontBundle/Themes/CoWorking/templates/layout.html.twig line 618

  1. <!doctype html>
  2. <html class="no-js" lang="fr">
  3.     
  4. <!-- index28:48-->
  6.   <head>
  7.       <title>{% block title %}Cowork & live{% endblock %}</title>
  8.     {% block metas %}
  9.     {{front.renderSeo|join|raw}}
  10.     {% endblock %}
  11.     
  12.     <link rel="shortcut icon" href="{{asset("themes/coworking/images/logo-black.png")}}" />
  13.     <meta name="format-detection" content="telephone=no" />
  14.     
  15.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
  16.     
  17.     
  18.     <meta
  19.       name="viewport"
  20.       content="width=device-width,initial-scale=1,shrink-to-fit=no,maximum-scale=1"
  21.     />
  22.     <meta charset="UTF-8">
  24.     {% block stylesheets %}
  25.     <style>
  26.         .fa-linkedin {
  27.     color: #ffffff !important;
  28.     font-size: 15px !important;
  29. }
  31. #brochure:hover{
  32.     text-decoration:underline;
  33. }
  37. .text-pdf-btn {
  38.     position: fixed;
  39.     bottom: 145px;
  40.     right: 8px;
  41.     z-index: 9999;
  42.     font-weight: 700;
  43.     font-size: 10px;
  44.     color:black;
  45.   
  46. }
  49. #textForWhatsap {
  50.     position: fixed;
  51.     bottom: 40px;
  52.     right: 90px;
  53.     z-index: 9999;
  54.     font-weight: 700;
  55.     font-size: 10px;
  56.     color:black;
  57.   
  58. }
  59. #textForWhatsap:hover{
  60.      color:#DFB150;
  61. }
  63. .text-pdf-btn:hover{
  64.      color:#DFB150;
  65. }
  67. .pdf-btn {
  68.   position: fixed;
  69.   bottom: 90px;
  70.   right: 20px;
  71.   z-index: 9999;
  72.   width: 60px;
  73.   height: 60px;
  74.   border-radius: 50%;
  75.   background-color: #DFB150;
  76.   display: flex;
  77.   align-items: center;
  78.   justify-content: center;
  79.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  80.   animation: breathePdf 2s ease-in-out infinite;
  81. }
  83. /*Estilos solo al icono whatsapp*/
  84. .pdf-btn i {
  85.   color: #fff;
  86.   font-size: 24px;
  87.   animation: beatPdf 2s ease-in-out infinite;
  88.   text-decoration: none;
  89. }
  93. .whatsapp-btn {
  94.   position: fixed;
  95.   bottom: 20px;
  96.   right: 20px;
  97.   z-index: 9999;
  98.   width: 60px;
  99.   height: 60px;
  100.   border-radius: 50%;
  101.   background-color: #25D366;
  102.   display: flex;
  103.   align-items: center;
  104.   justify-content: center;
  105.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  106.   animation: breathe 2s ease-in-out infinite;
  107. }
  109. /*Estilos solo al icono whatsapp*/
  110. .whatsapp-btn i {
  111.   color: #fff;
  112.   font-size: 24px;
  113.   animation: beat 2s ease-in-out infinite;
  114.   text-decoration: none;
  115. }
  117. /*Estilos con animation contorno respirando*/
  118. @keyframes breathe {
  119.   0% {
  120.     box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  121.   }
  122.   70% {
  123.     box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  124.   }
  125.   100% {
  126.     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  127.   }
  128. }
  130. /*Estilos de animacion del icono latiendo*/
  131. @keyframes beat {
  132.   0% {
  133.     transform: scale(1);
  134.   }
  135.   50% {
  136.     transform: scale(1.2);
  137.   }
  138.   100% {
  139.     transform: scale(1);
  140.   }
  141. }
  146. /*Estilos con animation contorno respirando*/
  147. @keyframes breathePdf {
  148.   0% {
  149.     /*box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);*/
  150.     box-shadow: 0 0 0 0 rgb(218 37 37);
  151.   }
  152.   70% {
  153.     /*box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);*/
  154.     box-shadow: 0 0 0 0 15px rgb(218 37 37);
  155.   }
  156.   100% {
  157.     /*box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);*/
  158.     box-shadow: 0 0 0 0 rgb(218 37 37);
  159.   }
  160. }
  162. /*Estilos de animacion del icono latiendo*/
  163. @keyframes beatPdf {
  164.   0% {
  165.     transform: scale(1);
  166.   }
  167.   50% {
  168.     transform: scale(1.2);
  169.   }
  170.   100% {
  171.     transform: scale(1);
  172.   }
  173. }
  179. .user-btn {
  180.   position: fixed;
  181.  bottom: 160px;
  182.   right: 20px;
  183.   z-index: 9999;
  184.   width: 60px;
  185.   height: 60px;
  186.   border-radius: 50%;
  187.   background-color: #25D366;
  188.   display: flex;
  189.   align-items: center;
  190.   justify-content: center;
  191.   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  192.   animation: breatheUser 2s ease-in-out infinite;
  193. }
  195. /*Estilos solo al icono whatsapp*/
  196. .user-btn i {
  197.   color: #fff;
  198.   font-size: 24px;
  199.   animation: beatUser 2s ease-in-out infinite;
  200.   text-decoration: none;
  201. }
  203. /*Estilos con animation contorno respirando*/
  204. @keyframes breatheUser {
  205.  0% {
  206.     box-shadow: 0 0 0 0 rgba(128, 128, 128, 0.5); /* Grey */
  207.   }
  208.   70% {
  209.     box-shadow: 0 0 0 15px rgba(128, 128, 128, 0); /* Transition to grey, fading out */
  210.   }
  211.   100% {
  212.     box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); /* Fully transparent */
  213.   }
  214. }
  216. /*Estilos de animacion del icono latiendo*/
  217. @keyframes beatUser {
  218.   0% {
  219.     transform: scale(1);
  220.   }
  221.   50% {
  222.     transform: scale(1.2);
  223.   }
  224.   100% {
  225.     transform: scale(1);
  226.   }
  227. }
  235.       #brochure{
  236.            padding-left: 7px!important;
  237.        }
  238.        
  239.        i.fa-regular.fa-map
  240.        {
  241.        padding-left: 15px!important;
  242.        }
  246. /*popup form*/
  249. .popup-btn{
  250.     position: absolute!important;
  251.     top: 55%;
  252.     left: 50%;
  253.     transform: translate(-50%,-50%);
  254. }
  255. .main-btn-rect,
  256. .main-btn-circle{
  257.     position: relative;
  258.     margin: 0;
  259.     font-family: 'Roboto', sans-serif;
  260.     color: #e5c88a;
  261.     /*background-color: rgb(252, 79, 79);*/
  262.     text-transform: uppercase;
  263.     font-size: 25px;
  264.     letter-spacing: 1px;    
  265.     outline: none;
  266.     cursor: pointer;
  267.        
  268.     z-index: 100;
  269. }
  270. .main-btn-rect {
  271.     padding: 10px 80px;
  272.     line-height: 30px;
  273. }
  274. .main-btn-rect:before, 
  275. .main-btn-rect:after{
  276.   position: absolute;
  277.   content: '';
  278.   top:0;
  279.   width: 0%;
  280.   height: 100%;
  281.   background-color: rgba(255, 255, 240, 0.2);
  282.   -webkit-transition: width 0.3s;
  283.   -o-transition: width 0.3s;
  284.   transition: width 0.3s;
  285. }
  286. .main-btn-rect:before {
  287.   left: 0;
  288. }
  289. .main-btn-rect:after {
  290.   right: 0;
  291. }
  292. .main-btn-rect:hover:before, 
  293. .main-btn-rect:hover:after{
  294.   width: 50%;
  295. }
  296. .main-btn-circle{
  297.     height: 40px;
  298.     width: 40px;
  299.     -webkit-border-radius: 50%;
  300.     border-radius: 100%;
  301.     line-height: 40px;
  302.   -webkit-transition: box-shadow 0.3s;
  303.   -o-transition: box-shadow 0.3s;
  304.   transition: box-shadow 0.3s;
  305. }
  306. .main-btn-circle:hover{   
  307.   -webkit-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  308.   -moz-box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  309.   box-shadow: inset 2px 1px 0px 20px rgba(255, 255, 240, 0.2);
  310. }
  311. .popup{
  312.   position: fixed;
  313.     top: 100%;
  314.   width: 100%;
  315.   height: 100%;
  316.   z-index: 10001;
  317. }
  318. .popup.active{
  319.   top:0;
  320.   background-color: rgba(3, 3, 3, 0.98); 
  321.   transition: background-color .6s ,opacity .6s;
  322. }
  323. .popup .main-btn-rect{
  324.   padding: 10px 100px;
  325. }
  326. .popup .popup-content{
  327.   position: absolute;
  328.   top: 50%;
  329.   left: 50%;
  330.   max-height: 568px;
  331.   min-width: 400px;
  332.   margin-top: 150px;
  333.   padding: 25px;
  334.   background-color: #FFFFF0;
  335.   color: #070000;
  336.   -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  337.   box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  338.   -ms-transform: translateX(-50%) translateY(-50%);
  339.   transform: translateX(-50%) translateY(-50%);
  340.   -webkit-transform: translateX(-50%) translateY(-50%);
  341.   -moz-transform: translateX(-50%) translateY(-50%);
  342.   -o-transform: translateX(-50%) translateY(-50%);
  343.   transition: margin .6s;
  344.   -webkit-transition: margin .6s;
  345.   -moz-transition: margin .6s;
  346.   -o-transition: margin .6s;
  347. }
  348. .popup.active .popup-content{
  349.   margin-top: 0px;
  350. }
  351. .popup-content h6{
  352.   display: table;
  353.   font-size: 16px;
  354.   text-align: center;
  355.   margin: 10px auto;
  356.   font-family: 'Roboto',sans-serif;
  357.   text-transform: uppercase;
  358.   font-weight: 100;  
  359. }
  360. .form-group{
  361.     position: relative;
  362.     width: 90%;
  363.     margin: 0px auto;
  364. }
  365. form#send input, form#send textarea{
  366.     position: relative;
  367.     margin-bottom: 5px;
  368.     width: 100%;
  369.     height: 35px;
  370.     font-family: 'RobotoLight', sans-serif;
  371.     text-indent: 20px;
  372.     background-color: transparent;
  373.     outline: 0;
  374.     border: none;
  375.     border-bottom: 1px solid #070000;
  376.     -webkit-transition: border 0.6s;
  377.     -o-transition: border 0.6s;
  378.     transition: border 0.6s;
  379.         font-size: 12px;
  380. }
  381. form#send input:focus,
  382. form#send textarea:focus{
  383.     border-bottom: 1px solid rgb(63, 173, 168); 
  384. }
  385. form#send label{
  386.     position: absolute;
  387.     top: 18px;
  388.     line-height: 28px;
  389.     -webkit-transition: color .5s;
  390.     -o-transition: color .5s;
  391.     transition: color .5s;
  392. }
  393. form#send input:focus + label,
  394. form#send textarea:focus + label{
  395.   color: rgb(63, 173, 168);
  396. }
  397. form#send .txt{
  398.     line-height: 22px;
  399.     left: 2px;
  400. }
  401. form#send .main-btn-rect {
  402. position: relative;
  403.     display: block;
  404.     padding: 3px 20px;
  405.     margin: 0px auto;
  406.     font-size: 14px;
  407.     color: #dfb150;
  408.     border: 1px solid #dfb150;
  410. }
  411. form#send .main-btn-rect i {
  412.     margin-right: 5px;
  413. }
  414. .popup .fade-out{
  415.   position: absolute;
  416.   top: -20px;
  417.   right: -20px;
  418.   text-align: center;
  419.   font-size: 15px;
  420. }
  421. .share-wrap{
  422.     position: absolute;
  423.   display: inline-table;
  424.     top: 67%;
  425.     left: 50%;
  426.     transform: translate(-50%, -50%);
  427.   padding: 15px;
  428.   text-align: center;
  429. }
  430. .share-btn{
  431.   color: #FFFFF0;
  432.   padding: 7px 25px;
  433.   text-decoration: none;
  434.   cursor: pointer;
  435.   font-weight: 100;
  436.   font-size: 14px;
  437.   font-family:'Lobster', sans-serif;
  438.   background-color: rgba(63, 173, 168, .8);
  439.   text-transform: uppercase;
  440.   border-radius: 5px;
  441.   transition: background-color .5s;
  442.   -webkit-transition: background-color .5s;
  443.   -moz-transition: background-color .5s;
  444.   -o-transition: background-color .5s;
  445. }
  446. .share-btn:hover{
  447.   color: #FFFFF0;
  448.   text-decoration: none;
  449.   background-color: rgba(63, 173, 168, 1.0);
  450. }
  452. .resp-sharing-button__link,
  453. .resp-sharing-button__icon {
  454.   display: inline-block
  455. }
  456. .resp-sharing-button__link {
  457.   text-decoration: none;
  458.   color: #fff;
  459.   margin: 2px;
  460. }
  461. .resp-sharing-button {
  462.   border-radius: 5px;
  463.   transition: 25ms ease-out;
  464.   padding: 6px 9px;
  465.   transition: background-color .5s;
  466.   -webkit-transition: background-color .5s;
  467.   -moz-transition: background-color .5s;
  468.   -o-transition: background-color .5s;
  469. }
  470. .resp-sharing-button__icon svg {
  471.   width: 1em;
  472.   height: 1em;
  473.   margin-right: 0.4em;
  474.   vertical-align: top
  475. }
  476. .resp-sharing-button--small svg {
  477.   margin: 0;
  478.   vertical-align: middle
  479. }
  480. .resp-sharing-button__icon,
  481. .resp-sharing-button__icon--solid,
  482. .resp-sharing-button__icon--solidcircle {
  483.   fill: #fff;
  484.   stroke: none
  485. }
  486. .resp-sharing-button--facebook {
  487.   background-color: #3b5998;
  488.   border-color: #3b5998;
  489. }
  490. .resp-sharing-button--facebook:hover,
  491. .resp-sharing-button--facebook:active {
  492.   background-color: #2d4373;
  493.   border-color: #2d4373;
  494. }
  495. .resp-sharing-button--twitter {
  496.   background-color: #55acee;
  497.   border-color: #55acee;
  498. }
  499. .resp-sharing-button--twitter:hover,
  500. .resp-sharing-button--twitter:active {
  501.   background-color: #2795e9;
  502.   border-color: #2795e9;
  503. }
  504. .resp-sharing-button--linkedin {
  505.   background-color: #0077b5;
  506.   border-color: #0077b5;
  507. }
  508. .resp-sharing-button--linkedin:hover,
  509. .resp-sharing-button--linkedin:active {
  510.   background-color: #046293;
  511.   border-color: #046293;
  512. }
  513. @media only screen and (max-width: 768px){
  514.  
  515.   form#send .main-btn-rect {padding: 7px 60px; font-size: 14px;}
  516.   .popup-btn{padding: 7px 60px; font-size: 14px;}
  517.   
  518.   
  519.       .fa-user:before {
  520.         font-size: 20px !important;
  521.         margin-top: 10px;
  522.     }
  523.     
  524.             .popup .fade-out {
  525.             position: absolute;
  526.             top: -22px;
  527.             right: 5px;
  528.             text-align: center;
  529.             font-size: 27px;
  530.         }
  531. }
  534. .popup-content .form-group {
  535.   position: relative;
  536.   margin-bottom: 15px;
  537. }
  539. .popup-content label {
  540.   position: absolute;
  541.   left: 10px;
  542.   top: 50%;
  543.   transform: translateY(-50%);
  544.   color: #999;
  545. }
  547. .popup-content input,
  548. .popup-content textarea {
  549.   padding-left: 35px; /* Make room for the icon */
  550.   width: 100%;
  551.   box-sizing: border-box;
  552. }
  554. .popup-content textarea {
  555.       padding-top: 2px;
  556.        padding-left: 5px;
  557.         height: 65px!important;
  558. }
  560. #txtArea::placeholder {
  561.     font-size: 13px !important; /* Adjust the size as needed */
  562.   padding-left: 10px  !important;
  563.      
  564. }
  566. .popup-content input::placeholder,
  567. .popup-content textarea::placeholder {
  568.   color: #ccc;
  569. }
  571. .popup-content input:focus + label i,
  572. .popup-content textarea:focus + label i {
  573.   color: #333; /* Optional: Change icon color on focus */
  574. }
  576. .popup-content button {
  577.   display: flex;
  578.   align-items: center;
  579. }
  581. .popup-content button i {
  582.   margin-right: 5px;
  583. }
  586. /*popup form*/
  588.     </style>
  589. {% include "@Flexy/FrontBundle/Themes/CoWorking/templates/_head.html.twig" %}
  592.     <!-- Google Tag Manager -->
  593.         <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  594.         new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  595.         j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  596.         'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  597.         })(window,document,'script','dataLayer','GTM-TSKN7LNV');</script>
  598.     <!-- End Google Tag Manager -->
  600. {{ encore_entry_link_tags('frontend') }}
  601.      {% include "@Flexy/FrontBundle/Themes/CoWorking/templates/_stylesheets.html.twig" %}
  602.     
  603.     {% endblock %}
  606.       </head>
  607.     <body>
  608.         <!-- Google Tag Manager (noscript) -->
  609.             <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TSKN7LNV"
  610.             height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
  611.         <!-- End Google Tag Manager (noscript) -->
  614.         {% if app.request.attributes.get("_route") != "single_category_product" %}
  615.        
  616.         {% endif %}
  617.         
  618.          {{ render(path('front_header')) }}
  620.         
  621.         
  622.         
  623.         {% for type, messages in app.flashes %}
  624.             {% for message in messages %}
  626.                 {% if type == "successOrder"%}
  628.                     <!-- Dark Overlay -->
  629.                     <div id="overlayOrderValid" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 9999998;"></div>
  631.                     <!-- Alert Modal -->
  632.                     <div id="myAlertOrderValid" class="alert alert-{{ type }} text-center div-order-valid" role="alert" style="z-index: 9999999; position: absolute; top: 39%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 2%;">
  633.                         <div style="display: flex; justify-content: center; align-items: center;">
  634.                             <img class="img-order-valid" src="{{asset('/uploads/front-images/icon-valid-order.svg')}}" style="margin-top: -5px;">
  635.                         </div>
  636.                         <h5 style="margin-top: 25px;margin-bottom: 25px;">    Merci !</h5>
  637.                         <p style="font-size: 14px;">
  638.                             Vos informations ont été enregistrées avec succès.    <br>
  639.                             Nous vous remercions pour votre message et nous vous répondrons dans les plus brefs délais.    <br>
  640.                             Si vous avez des questions urgentes, n’hésitez pas à nous contacter directement par téléphone ou par e-mail.
  641.                         </p>
  642.                             
  643.                         
  645.                         <button type="button" class="close" style="position: absolute; top: 0px; right: 5px;" data-dismiss="alert" id="btnClose" aria-label="Close">
  646.                             <span aria-hidden="true">&times;</span>
  647.                         </button>
  648.                     </div>
  651.                 {% else %}
  653.                     <div id="myAlert" class="alert alert-{{ type }}" role="alert" style="z-index: 9999999;position: absolute; top: 22%; left: 50%; transform: translate(-50%, -50%);">
  654.                         <i class="fas fa-check-circle"></i>
  655.                         {{message | raw }}
  657.                         <button type="button" class="close" style="position: absolute;top: 0px;right: 5px;" data-dismiss="alert" id="btnClose" aria-label="Close">
  658.                             <span aria-hidden="true">&times;</span>
  659.                         </button>
  661.                     </div>
  663.                 {% endif %}
  664.             {% endfor %}
  665.         {% endfor %}
  666.         
  667.         
  668.         <div style="min-height:700px;" >
  669.         <div class="animate__animated animate__fadeIn" data-turbo-cache="false">
  670.             
  671.             
  672.             
  673.             
  674.         {% block body %}
  678.         
  680.         {% endblock %}
  681.         </div>
  682.         </div>
  683.         
  684.          {#{% for home in doctrine.repository('App\\Flexy\\ShopBundle\\Entity\\Order\\HomePage').findBy({ id: 2 }) %}#}
  685.                     {#  <span>{{home.banner}}</span>#}
  686.                     {#{% endfor %}#}
  687.                     
  688.         {#{% set brochureFrench = doctrine.repository('App\\Flexy\\ShopBundle\\Entity\\Order\\HomePage').findBy({ id: 1 }) %}#}
  689.         
  690.         
  691.         
  692.         
  693.          {#<a href="#" target=”_blank” class="pdf-btn" style="bottom: 130px !important;">   #}
  694.          {#       <div>#}
  695.          {#           <span id="brochure" style="font-size: 10px;color: white;font-weight: 600;">Brochure</span>#}
  696.          {#           <i class="fa-regular fa-masp"></i>#}
  697.          {#           </div>#}
  698.                     
  699.          {#       </a>#}
  700.         
  701.         
  702.         
  703.         
  704.          <a  class="user-btn" style="background-color:#788c80;" data-popup="popup-reg" >
  705.           <i class="fa fa-user"></i>
  706.         </a>
  708.                 {% for home in doctrine.repository('App\\Flexy\\ShopBundle\\Entity\\Order\\HomePage').findBy({ id: 1 }) %}
  709.                       
  710.                     
  711.         <a href="/uploads/coworking/brochure-pdf/{{home.banner}}" target=”_blank” class="pdf-btn">
  712.           {% endfor %}
  713.             <div>  
  714.             <span id="brochure" style="font-size: 10px;color: white;font-weight: 600;">Brochure</span>
  715.             <i class="fa-regular fa-map"></i>
  716.             </div>
  717.             
  718.         </a>
  719.           {% set textWhatsap ="Bonjour, est-ce que je pourrais avoir plus d’informations sur cowork&live ?" %}
  720.           
  721.          
  722.             {% for home in doctrine.repository('App\\Flexy\\ShopBundle\\Entity\\Order\\HomePage').findBy({ id: 1 }) %}
  723.                       
  724.                 <a href="https://api.whatsapp.com/send?phone={{home.whatsapp}}&text={{textWhatsap}}" target=”_blank” class="whatsapp-btn">
  725.                   <i class="bi bi-whatsapp"></i>
  726.                 </a>
  727.                 
  728.              {% endfor %}
  729.             <div>  
  730.         
  731.         
  732.         
  733.         
  734.         <div id="popup-reg" class="popup">
  735.           <div class="popup-content">
  736.                     <div class="event-header">
  737.                       <h6>Écrivez-nous</h6>
  738.                     </div>
  739.                     <form id="send" class="send-form" action="{{path('sendEmailFromNewLead')}}" method="POST">
  740.                         
  741.                   <div class="form-group">
  742.                     <label for="name">
  743.                       <i class="fa fa-user" id="forPopup"></i>
  744.                     </label>
  745.                     <input type="text" placeholder="Nom complet ..." id="name" name="nom" required="required">
  746.                   </div>
  747.                   <div class="form-group">
  748.                     <label for="phone">
  749.                       <i class="fa fa-phone"></i>
  750.                     </label>
  751.                     <input type="tel" placeholder="Téléphone ..." id="phone"  name="tel" required="required">
  752.                   </div>
  753.                   <div class="form-group">
  754.                     <label for="mail">
  755.                       <i class="fa fa-envelope"></i>
  756.                     </label>
  757.                     <input type="email" placeholder="Email ..." id="mail" name="email" required="required">
  758.                   </div>
  759.                   <div class="form-group">
  760.                         <label for="text">
  761.                           <i class="fa fa-commenting"></i>
  762.                         </label>
  763.                         <textarea rows="4" id="txtArea" placeholder="Message ..." name="message" id="text" required="required"></textarea>
  764.                       </div>
  765.                          {#<i class="fa fa-paper-plane"></i><input class="float" type="submit" class="main-btn-rect" name="text" value="Envoyer">#}
  766.                         
  767.                     <div class="row">
  768.                         <div class="col-12" style="text-align: center;">
  769.                             <input class="float" type="submit"   value="Envoyer" style="text-indent: 0px;border: none; background-color: rgba(0, 0, 0, 1); color: rgba(255, 255, 255, 1); text-transform:uppercase; letter-spacing:3px; font-size:12px; font-family:'PT Sans', sans-serif; height: 45px; width: 180px;">
  770.                         </div>
  771.                     </div>
  772.                     </form>
  773.                     <span class="fade-out main-btn-circle" style="font-weight:900;">╳</span>
  774.           </div>
  775.         </div>
  776.         
  777.         
  778.         
  779.         
  780.         
  781.         
  782.         
  783.         
  784.         
  785.         {{ render(path('front_footer')) }}
  787.         {% block javascripts %}
  788.          
  789.             
  790.             {% include "@Flexy/FrontBundle/Themes/CoWorking/templates/_javascripts.html.twig" %}
  791.             
  792.             
  793.            
  794.         {% endblock %}
  795.        
  796.         <script>
  797.         
  798.         
  799.         $(document).ready(function(){
  800.  
  801.   $('.user-btn').click(function(){ 
  802.          
  803.     var popupBlock = $('#'+$(this).data('popup'));
  804.     popupBlock.addClass('active')
  805.       .find('.fade-out').click(function(){
  806.         popupBlock.css('opacity','0').find('.popup-content').css('margin-top','350px');        
  807.         setTimeout(function(){
  808.           $('.popup').removeClass('active');
  809.           popupBlock.css('opacity','').find('.popup-content').css('margin-top','');
  810.         }, 600);
  811.       });
  812.  });
  813.  
  814.  
  815.  
  816.      $("#btnClose").click(function () {
  817.         $("#myAlert").fadeOut();
  818.         $("#myAlertOrderValid").fadeOut();
  819.         $("#overlayOrderValid").fadeOut();
  820.       });
  822.  
  823. });
  824.         
  825.         
  826.         
  827.              function redirectToSelectedURL() {
  828.                 
  829.                 var selectElement = document.getElementById("combo");
  830.                 var selectedValue = selectElement.value;
  831.               
  832.                 // Check if a valid option is selected
  833.                 if (selectedValue !== "") {
  834.                   window.location.href = selectedValue;
  835.                 }
  836.               }
  837.            
  838.         </script>
  839.     </body>
  841. </html>