templates/frontoffice_bundle/utilisateur/inscription.html.twig line 1

  1. {% extends "frontoffice_bundle/base.html.twig" %}
  2. {% block body %}
  3. <style>
  4. .page-header {
  5.     background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("{{ asset("/bundles/Frontoffice/img/contact2.jpg")}}");
  6.     background-position: top;
  7.     background-repeat: no-repeat;
  8.     background-size: cover;
  9. }
  11. .login_btn a:hover,
  12. .login_btn a:focus {
  13. color:#3333335c !important;
  14. font-size: 16px;
  15. }
  17. .loginBtn {
  18.     box-sizing: border-box;
  19.     position: relative;
  20.     /* width: 13em;  - apply for fixed size */
  21.     margin: 0.2em;
  22.     padding: 0 15px 0 46px;
  23.     border: none;
  24.     text-align: left;
  25.     line-height: 34px;
  26.     white-space: nowrap;
  27.     border-radius: 0.2em;
  28.     font-size: 16px;
  29.     color: #FFF;
  30.   }
  31.   .loginBtn:before {
  32.     content: "";
  33.     box-sizing: border-box;
  34.     position: absolute;
  35.     top: 0;
  36.     left: 0;
  37.     width: 34px;
  38.     height: 100%;
  39.   }
  40.   .loginBtn:focus {
  41.     outline: none;
  42.   }
  43.   .loginBtn:active {
  44.     box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
  45.   }
  46.   
  47.   
  48.   /* Facebook */
  49.   .loginBtn--facebook {
  50.     background-color: #4C69BA;
  51.       padding-bottom: 10px;
  52.       padding-top: 10px;
  53.     background-image: linear-gradient(#4C69BA, #3B55A0);
  54.     /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  55.     text-shadow: 0 -1px 0 #354C8C;
  56.   }
  57.   .loginBtn--facebook:before {
  58.     border-right: #364e92 1px solid;
  59.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
  60.   }
  61.   .loginBtn--facebook:hover,
  62.   .loginBtn--facebook:focus {
  63.     background-color: #5B7BD5;
  64.     background-image: linear-gradient(#5B7BD5, #4864B1);
  65.     color: #000 !important
  66.   }
  67.   
  68.     .loginBtn--google:hover,
  69.   .loginBtn--google:focus {
  70.     background-color: #BB3F30;
  71.     color: #000 !important
  72.   }
  74.   
  75.   /* Google */
  76.   .loginBtn--google {
  77.     /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  78.     background: #DD4B39;
  79.         padding-bottom: 10px;
  80.       padding-top: 10px;
  81.   }
  82.   .loginBtn--google:before {
  83.     border-right: #BB3F30 1px solid;
  84.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
  85.   }
  86. </style>
  88.     <div class="container-fluid page-header py-5">
  89.         <h1 class="text-center text-white display-6 pb-2">Inscription</h1>
  90.         <ol class="breadcrumb justify-content-center mb-0">
  91.             <li class="breadcrumb-item"><a href="#">Acceuil</a></li>
  92.             <li class="breadcrumb-item active text-white">Inscription</li>
  93.         </ol>
  94.     </div>
  95.     <section>
  96.     <div class="container-fluid contact ">
  97.             <div class="container mt-5">
  98.                 <div class="p-5 bg-light rounded">
  99.                     <div class="row g-4">
  100.                         <form method="post">
  101.                             {% if response != "" %}
  102.                                 <div class="error text-danger">
  103.                                     {{ response }}
  104.                                 </div>
  105.                             {% endif %}
  106.                             <input type="text" class="w-100 form-control border-0 py-3 mb-4" placeholder="Nom" name="nom"/>
  107.                             <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Prénopm" name="prenom"/>
  108.                             <input type="tel" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Téléphone" name="tel" />
  109.                             <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Adresse (Ex : Avenue ....)" name="adresse" />
  110.                             <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Complement adresse (Ex : Imm 10 App 15)" name="complementAdresse" />
  111.                             <select name="ville" class="w-100 form-control border-0 py-3 mb-4" >
  112.                                 <option value="Rabat">Rabat</option>
  113.                             </select>
  115.                             {% if type == "Professionnel" %}
  116.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Raison sociale" name="rs" />
  117.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="RC" name="rc" />
  118.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Identifiant fiscale" name="if" />
  119.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Pattente" name="pattente" />
  120.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="CNSS" name="cnss" />
  121.                                 <input type="text" class="w-100 form-control border-0 py-3 mb-4"  placeholder="ICE" name="ice" />
  122.                             {% endif %}
  124.                             <input type="email" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Email" name="email" />
  125.                             <input type="password" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Mot de passe" name="password1"/>
  126.                             <input type="password" class="w-100 form-control border-0 py-3 mb-4"  placeholder="Comfirmez mot de passe" name="password2"/>
  128.                             <button type="submit" class="w-100 btn form-control border-secondary py-3 bg-white text-primary " >S'inscrire</button>
  129.                         </form>
  130.                         <h4 style="text-align:center; margin-bottom:20px; margin-top:20px">OU SE CONNECTER AVEC</h4>
  131.                         <div class="row" style="text-align:center;">
  132.                             <div class="col-md-12 login_btn">
  133.                                 {#<a href="/connect/facebook" class="loginBtn loginBtn--facebook">#}
  134.                                 {#     Facebook#}
  135.                                 {#</a>#}
  136.                                 <a href="/connect/google" class="loginBtn loginBtn--google">
  137.                                     Google
  138.                                 </a>                            
  139.                             </div>
  140.                         </div>
  141.                     </div>
  142.                 </div>
  143.             </div>
  144.         </div>
  145.     </section>
  147.     <br/><br/>
  148. {% endblock %}
  149. {% block js %}
  151.     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCsvnXjUuSSF4wstBao9oG6C8OA-ZehAXE&libraries=places"></script>
  153. {% endblock %}