templates/frontoffice_bundle/utilisateur/compte.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. }
  10. .login_btn a:hover,
  11. .login_btn a:focus {
  12. color:#3333335c !important;
  13. font-size: 16px;
  14. }
  16. .loginBtn {
  17.     box-sizing: border-box;
  18.     position: relative;
  19.     /* width: 13em;  - apply for fixed size */
  20.     margin: 0.2em;
  21.     padding: 0 15px 0 46px;
  22.     border: none;
  23.     text-align: left;
  24.     line-height: 34px;
  25.     white-space: nowrap;
  26.     border-radius: 0.2em;
  27.     font-size: 16px;
  28.     color: #FFF;
  29.   }
  30.   .loginBtn:before {
  31.     content: "";
  32.     box-sizing: border-box;
  33.     position: absolute;
  34.     top: 0;
  35.     left: 0;
  36.     width: 34px;
  37.     height: 100%;
  38.   }
  39.   .loginBtn:focus {
  40.     outline: none;
  41.   }
  42.   .loginBtn:active {
  43.     box-shadow: inset 0 0 0 32px rgba(0,0,0,0.1);
  44.   }
  45.   
  46.   
  47.   /* Facebook */
  48.   .loginBtn--facebook {
  49.     background-color: #4C69BA;
  50.       padding-bottom: 10px;
  51.       padding-top: 10px;
  52.     background-image: linear-gradient(#4C69BA, #3B55A0);
  53.     /*font-family: "Helvetica neue", Helvetica Neue, Helvetica, Arial, sans-serif;*/
  54.     text-shadow: 0 -1px 0 #354C8C;
  55.   }
  56.   .loginBtn--facebook:before {
  57.     border-right: #364e92 1px solid;
  58.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_facebook.png') 6px 6px no-repeat;
  59.   }
  60.   .loginBtn--facebook:hover,
  61.   .loginBtn--facebook:focus {
  62.     background-color: #5B7BD5;
  63.     background-image: linear-gradient(#5B7BD5, #4864B1);
  64.     color: #000 !important
  65.   }
  66.   
  67.     .loginBtn--google:hover,
  68.   .loginBtn--google:focus {
  69.     background-color: #BB3F30;
  70.     color: #000 !important
  71.   }
  73.   
  74.   /* Google */
  75.   .loginBtn--google {
  76.     /*font-family: "Roboto", Roboto, arial, sans-serif;*/
  77.     background: #DD4B39;
  78.         padding-bottom: 10px;
  79.       padding-top: 10px;
  80.   }
  81.   .loginBtn--google:before {
  82.     border-right: #BB3F30 1px solid;
  83.     background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/14082/icon_google.png') 6px 6px no-repeat;
  84.   }
  86. </style>
  88.     <!-- Single Page Header start -->
  89.         <div class="container-fluid page-header py-5">
  90.             <h1 class="text-center text-white display-6">Mon compte</h1>
  91.             <ol class="breadcrumb justify-content-center mb-0">
  92.                 <li class="breadcrumb-item"><a href="/">Acceuil</a></li>
  93.                 <li class="breadcrumb-item active text-white">Mon compte</li>
  94.             </ol>
  95.         </div>
  97.         <!-- Contact Start -->
  98.         <div class="container-fluid contact">
  99.             <div class="container mt-5">
  100.                 <div class="p-5 bg-light rounded">
  101.                     <div class="row g-4">
  102.                         <div class="col-lg-6 blockCompte">
  103.                             
  104.                             {% if response != "" %}
  105.                               <div class="error text-danger pb-2">
  106.                                {{ response }}
  107.                               </div>
  108.                             {% endif %}
  109.                             <form  method="POST">
  110.                                 <h4 class="text-primary">Vous avez déja un compte ?</h4>
  111.                                 <input type="email" name="email" class="w-100 form-control border-0 py-3 mb-4" placeholder="Email">
  112.                                 <input type="password" name="password" class="w-100 form-control border-0 py-3 mb-4" placeholder="Mot de passe">
  113.                                 <a href="/updatePassword/" class="">Mot de passe oublié ?</a>
  114.                                 <button style='background: var(--bs-secondary) !important;
  115.                                 color: var(--bs-white) !important;' class="btn btn-default mt-2 btn form-control border-secondary py-3 bg-white text-primary " type="submit">Se connecter</button>
  116.                             </form>
  117.                             <h4 style="text-align:center; margin-bottom:20px; margin-top:20px">OU SE CONNECTER AVEC</h4>
  118.                             <div class="row" style="text-align:center;">
  119.                                 <div class="col-md-12 login_btn">
  120.                                     {#<a href="/connect/facebook" class="loginBtn loginBtn--facebook">#}
  121.                                     {#    Facebook#}
  122.                                     {#</a>#}
  123.                                     <a href="/connect/google" class="loginBtn loginBtn--google">
  124.                                         Google
  125.                                     </a>                            
  126.                                 </div>
  127.                             </div>
  128.                         </div>
  131.                         <div class="col-md-1"></div>
  132.                         <div class="col-lg-5">
  133.                             <form action="" class="">
  134.                                 <h4 class="text-primary mb-4">Vous êtes nouvel utilisateur ? </h4>
  135.                                 <p>Afin de poursuivre vos commandes, nous vous invitons à vous inscrire sur notre plateforme.<br/>
  136.                                     En vous inscrivant, vous pouvez également effectuer des commande grâce à notre application mobile disponibles sur App Store et Google Play.
  137.                                 </p>
  138.                                 <h5 class="">je suis ? </h5>
  139.                                 <div class="row g-4 mt-3">
  140.                                 <div class="col-md-6">
  141.                                     <a href="/account/new/Particulier/" class="w-100 btn form-control border-secondary py-3 bg-white text-primary " >Particulier</a>
  142.                                 </div>
  143.                                 <div class="col-md-6">
  144.                                     <a href="/account/new/Professionnel/"  class="w-100 btn form-control border-secondary py-3 bg-white text-primary " >Professionnel</a>
  145.                                 </div>
  146.                                 </div>
  147.                             </form>
  148.                         </div>
  149.                     </div>
  150.                 </div>
  151.             </div>
  152.         </div>
  153.         <!-- Contact End -->
  155.     <br/><br/>
  156. {% endblock %}
  157. {% block js %}
  160. {% endblock %}