templates/registration/index.html.twig line 1

Open in your IDE?
  1. {% extends 'baseLogin.html.twig' %}
  3. {% block title %}Créer un compte — Macssolution{% endblock %}
  5. {% block styles %}
  6. <style>
  7.     .lf-card {
  8.         width: 100%;
  9.         max-width: 460px;
  10.         background: #fff;
  11.         border: 1px solid #e2e8f0;
  12.         border-radius: 20px;
  13.         box-shadow: 0 8px 40px rgba(0,0,0,0.08);
  14.         padding: 2.5rem 2.25rem;
  15.     }
  17.     .lf-header {
  18.         text-align: center;
  19.         margin-bottom: 2rem;
  20.     }
  22.     .lf-header__logo {
  23.         width: 60px; height: 60px;
  24.         border-radius: 14px;
  25.         object-fit: cover;
  26.         box-shadow: 0 4px 12px rgba(59,130,246,0.2);
  27.         margin-bottom: 1.25rem;
  28.     }
  30.     .lf-header__title {
  31.         font-size: 1.5rem;
  32.         font-weight: 700;
  33.         color: #1f2937;
  34.         letter-spacing: -0.02em;
  35.         margin-bottom: 0.375rem;
  36.     }
  38.     .lf-header__sub {
  39.         font-size: 0.9rem;
  40.         color: #64748b;
  41.     }
  43.     .lf-group {
  44.         margin-bottom: 1.125rem;
  45.     }
  47.     .lf-label {
  48.         display: block;
  49.         font-size: 0.8125rem;
  50.         font-weight: 600;
  51.         color: #374151;
  52.         margin-bottom: 0.375rem;
  53.     }
  55.     .lf-input-wrap {
  56.         position: relative;
  57.     }
  59.     .lf-input-wrap i {
  60.         position: absolute;
  61.         left: 0.875rem;
  62.         top: 50%;
  63.         transform: translateY(-50%);
  64.         color: #94a3b8;
  65.         font-size: 0.9rem;
  66.         pointer-events: none;
  67.     }
  69.     .lf-input {
  70.         width: 100%;
  71.         height: 46px;
  72.         padding: 0 0.875rem 0 2.5rem;
  73.         border: 1px solid #e2e8f0;
  74.         border-radius: 10px;
  75.         font-size: 0.9375rem;
  76.         color: #1f2937;
  77.         background: #f8fafc;
  78.         font-family: inherit;
  79.         transition: all 0.2s ease;
  80.         outline: none;
  81.     }
  83.     .lf-input:focus {
  84.         border-color: #3b82f6;
  85.         background: #fff;
  86.         box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
  87.     }
  89.     .lf-submit {
  90.         width: 100%;
  91.         height: 48px;
  92.         background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  93.         color: #fff;
  94.         border: none;
  95.         border-radius: 10px;
  96.         font-size: 0.9375rem;
  97.         font-weight: 700;
  98.         font-family: inherit;
  99.         cursor: pointer;
  100.         display: flex;
  101.         align-items: center;
  102.         justify-content: center;
  103.         gap: 0.5rem;
  104.         transition: all 0.2s ease;
  105.         margin-top: 1.5rem;
  106.     }
  108.     .lf-submit:hover {
  109.         transform: translateY(-1px);
  110.         box-shadow: 0 6px 20px rgba(59,130,246,0.4);
  111.     }
  113.     .lf-bottom {
  114.         text-align: center;
  115.         margin-top: 1.5rem;
  116.         font-size: 0.8125rem;
  117.         color: #94a3b8;
  118.     }
  120.     .lf-error {
  121.         display: flex;
  122.         align-items: flex-start;
  123.         gap: 0.625rem;
  124.         background: #fef2f2;
  125.         border: 1px solid #fecaca;
  126.         color: #dc2626;
  127.         border-radius: 10px;
  128.         padding: 0.75rem 1rem;
  129.         font-size: 0.875rem;
  130.         font-weight: 500;
  131.         margin-bottom: 1.5rem;
  132.     }
  133. </style>
  134. {% endblock %}
  136. {% block body %}
  137. <div class="lf-card">
  139.     <div class="lf-header">
  140.         <img src="{{ asset('assets/images/logo-macssolution.png') }}" alt="Macssolution" class="lf-header__logo">
  141.         <h1 class="lf-header__title">Créer un compte</h1>
  142.         <p class="lf-header__sub">Rejoignez Macssolution dès maintenant</p>
  143.     </div>
  145.     {{ form_start(form) }}
  147.         <!-- Email -->
  148.         <div class="lf-group">
  149.             <label class="lf-label">{{ form_label(form.email) }}</label>
  150.             <div class="lf-input-wrap">
  151.                 {{ form_widget(form.email, {'attr': {'class': 'lf-input', 'placeholder': 'votre@email.com'}}) }}
  152.                 <i class="fas fa-envelope"></i>
  153.             </div>
  154.             {{ form_errors(form.email) }}
  155.         </div>
  157.         <!-- Mot de passe -->
  158.         <div class="lf-group">
  159.             <label class="lf-label">{{ form_label(form.password.first) }}</label>
  160.             <div class="lf-input-wrap">
  161.                 {{ form_widget(form.password.first, {'attr': {'class': 'lf-input', 'placeholder': '••••••••'}}) }}
  162.                 <i class="fas fa-lock"></i>
  163.             </div>
  164.             {{ form_errors(form.password.first) }}
  165.         </div>
  167.         <!-- Confirmer mot de passe -->
  168.         <div class="lf-group">
  169.             <label class="lf-label">{{ form_label(form.password.second) }}</label>
  170.             <div class="lf-input-wrap">
  171.                 {{ form_widget(form.password.second, {'attr': {'class': 'lf-input', 'placeholder': '••••••••'}}) }}
  172.                 <i class="fas fa-lock"></i>
  173.             </div>
  174.             {{ form_errors(form.password.second) }}
  175.         </div>
  177.         <button type="submit" class="lf-submit">
  178.             <i class="fas fa-user-plus"></i>
  179.             Créer mon compte
  180.         </button>
  182.     {{ form_end(form) }}
  184.     <div class="lf-bottom">
  185.         Déjà un compte ?
  186.         <a href="{{ path('app_login') }}" style="color:#3b82f6;font-weight:600;text-decoration:none;">Se connecter</a>
  187.     </div>
  189.     <div class="lf-bottom" style="margin-top:0.5rem;">
  190.         &copy; {{ "now"|date("Y") }} Macssolution — Tous droits réservés
  191.     </div>
  193. </div>
  194. {% endblock %}