templates/pages/account/booker-registration.html.twig line 1

Open in your IDE?
  1. {% extends 'pages/baseNoFooter.html.twig' %}
  3. {% block stylesheets %}
  4.     <!-- CUSTOM CSS -->
  5.     <link href="{{ asset('dev/css/tailwind.min.css')}}" rel="stylesheet" />
  6.     <link href="{{ asset('dev/css/pages/home.css')}}" rel="stylesheet" />
  7.     <link href="{{ asset('dev/css/header2.css')}}" rel="stylesheet">
  8.     <link href="{{ asset('dev/css/forms.css')}}" rel="stylesheet">
  9.     <link href="{{ asset('dev/css/colors.css')}}" rel="stylesheet">
  10.     <link href="{{ asset('dev/css/pages/mot-de-passe-oublie.css')}}" rel="stylesheet">
  13. {% endblock %}
  14. {% block title %}{{"Profile"|trans }}{% endblock %} 
  15. {% block content %}
  16.     <main >
  18.         <section id="hero" class="background-image"  style="height: 100vh;">
  19.             <div class="opacity-mask"  >
  20.                 <div class="login-page-new__main-bg" ></div>
  22.             </div>
  23.             <div class="container row relative z-10 flex justify-center" style="margin-top:27vh;">
  26.                 <div class="col-md-5 col-sm-12 relative">
  29.                     <img src="{{ asset('dev/img/left-fill.svg') }}" class="absolute z-0" style="right: 9px;top: -97px;">
  30.                     <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 normal-case   xl:p-0 dark:bg-gray-800 dark:border-gray-700">
  31.                         <div class="p-6 space-y-4 md:space-y-6 sm:p-8 z-10 relative">
  32.                             <h1 class="text-base text-left font-bold leading-tight tracking-tight text-gray-900 mt-3 md:text-lg dark:text-white">
  33.                                 Créer un compte
  34.                                 <br>
  35.                                 <span style="color: #ffaa00;" class="text-2xl md:text-3xl text-gray-900 tracking-wide">Inscription</span>
  36.                             </h1>
  37.                             <label for="terms" class="font-light text-gray-500 sm:text-sm text-xs mt-2 text-left">Inscrivez vous et rejoignez la communauté Bookoach. Enregistrez vos information dans ce formulaire d'inscription :</label>
  38.                             <form class="space-y-4 md:space-y-5 text-start mt-6" id="myForm" action="#" novalidate>
  39.                                 <!-- Step 1: Email Input -->
  40.                                 <div id="step-1" class="form-step">
  42.                                     <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-1">
  43.                                         <div class="bg-orange h-2.5 rounded-full" style="width: 33%"></div>
  44.                                     </div>
  45.                                     <p class="flex font-medium justify-end leading-tight mb-3 mt-1 mx-1 text-sm text-gray-900">1/3</p>
  48.                                     <div class="form-floating mb-3">
  49.                                         <input type="email" name="email" class="block font-medium form-control p-2.5 rounded-lg sm:text-sm text-gray-900 w-full ps-5 " id="email" placeholder="name@example.com" aria-required="true" aria-invalid="true">
  50.                                         <label class="mb-2 ps-5 text-sm font-medium text-gray-900 dark:text-white" for="email">Adresse email</label>
  51.                                         <div class="absolute" style="top: 15px;left: 13px;color: #a1a1a1;">
  52.                                             <i load-hicon="email"></i>
  53.                                         </div>
  54.                                     </div>
  55.                                     <button type="button" id="next-step-1" class="bg-primary-600 font-medium hover:bg-primary-700 px-5 py-2.5 rounded-lg text-center text-sm text-white w-full mb-3" style="background: #ffaa00;">Suivant</button>
  56.                                 </div>
  58.                                 <!-- Step 2: Full Name Input -->
  59.                                 <div id="step-2" class="form-step hidden">
  60.                                     <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-1">
  61.                                         <div class="bg-orange h-2.5 rounded-full" style="width: 66%"></div>
  62.                                     </div>
  63.                                     <div class="flex font-medium justify-end leading-tight mb-3 mt-1 mx-1 text-sm text-gray-900">
  64.                                         <p>2/3</p>
  65.                                     </div>
  66.                                     <div class="form-floating mb-3">
  67.                                         <input type="text" name="fullname" class="block font-medium form-control p-2.5 rounded-lg sm:text-sm text-gray-900 w-full ps-5" id="fullname" placeholder="John Doe" aria-required="true">
  68.                                         <label class="mb-2 ps-5 text-sm font-medium text-gray-900 dark:text-white" for="fullname">Nom complet</label>
  69.                                         <div class="absolute" style="top: 15px;left: 13px;color: #a1a1a1;">
  70.                                             <i load-hicon="user"></i>
  71.                                         </div>
  72.                                     </div>
  74.                                     <div class="flex gap-2">
  75.                                         <button type="button" id="back-step-2" class="bg-gray-400 font-medium hover:bg-gray-500 px-5 py-2.5 rounded-lg text-center text-sm text-white w-full mb-3">Retour</button>
  76.                                         <button type="button" id="next-step-2" class="bg-primary-600 font-medium hover:bg-primary-700 px-5 py-2.5 rounded-lg text-center text-sm text-white w-full mb-3" style="background: #ffaa00;">Suivant</button>
  77.                                     </div>
  78.                                 </div>
  79.                                 <!-- Step 3: Password Input -->
  80.                                 <div id="step-3" class="form-step hidden">
  81.                                     <div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700 mb-1">
  82.                                         <div class="bg-orange h-2.5 rounded-full" style="width: 100%"></div>
  83.                                     </div>
  84.                                     <div class="flex font-medium justify-end leading-tight mb-3 mt-1 mx-1 text-sm text-gray-900">
  85.                                         <p>3/3</p>
  86.                                     </div>
  87.                                     <div class="form-floating relative password mb-3">
  88.                                         <input type="password" name="password" style="height: 58px;"
  89.                                                class="form-control bsm:text-sm rounded-lg ps-5 font-medium text-gray-900 focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 placeholder-gray-900"
  90.                                                id="password" placeholder="Mot de passe" >
  91.                                         <div class="absolute" style="top: 15px;left: 13px;color: #a1a1a1;">
  92.                                             <i load-hicon="locked"></i>
  93.                                         </div>
  95.                                     </div>
  96.                                     <div class="flex gap-2">
  97.                                         <button type="button" id="back-step-3" class="bg-gray-400 font-medium hover:bg-gray-500 px-5 py-2.5 rounded-lg text-center text-sm text-white w-1/2 mb-3">Retour</button>
  98.                                         <button type="submit" class="bg-primary-600 font-medium hover:bg-primary-700 px-2 py-2.5 rounded-lg text-center text-sm text-white w-1/2 mb-3" style="background: #ffaa00;">Créer un compte</button>
  99.                                     </div>
  100.                                 </div>
  101.                             </form>
  102.                             <p class="text-xs text-center font-light text-gray-500 my-2">Déjà un compte ? <a href="#" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Connectez-vous ici</a></p>
  103.                             <div class="row socials mt-3">
  104.                                 <div class="relative flex  items-center">
  105.                                     <div class="flex-grow border-t border-gray-300"></div>
  106.                                     <span class="flex-shrink mx-2 text-gray-300">ou</span>
  107.                                     <div class="flex-grow border-t border-gray-300"></div>
  108.                                 </div>
  109.                                 <div class="col-md-12 my-2 ">
  110.                                     <a href="#" class="w-full h-full  hover:bg-gray-100 text-gray-900 hover:text-gray-900 rounded-lg inline-flex items-center justify-center px-3 py-2.5 border border-gray-300 border hover:border-gray-800">
  111.                                         <img src="{{ asset('dev/img/google-logo.png') }}" class="ps-2 object-fill" style="height: 20px;/* width: 80px; *//* object-fit: cover; */">
  112.                                         <div class="text-left rtl:text-right ">
  114.                                             <div class="mt-1 ms-1 white  text-sm font-semibold whitespace-nowrap">Se connecter</div>
  115.                                         </div>
  116.                                     </a>
  117.                                 </div>
  119.                             </div>
  120.                         </div>
  122.                     </div>
  123.                 </div>
  126.             </div>       
  127.         </section>
  130.     </main>
  132.     <!-- End main -->
  133. {% endblock %}
  134. {% block javascripts %}
  136.     <script src="{{ asset('dev/js/hicon.min.js')}}"></script>
  137.     <script> hicon.replace();</script>
  139.     <script src="{{ asset('dev/js/jquery.validate.min.js')}}" type="module"></script>
  140.     <script src="{{ asset('dev/js/registration-coach.js')}}" type="module"></script>
  142.     <script src="{{ asset('dev/js/create-account.js')}}">  feather.replace();</script>
  143.     <script src="{{ asset('dev/js/home.js')}}"></script>   
  144.     <!-- Card Validator format --> 
  145.     <script src="{{ asset('dev/js/feather.min.js') }}"></script>      
  147.     <script src="{{ asset('dev/js/datepicker.min.js') }}"></script>  
  149. {% endblock %}