templates/base.html.twig line 1

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.     <meta charset="utf-8" />
  5.     <title>{% block style %}CAREN | Assurances{% endblock %}</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <meta name="keywords" content="" />
  8.     <meta name="description" content="" />
  10.     <!-- Favicon -->
  11.     <link rel="icon" href="{{ asset('assets/img/caren.jpg') }}" />
  13.     <!-- Fonts -->
  14.     <link rel="preconnect" href="https://fonts.googleapis.com" />
  15.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  16.     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Poppins:wght@600;700&display=swap" rel="stylesheet" />
  18.     <!-- Icons -->
  19.     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet" />
  20.     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.1/font/bootstrap-icons.css" rel="stylesheet" />
  22.     <!-- SweetAlert & intl-tel-input -->
  23.     <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
  25.     <!-- Libraries CSS -->
  26.     <link href="{{ asset('assets/lib/animate/animate.min.css') }}" rel="stylesheet" />
  27.     <link href="{{ asset('assets/lib/owlcarousel/assets/owl.carousel.min.css') }}" rel="stylesheet" />
  29.     <!-- Main CSS -->
  30.     <link href="{{ asset('assets/css/bootstrap.min.css') }}" rel="stylesheet" />
  31.     <link href="{{ asset('assets/css/style.css') }}" rel="stylesheet" />
  33.     <!-- Alert JS/CSS -->
  34.     <script src="{{ asset('alerteinfo/js/jquery-1.4.2.min.js') }}"></script>
  35.     <script src="{{ asset('alerteinfo/js/jquery.alerts.mod.js') }}"></script>
  36.     <link href="{{ asset('alerteinfo/css/jquery.alerts.css') }}" rel="stylesheet" />
  37. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/css/intlTelInput.css" />
  39.     <!-- CSS -->
  41.     <!-- Custom Styles to Remove Space -->
  42.     <style>
  43.         body {
  44.             margin: 0;
  45.             padding: 0;
  46.         }
  48.         .navbar {
  49.             margin-bottom: 0 !important;
  50.             transition: all 0.3s ease-in-out;
  51.             z-index: 1030;
  52.         }
  54.         .navbar + * {
  55.             margin-top: 0 !important;
  56.             padding-top: 0 !important;
  57.         }
  59.         .navbar-brand h5 {
  60.             font-weight: 700;
  61.             color: #C21510;
  62.             letter-spacing: 1px;
  63.         }
  65.         .navbar-nav .nav-link.active,
  66.         .navbar-nav .nav-link:hover {
  67.             color: #C21510;
  68.             font-weight: 500;
  69.         }
  71.         img, section, .hero-section {
  72.             margin-top: 0 !important;
  73.             padding-top: 0 !important;
  74.         }
  76.         .loader {
  77.             border: 16px solid #f3f3f3;
  78.             border-radius: 50%;
  79.             border-top: 16px solid #C21510;
  80.             border-bottom: 16px solid #C21510;
  81.             width: 100px;
  82.             height: 100px;
  83.             margin: 380px auto 0;
  84.             text-align: center;
  85.             position: absolute;
  86.             left: 0;
  87.             right: 0;
  88.             animation: spin 3s linear infinite;
  89.         }
  91.         @keyframes spin {
  92.             to { transform: rotate(360deg); }
  93.         }
  94.     </style>
  95. </head>
  97. <body>
  98.     {% for message in app.flashes('warning') %}
  99.         <script>
  100.             document.addEventListener('DOMContentLoaded', function () {
  101.                 Swal.fire({
  102.                     text: "{{ message|e('js') }}",
  103.                     icon: "error",
  104.                     buttonsStyling: false,
  105.                     confirmButtonText: "Ok",
  106.                     background: '#f8f9fa',
  107.                     customClass: { confirmButton: "btn btn-danger" }
  108.                 });
  109.             });
  110.         </script>
  111.     {% endfor %}
  113.     <!-- Spinner -->
  114.     <div id="spinner" class="show bg-white position-fixed translate-middle w-100 vh-100 top-50 start-50 d-flex align-items-center justify-content-center">
  115.         <div class="spinner-grow text-primary" role="status"></div>
  116.     </div>
  118.     <!-- Topbar -->
  119.     <div class="container-fluid bg-dark text-white-50 py-2 px-0 d-none d-lg-block">
  120.         <div class="row gx-0 align-items-center">
  121.             <div class="col-lg-8 px-5 text-start">
  122.                 <div class="d-inline-flex align-items-center me-4">
  123.                     <small class="fa fa-phone-alt me-2"></small>
  124.                     <small style="color: #fff;">+227 20 73 34 70</small>
  125.                 </div>
  126.                 <div class="d-inline-flex align-items-center me-4">
  127.                     <small class="far fa-envelope-open me-2"></small>
  128.                     <small style="color: #fff;">caren@caren-niger.com</small>
  129.                 </div>
  130.                 <div class="d-inline-flex align-items-center me-4">
  131.                     <small class="far fa-clock me-2"></small>
  132.                     <small style="color: #fff;">Lundi - Vendredi : 08h - 17h</small> |
  133.                     <small style="color: #fff;">Samedi: 09h - 13h</small>
  134.                 </div>
  135.             </div>
  136.         </div>
  137.     </div>
  139.     <!-- Navbar -->
  140.     <nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top shadow-sm border-bottom px-3 px-lg-5">
  141.         <a href="{{ path('app_home') }}" class="navbar-brand d-flex align-items-center">
  142.             <img class="img-fluid me-0" src="{{ asset('assets/img/caren.jpg') }}" style="margin-top: 0; display: block;" alt=""/>
  143.             <h5 class="m-0 text-primary fw-bold">CAREN ASSURANCES</h5>
  144.         </a>
  145.         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
  146.             <span class="navbar-toggler-icon"></span>
  147.         </button>
  148. <div class="collapse navbar-collapse" id="navbarCollapse">
  149.     <div class="navbar-nav mx-auto bg-light rounded pe-4 py-3 py-lg-0">
  150.         <a href="{{ path('app_plainte_new') }}" class="nav-item nav-link {% if app.request.attributes.get('_route') == 'app_plainte_new' %}active{% endif %}">Réclamation/Suggestion</a>
  151.         <a href="{{ path('app_sinistre_new') }}" class="nav-item nav-link {% if app.request.attributes.get('_route') == 'app_sinistre_new' %}active{% endif %}">Déclaration Sinistre</a>
  152.         <a href="{{ path('app_politique') }}" class="nav-item nav-link {% if app.request.attributes.get('_route') == 'app_politique' %}active{% endif %}">Politique d'utilisation</a>
  153.     </div>
  154.     <a href="{{ path('app_authentication') }}" class="btn btn-primary px-3 ms-3">
  155.         <i class="far fa-user me-2"></i> Espace personnel
  156.     </a>
  157. </div>
  159.     </nav>
  161.     <!-- Flash Error -->
  162.     <div class="container mt-3">
  163.         {% for flashMessage in app.session.flashbag.get('ErrorAPI') %}
  164.             <script>
  165.                 document.addEventListener('DOMContentLoaded', function () {
  166.                     Swal.fire({
  167.                         text: "{{ flashMessage|e('js') }}",
  168.                         icon: "error",
  169.                         buttonsStyling: false,
  170.                         confirmButtonText: "Ok",
  171.                         background: '#f8f9fa',
  172.                         customClass: { confirmButton: "btn btn-danger" }
  173.                     });
  174.                 });
  175.             </script>
  176.         {% endfor %}
  177.     </div>
  179.     {% block body %}{% endblock %}
  181.     <!-- Footer -->
  182.     <div class="container-fluid bg-primary footer mt-5 pt-5 wow fadeIn" data-wow-delay="0.1s">
  183.         <div class="container py-5">
  184.             <div class="row g-5">
  185.                 <div class="col-lg-4 col-md-6">
  186.                     <h2 class="text-white mb-4">CAREN Assurances</h2>
  187.                     <p>Compagnie d'Assurances et de Réassurances du Niger.</p>
  188.                     <div class="d-flex pt-2">
  189.                         <a class="btn btn-square me-1" href="#"><i class="fab fa-twitter"></i></a>
  190.                         <a class="btn btn-square me-1" href="#"><i class="fab fa-facebook-f"></i></a>
  191.                         <a class="btn btn-square me-1" href="#"><i class="fab fa-youtube"></i></a>
  192.                         <a class="btn btn-square me-0" href="#"><i class="fab fa-linkedin-in"></i></a>
  193.                     </div>
  194.                 </div>
  195.                 <div class="col-lg-4 col-md-6">
  196.                     <h5 class="text-light mb-4">Adresse</h5>
  197.                     <p><i class="fa fa-map-marker-alt me-3"></i>Angle de l'avenue Djibo Bakary (PL32) et de l'avenue Dan Koulodo  (PL17)</p>
  198.                     <p><i class="fa fa-phone-alt me-3"></i>+227 20 73 34 70</p>
  199.                     <p><i class="fa fa-envelope me-3"></i>caren@caren-niger.com</p>
  200.                 </div>
  201.                 {# <div class="col-lg-4 col-md-6">
  202.                     <h5 class="text-light mb-4">Lettre d'information</h5>
  203.                     <p>Inscrivez-vous pour recevoir nos dernières actualités.</p>
  204.                     <div class="position-relative mx-auto" style="max-width: 400px;">
  205.                         {{ form_start(form) }}
  206.                         {{ form_row(form.email) }}
  207.                         {{ form_row(form.subscribe) }}
  208.                         {{ form_end(form) }}
  209.                     </div>
  210.                 </div> #}
  211.                 <div class="col-lg-4 col-md-6">
  212.                     <h5 class="text-light mb-4">Lettre d'information</h5>
  213.                     <p>Inscrivez-vous pour recevoir nos dernières actualités.</p>
  214.                     <div class="position-relative mx-auto" style="max-width: 400px;">
  215.                         <form  method="POST" action="{{path('app_souscription_new_letter')}}">
  216.                         <input class="form-control bg-white w-100 py-3 ps-4 pe-5" 
  217.                                 required 
  218.                                 name="newsletter" 
  219.                                 type="email" 
  220.                                 placeholder="Votre email" 
  221.                                 aria-describedby="emailHelp" />
  222.                                 <button type="submit" class="btn btn-secondary py-2 position-absolute top-0 end-0 mt-2 me-2">S'inscrire</button>
  223.                         </form>
  224.                     </div>
  225.                 </div>
  226.             </div>
  227.         </div>
  228.         <div class="container-fluid copyright">
  229.             <div class="container text-center">
  230.                 &copy; <a href="https://www.caren-niger.com/" target="_blank">CAREN ASSURANCES</a>, Tous droits réservés.
  231.             </div>
  232.         </div>
  233.     </div>
  235.  <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/intlTelInput.min.js"></script>
  236. <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.13/js/utils.js"></script>
  239.     <!-- Back to Top -->
  240.     <a href="#" class="btn btn-lg btn-primary btn-lg-square back-to-top"><i class="bi bi-arrow-up"></i></a>
  242.     <!-- JS Scripts -->
  243.     <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  244.     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
  245.     <script src="{{ asset('assets/lib/wow/wow.min.js') }}"></script>
  246.     <script src="{{ asset('assets/lib/easing/easing.min.js') }}"></script>
  247.     <script src="{{ asset('assets/lib/waypoints/waypoints.min.js') }}"></script>
  248.     <script src="{{ asset('assets/lib/owlcarousel/owl.carousel.min.js') }}"></script>
  249.     <script src="{{ asset('assets/lib/counterup/counterup.min.js') }}"></script>
  250.     <script src="{{ asset('assets/js/main.js') }}"></script>
  252.     {% block script %}{% endblock %}
  254.     <!-- Numérique uniquement -->
  255.     <script>
  256.         function chiffres(event) {
  257.             if (!event && window.event) {
  258.                 event = window.event;
  259.             }
  260.             const key = event.keyCode || event.which;
  261.             if (![8, 127].includes(key) && (key < 48 || key > 57)) {
  262.                 event.preventDefault();
  263.                 jError("Veuillez saisir des chiffres uniquement svp !");
  264.             }
  265.         }
  266.     </script>
  267. </body>
  268. </html>