templates/contact/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}SVS - CONTACT{% endblock %}
  5. {% block logo %} <!--script></script--> {% endblock %}
  7. {% block body %}
  8. <style>
  9. main {
  10. }
  12. header {
  13.     box-shadow:0 0 3px 0 rgba(0,0,0,0.22)!important;
  14. }
  16. footer {
  17.     display:none!important;
  18. }
  19. .footerend {
  20.     display:none!important;
  21. }
  23. .svsContact {
  24.     min-height:100vh;
  25.     padding:130px 7% 30px;
  26.     background-image:
  27.     linear-gradient(to top, #2d42751c, #ffffff 23%, transparent 100%), 
  28.         linear-gradient(to bottom, rgb(255 255 255 / 74%), rgb(255 157 28 / 12%) 0%, transparent 61%);
  30.     background-position: center;
  31.     background-repeat: repeat;
  32.     background-size: cover;
  33.     background-attachment: fixed;
  34.     background-image:
  35.     linear-gradient(to left, rgba(255, 255, 255, 0), rgb(250 246 239 / 51%) 52%),
  36.         url('{{asset("")}}')
  37. }
  39. .svs_contact_content {
  40.     display:flex;
  41.     justify-content:space-between;
  42.     align-items:stretch;
  43. }
  45. .groupeSvsForm {
  46.     width:50%;
  47. }
  49. .svs_contact_pic {
  50.     width:46%;
  51.     display:flex;
  52.     flex-flow:wrap;
  53.     justify-content:center;
  54.     align-items:center;
  55.     margin-bottom:4%;
  56.     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  57.     background-position: center;
  58.     background-repeat: repeat;
  59.     background-size: cover;
  60.     background-image:
  61.         linear-gradient(to left, rgba(255, 255, 255, 0), rgb(250 246 239) 52%),
  62.         url('{{asset("")}}');
  63.     background-color:whitesmoke;
  64. }
  66. .svs_contact_pic ul {
  67.     padding:20px;
  68.     width:50%;
  69. }
  71. .choiceForm {
  72.     width:initial;
  73.     display:flex;
  74.     justify-content:space-between;
  75.     align-items:center;
  76.     flex-flow:wrap;
  77.     margin-bottom:20px;
  78.     padding-bottom:10px;
  79. }
  81. .choiceForm span,.choiceForm a {
  82.     font-size:13px!important;
  83.     border-radius:3px;
  84.     width:32%;
  85.     padding:7px;
  86.     color:#444444;
  87.     display:inline-block;
  88.     box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  89.     font-weight:500;
  90.     text-align:center;
  91.     border:solid 2px transparent;
  92. }
  94. .groupeSvsForm form {
  95.     width:100%;
  96.     min-height:calc(100% - 82px);
  97.     display:flex;
  98.     flex-direction:column;
  99.     justify-content:space-between;
  100. }
  102. .groupeSvsForm form .svsInput {
  103.     width:100%;
  104.     display:none;
  105. }
  107. .groupeSvsForm form .svsInput .lab {
  108.     width:100%;
  109.     display:flex;
  110.     justify-content:space-between;
  111.     margin-bottom:20px;
  112. }
  114. .groupeSvsForm form .svsInput .lab input,.groupeSvsForm form .svsInput .lab select {
  115.     width:48%;
  116.     padding:6px 12px;
  117.     outline:0;
  118.     border:solid 2px white;
  119.     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  120. }
  122. .groupeSvsForm form .svsInput .lab input:focus,.groupeSvsForm form .svsInput .lab textarea:focus {
  123.     border-color:#2d4275;
  124.     border-radius:5px;
  125. }
  128. .groupeSvsForm form .svsInput .lab textarea {
  129.     width:      100%;
  130.     min-height: 100px;
  131.     max-height: 120px;
  132.     min-width:  100%;
  133.     max-width:  100%;
  134.     padding:6px 12px;
  135.     outline:0;
  136.     border:solid 2px white;
  137.     box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  138. }
  140. .groupeSvsForm form button {
  141.     width:200px;
  142.     background-color:#2d4275;
  143.     color:whitesmoke;
  144.     font-weight:500;
  145.     min-height:40px;
  146.     font-size:17px;
  147.     letter-spacing:0.3px;
  148.     line-height:1.5;
  149.     border:0;
  150.     border-radius:4px;
  151.     
  152. }
  154. .choiceFormActive {
  155.     background-color:#ffffff!important;
  156.     color:#2d4275!important;
  157.     font-weight:700!important;
  158.     box-shadow:#f1ab2678 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px!important;
  159.     border:solid 2px #ff9d1c!important;
  160. }
  163. .svsInputActive {
  164.     display:block!important;
  165. }
  167. .inputFile {
  168.     display: inline-block;
  169.     background-color: #2d4275;
  170.     color: #fff;
  171.     cursor: pointer;
  172. }
  174. .activeLink {
  175.         color: white!important;
  176.         background-color: #2d4275;
  177.         padding: 2px 8px!important;
  178.         border-radius: 5px;
  179. }
  181.     .navbar-title img {
  182.         transform:scale(1)!important;
  183.     }
  186.     .svsGalerieTitle {
  187.         font-size: 24px;
  188.         color: #2d4275;
  189.         line-height: 1.5;
  190.         font-weight: 600;
  191.         padding-bottom: 8px;
  192.         position: relative;
  193.         width: fit-content;
  194.     }
  196.     .svsGalerieTitle i {
  197.         font-size:24px;
  198.         color:#2d4275;
  199.     }
  201.     @media screen and (max-width: 767.9px) {
  202.         .svsGalerieTitle {
  203.             font-size: 22px!important;
  204.         }
  205.     }
  207.     .groupe_svsTitle .typed-home-about span {
  208.         font-size:24px;
  209.     }
  212.     @keyframes moveInCircle {
  213.     0% {
  214.         transform:scale(1);
  215.     }
  216.     25% {
  217.         transform:scale(1.35);
  218.     }
  219.     50% {
  220.         transform:scale(1.65);
  221.     }
  222.     75% {
  223.         transform:scale(1.35);
  224.     }
  225.     97% {
  226.         transform:rotateY(180deg);
  227.     }
  228.     100% {
  229.         transform:scale(1) rotateY(360deg);
  230.     }
  231. }
  234. @media screen and (min-width:1280px) {
  235.     .aDesactiver {
  236.         display:none!important;
  237.     }
  238. }
  240. .li1 {
  241.     font-weight:700;
  242.     color:#2d4275;
  243. }
  245. .li3 {
  246.     font-size:12px;
  247.     font-weight:600;
  248.     color:#676767;
  249.     display:flex;
  250.     align-items:center;
  251. }
  253. .li3 i {
  254.     color:rgb(255, 157, 28);
  255.     padding-right:7px;
  256. }
  258. .flash-notice {
  259.     position:absolute;
  260.     width: 100%;
  261.     height: 80px;
  262.     top: 0;
  263.     left: 0;
  264.     z-index: 10303040;
  265.     background-color: #509c2ce8;
  266.     color: white;
  267.     font-size: 16px;
  268.     display: flex;
  269.     justify-content: flex-start;
  270.     align-items: center;
  271.     padding: 0 7%;
  272. }
  274. .flash-notice i {
  275.     font-size:inherit;
  276.     color:inherit;
  277.     padding-right:7px;
  278. }
  279. </style>
  282. <!-- SVS contact !-->
  283. <div class="svsContact">
  284.     <div class="svsTitle" style="height:130px">
  285.         <div class="groupe_svsTitle">
  286.             <h3 class="typed-home-about typed_contact"></h3>
  287.         </div>
  288.     </div>
  290.     <!-- SVS contact content !-->
  291.     <div class="svs_contact_content">
  293.         <!-- SVS groupe Svs form !-->
  294.         <div class="groupeSvsForm">
  296.             <!-- SVS choice Form !-->
  297.             <div class="choiceForm">
  298.                 <!--span id="contact">Information</span-->
  299.                 {% if uri2 == '' %}
  300.                     <a id="devis" class="choiceFormActive">{{'Demander un'|trans}} <br class="aDesactiver"> {{'devis'|trans}}</a>
  301.                     <a href="contact/reclamation" id="reclamation">{{'Envoyer une'|trans}} <br class="aDesactiver"> {{'réclamation'|trans}}</a>
  302.                     <a href="contact/candidature" id="postuler">{{'Déposer sa'|trans}} <br class="aDesactiver"> {{'candidature'|trans}}</a>
  303.                 {% endif %}
  305.                 {% if uri2 == 'reclamation' %}
  306.                     <a href="/contact" id="devis">{{'Demander un'|trans}} <br class="aDesactiver"> {{'devis'|trans}}</a>
  307.                     <a id="reclamation" class="choiceFormActive">{{'Envoyer une'|trans}}  {{'réclamation'|trans}}</a>
  308.                     <a href="/contact/candidature" id="postuler">{{'Déposer sa'|trans}} <br class="aDesactiver"> {{'candidature'|trans}}</a>
  309.                 {% endif %}
  311.                 {% if uri2 == 'candidature' %}
  312.                     <a href="/contact" id="devis">{{'Demander un'|trans}} <br class="aDesactiver"> {{'devis'|trans}}</a>
  313.                     <a href="/contact/reclamation" id="reclamation">{{'Envoyer une'|trans}} <br class="aDesactiver"> {{'réclamation'|trans}}</a>
  314.                     <a id="postuler" class="choiceFormActive">{{'Déposer sa'|trans}} <br class="aDesactiver"> {{'candidature'|trans}}</a>
  315.                 {% endif %}
  317.             </div>
  321. {% for message in app.flashes('notice') %}
  322.     <div class="flash-notice">
  323.         <i class="fas fa-paper-plane"></i>  {{ message }}
  324.     </div>
  325. {% endfor %}
  328.             <!-- SVS Form !-->
  329.             {% if uri2 == '' %}
  330.                 <form method="post">
  331.                     {{ form_start(formulaire) }}
  332.                     <!-- SVS Form input 1 !-->
  333.                     <div style="height:max-content">
  334.                         <div class="svsInput svsInputActive" id="svsInput_contact">
  335.                             <div class="lab">
  336.                                 {{ form_widget(formulaire.nomcomplet) }}
  337.                                 {{ form_widget(formulaire.phone) }}
  338.                             </div> 
  340.                             <div class="lab">
  341.                                 {{ form_widget(formulaire.activite) }}
  342.                                 {{ form_widget(formulaire.email) }}
  343.                             </div>
  345.                             <div class="lab">
  346.                                 {{ form_widget(formulaire.prestation) }}
  347.                                 {{ form_widget(formulaire.personne) }}
  348.                             </div>
  350.                             <div class="lab">
  351.                                 {{ form_widget(formulaire.message) }}
  352.                             </div>
  353.                         </div>
  354.                     </div>
  355.                     {{ form_end(formulaire) }}
  356.                 </form>
  357.             {% elseif uri2 == 'reclamation' %}
  358.                 <form method="post">
  359.                     {{ form_start(formulaire) }}
  360.                     <!-- SVS Form input 2 !-->
  361.                     <div style="height:max-content">
  362.                         <div class="svsInput svsInputActive" id="svsInput_contact">
  363.                             <div class="lab">
  364.                                 {{ form_widget(formulaire.nomcomplet) }}
  365.                                 {{ form_widget(formulaire.phone) }}
  366.                             </div> 
  368.                             <div class="lab">
  369.                                 {{ form_widget(formulaire.activite) }}
  370.                                 {{ form_widget(formulaire.email) }}
  371.                             </div>
  373.                             <div class="lab">
  374.                                 {{ form_widget(formulaire.objet) }}
  375.                                 {{ form_widget(formulaire.personne) }}
  376.                             </div>
  378.                             <div class="lab">
  379.                                 {{ form_widget(formulaire.message) }}
  380.                             </div>
  381.                         </div>
  382.                     </div>
  383.                     {{ form_end(formulaire) }}
  384.                 </form>
  385.             {% elseif uri2 == 'candidature' %}
  386.                 <form method="post">
  387.                     {{ form_start(formulaire) }}
  388.                     <!-- SVS Form input 3 !-->
  389.                     <div style="height:max-content">
  390.                         <div class="svsInput svsInputActive" id="svsInput_contact">
  391.                             <div class="lab">
  392.                                 {{ form_widget(formulaire.nomcomplet) }}
  393.                                 {{ form_widget(formulaire.phone) }}
  394.                             </div> 
  396.                             <div class="lab">
  397.                                 {{ form_widget(formulaire.niveau) }}
  398.                                 {{ form_widget(formulaire.email) }}
  399.                             </div>
  401.                             <div class="lab">
  402.                                 {{ form_widget(formulaire.taille) }}
  403.                                 {{ form_widget(formulaire.dob) }}
  404.                             </div>
  406.                             <div class="lab">
  407.                                 {{ form_widget(formulaire.message) }}
  408.                             </div>
  409.                         </div>
  410.                     </div>
  411.                     {{ form_end(formulaire) }}
  412.                 </form>
  413.             {% endif %}
  416.         </div>
  418.         <!-- SVS contact pic !-->
  419.         <div class="svs_contact_pic">
  420.             <ul>
  421.                 <li class="li1">Direction générale</li>
  422.                 <li>11 Chemin doudou mokhtar <br> Ben aknoun - Alger</li>
  423.                 <li class="li3"><i class="fas fa-phone"></i> 023 38 14 55</li>
  424.                 <li class="li3"><i class="fas fa-envelope-open"></i> contact@svs-dz.com</li>
  425.             </ul>
  427.             <ul>
  428.                 <li class="li1">Département RH</li>
  429.                 <li>Cité des travailleurs <br> Dar El Beida - Alger</li>
  430.                 <li class="li3"><i class="fas fa-phone"></i> 023 74 72 80</li>
  431.                 <li class="li3"><i class="fas fa-envelope-open"></i> drhsvs@svs-dz.com</li>
  432.             </ul>
  434.             <ul>
  435.                 <li class="li1">Bureau régional OUEST</li>
  436.                 <li>66 Logements LSP <br> Bir djir - Oran</li>
  437.                 <li class="li3"><i class="fas fa-phone"></i> 044 64 72 53</li>
  438.                 <li class="li3"><i class="fas fa-envelope-open"></i> coordinateurouestsvs@svs-dz.com</li>
  439.             </ul>
  441.             <ul>
  442.                 <li class="li1">Bureau régional EST</li>
  443.                 <li>Cité makam el chahid <br> Section3 - Setif</li>
  444.                 <li class="li3"><i class="fas fa-phone"></i> 036 61 05 75</li>
  445.                 <li class="li3"><i class="fas fa-envelope-open"></i> coordinateurestsvs@svs-dz.com</li>
  446.             </ul>
  447.         </div>
  449.     </div> <!-- end SVS contact content !-->
  450. </div><!-- SVS contact !-->
  452. {% if uri2 == '' %}
  453.     <script>
  454.     var typed_contact = new Typed('.typed_contact', {
  455.         strings: [  '{{"Nous sommes à votre écoute"|trans}},<br><span>{{"pour un devis, une candidature"|trans}} {{"ou nous contacter"|trans}}</span>',
  456.                 ],
  457.         typeSpeed: 15,
  458.         startDelay: 250,
  459.         backDelay: 2500,
  460.         loop: false,
  461.         cursorChar: '<i class="fas fa-circle"></i>',
  462.         onComplete: function() {
  463.             // Callback appelé lorsque la frappe est terminée
  464.             var cursor = document.querySelector('.typed-cursor i');
  465.             if (cursor) 
  466.             {
  467.                 cursor.setAttribute('style', 'font-size:21px!important;margin:0'); // Ajouter la classe pour la transition
  468.             }
  469.         },
  470.     });
  471.     </script>
  472. {% endif %}
  474. {% if uri2 == 'reclamation' %}
  475.     <script>
  476.     var typed_contact = new Typed('.typed_contact', {
  477.         strings: [  '{{"Nous sommes à votre écoute"|trans}},<br><span>{{"Envoyer votre réclamation"|trans}}</span>',
  478.                 ],
  479.         typeSpeed: 15,
  480.         startDelay: 250,
  481.         backDelay: 2500,
  482.         loop: false,
  483.         cursorChar: '<i class="fas fa-circle"></i>',
  484.         onComplete: function() {
  485.             // Callback appelé lorsque la frappe est terminée
  486.             var cursor = document.querySelector('.typed-cursor i');
  487.             if (cursor) 
  488.             {
  489.                 cursor.setAttribute('style', 'font-size:21px!important;margin:0'); // Ajouter la classe pour la transition
  490.             }
  491.         },
  492.     });
  493.     </script>
  494. {% endif %}
  496. {% if uri2 == 'candidature' %}
  497.     <script>
  498.     var typed_contact = new Typed('.typed_contact', {
  499.         strings: [  '{{"Nous sommes à votre écoute"|trans}},<br><span>{{"Déposer votre candidature"|trans}}</span>',
  500.                 ],
  501.         typeSpeed: 15,
  502.         startDelay: 250,
  503.         backDelay: 2500,
  504.         loop: false,
  505.         cursorChar: '<i class="fas fa-circle"></i>',
  506.         onComplete: function() {
  507.             // Callback appelé lorsque la frappe est terminée
  508.             var cursor = document.querySelector('.typed-cursor i');
  509.             if (cursor) 
  510.             {
  511.                 cursor.setAttribute('style', 'font-size:21px!important;margin:0'); // Ajouter la classe pour la transition
  512.             }
  513.         },
  514.     });
  515.     </script>
  516. {% endif %}
  520.     <script>
  521.         // Sélectionnez l'élément avec la classe "flash-notice"
  522.         var flashNotice = document.querySelector('.flash-notice');
  524.         // Vérifiez si l'élément existe
  525.         if (flashNotice) {
  526.             // Utilisez setTimeout pour masquer l'élément après 1 minute (60 000 millisecondes)
  527.             setTimeout(function() {
  528.                 flashNotice.setAttribute("style", "transform:translateY(-100%);transition:3s");
  529.             }, 3000); // 60 000 millisecondes équivalent à 1 minute
  530.         }
  531.     </script>
  532. {% endblock %}