templates/backoffice.base.html.twig line 42

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <link rel="shortcut icon" href="{{ absolute_url('assets/media/logos/mazego5.png') }}">
  6.     <title>{% block title %}Welcome!{% endblock %}</title>
  7.     <meta name="description" content="Metronic admin dashboard live demo. Check out all the features of the admin panel. A large number of settings, additional services and widgets." />
  8.     <meta name="keywords" content="Metronic, bootstrap, bootstrap 5, Angular 11, VueJs, React, Laravel, admin themes, web design, figma, web development, ree admin themes, bootstrap admin, bootstrap dashboard" />
  9.     <link rel="canonical" href="https://preview.keenthemes.com/metronic8" />
  10.     <meta name="viewport" content="width=device-width, initial-scale=1" />
  12.     <link rel="stylesheet" href="https://unpkg.com/select2@4.1.0-rc.0/dist/css/select2.min.css">
  13.     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" />
  14.     <link href="{{ asset('/metronic/assets/plugins/global/plugins.bundle.css') }}" rel="stylesheet" type="text/css" />
  15.     <link href="{{ asset('/metronic/assets/css/style.bundle.css') }}" rel="stylesheet" type="text/css" />
  16.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
  17.     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
  18.     <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  20.  
  21.  
  22.  
  24.     <!-- Load jQuery and jQuery UI -->
  25.     <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  26.     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  27.     <script async src="https://www.googletagmanager.com/gtag/js?id=G-GHTG0WQV2J"></script>
  28.     
  29.     <script>
  30.         window.dataLayer = window.dataLayer || [];
  31.         function gtag(){dataLayer.push(arguments);}
  32.         gtag('js', new Date());
  33.         gtag('config', 'G-GHTG0WQV2J');
  34.     </script>
  35.     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  37.     {% block theStylesheet %}{% endblock %}
  38.     {% block javascripts %}{% endblock %}
  39. </head>
  40.     <body class="header-fixed header-tablet-and-mobile-fixed toolbar-enabled toolbar-fixed toolbar-tablet-and-mobile-fixed aside-enabled aside-fixed" style="--kt-toolbar-height:55px;--kt-toolbar-height-tablet-and-mobile:55px">
  41.          
  42.         {% block body %}{% endblock %}
  43.         {% block content %}{% endblock %}
  44.       
  45.         <script src="{{ asset('/metronic/assets/plugins/global/plugins.bundle.js') }}"></script>
  46.         <script src="{{ asset('/metronic/assets/js/scripts.bundle.js') }}"></script>
  47.          
  48.         <script src="{{ asset('/metronic/assets/js/custom/widgets.js') }}"></script>
  49.         <script src="{{ asset('/metronic/assets/js/custom/apps/chat/chat.js') }}"></script>
  50.         <script src="{{ asset('/metronic/assets/js/custom/modals/create-app.js') }}"></script>
  51.         <script src="{{ asset('/metronic/assets/js/custom/modals/upgrade-plan.js') }}"></script>
  52.         <style>
  53.                 form.pull-right.hidden {
  54.             width: 95%;
  55.                }
  56.                th[scope="row"] {
  57.                 padding-left: 10px!important;
  58.                 }
  59.                 th[scope="col"] {
  60.                 padding-left: 9px!important;
  61.                 }
  62.                 .table td:first-child {
  63.                 padding-left: 10px;
  64.                 }
  65.                 td {
  66.                 font-size: 11px!important;
  67.                 }
  68.                 .table td:first-child, .table th:first-child, .table tr:first-child {
  69.                 padding-left: 9px;
  70.                 }
  71.                   .modal {
  72.                      z-index: 1050; 
  73.                 }
  74.  
  75.                 .modal-backdrop {
  76.                 z-index: 1040;  
  77.                 }
  79.                 .btn-to-google {
  80.                     display: flex;
  81.                     align-items: center;
  82.                     padding: 0 0 0 17px;
  83.                     width: 100%;
  84.                     height: 100%;
  85.                     background: #f4f5f9;
  86.                     border-radius: 10px;
  87.                     font-size: 16px;
  88.                     font-weight: 500;
  89.                     color: #1a1b1c;
  90.                     line-height: 19px;
  91.                     cursor: pointer;
  92.                     transition: all .3s;
  93.                     }
  94.                     #kt_app_toolbar {
  95.                     margin: 33px !important;
  96.                     }
  97.                     .dashboard-card.card.shadow-sm {
  98.                     margin: 8px !important;
  99.                     }
  100.                     .row.forced-mb {
  101.                     margin: 0px !important;
  102.                     }
  103.         </style>
  104.            
  105.         {% block pJavascript %}{% endblock %}
  106.     </body>
  107.    
  110.     <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
  111.     <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  112.     <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  113.     {% block jspositionimportant %}{% endblock %}
  114.     <script>
  115.             $(document).ready(function() {
  116.                 $('#kt_modal_add_customer').on('shown.bs.modal', function() {
  117.                     console.log('Modal shown, initializing Select2');
  118.                     $('.select2-autocomplete').select2({
  119.                         ajax: {
  120.                             url: function() {
  121.                                 return $(this).data('autocomplete-url');
  122.                             },
  123.                             dataType: 'json',
  124.                             delay: 250,
  125.                             data: function(params) {
  126.                                 return {
  127.                                     q: params.term
  128.                                 };
  129.                             },
  130.                             processResults: function(data) {
  131.                                 return {
  132.                                     results: data.results
  133.                                 };
  134.                             },
  135.                             cache: true
  136.                         },
  137.                         minimumInputLength: 2,
  138.                         placeholder: 'Rechercher un produit...'
  139.                     });
  140.                     console.log('Select2 initialized');
  141.                 });
  142.             }); 
  143.     </script>
  147.    <style>
  149.             /* Layout amélioré avec contraintes */
  150.             .dashboard-container {
  151.                 display: grid;
  152.                 grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  153.                 gap: 2rem;
  154.                 margin-bottom: 3rem;
  155.             }
  156.             
  157.             .dashboard-card {
  158.                 height: 100%;
  159.                 display: flex;
  160.                 flex-direction: column;
  161.                 transition: all 0.3s ease;
  162.                 border-radius: 16px;
  163.                 overflow: hidden;
  164.                 box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  165.                 border: none;
  166.                 background: white;
  167.             }
  168.             
  169.             .dashboard-card:hover {
  170.                 transform: translateY(-8px);
  171.                 box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  172.             }
  173.             
  174.             .card-header {
  175.             
  176.                 background: linear-gradient(135deg, #667eea33 0%, #764ba224 100%);
  177.                 color: white;
  178.                 border-bottom: none;
  179.                 padding: 1.5rem 2rem;
  180.             }
  181.             
  182.             .card-header h3 {
  183.                 font-size: 1.5rem;
  184.                 font-weight: 700;
  185.                 margin: 0;
  186.             }
  187.             
  188.             .card-header.bg-success {
  189.                 background: linear-gradient(135deg, #56ab2f 0%, #a8e6cf 100%);
  190.             }
  191.             
  192.             .card-header.bg-info {
  193.                 background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  194.             }
  195.             
  196.             .card-header.bg-warning {
  197.                 background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  198.             }
  199.             
  200.             .card-header.bg-danger {
  201.                 background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  202.             }
  203.             
  204.             .card-body-flex {
  205.                 flex: 1;
  206.                 display: flex;
  207.                 flex-direction: column;
  208.                 justify-content: space-between;
  209.                 padding: 2rem;
  210.             }
  211.             
  212.             .chart-container {
  213.                 position: relative;
  214.                 height: 400px;
  215.                 width: 100%;
  216.                 margin-top: 1.5rem;
  217.             }
  218.             
  219.             /* Taille des textes augmentée */
  220.             .metric-value {
  221.                 font-size: 2.8rem;
  222.                 font-weight: 800;
  223.                 margin: 1rem 0;
  224.                 color: #2d3748;
  225.                 line-height: 1.2;
  226.             }
  227.             
  228.             .metric-label {
  229.                 font-size: 1.1rem;
  230.                 color: #6c757d;
  231.                 margin-bottom: 0.5rem;
  232.             }
  233.             
  234.             .badge-trend {
  235.                 padding: 0.5rem 1rem;
  236.                 border-radius: 20px;
  237.                 font-weight: 600;
  238.                 font-size: 0.95rem;
  239.             }
  240.             
  241.             .circular-progress {
  242.                 position: relative;
  243.                 width: 100px;
  244.                 height: 100px;
  245.                 margin: 1rem auto;
  246.             }
  247.             
  248.             .circular-progress svg {
  249.                 transform: rotate(-90deg);
  250.             }
  251.             
  252.             .circular-progress .progress-text {
  253.                 position: absolute;
  254.                 top: 50%;
  255.                 left: 50%;
  256.                 transform: translate(-50%, -50%);
  257.                 font-weight: bold;
  258.                 font-size: 1.2rem;
  259.             }
  260.             
  261.             /* Styles modernes pour les tableaux */
  262.             .table {
  263.                 font-size: 1rem;
  264.             }
  265.             
  266.             .table thead th {
  267.                 font-weight: 600;
  268.                 text-transform: uppercase;
  269.                 font-size: 0.85rem;
  270.                 letter-spacing: 0.5px;
  271.             }
  272.             
  273.             .table tbody td {
  274.                 padding: 1rem 0.75rem;
  275.                 vertical-align: middle;
  276.             }
  277.             
  278.             /* Boutons plus grands */
  279.             .btn {
  280.                 padding: 0.6rem 1.25rem;
  281.                 font-size: 1rem;
  282.                 border-radius: 8px;
  283.             }
  284.             
  285.             /* Alertes plus visibles */
  286.             .alert {
  287.                 padding: 1rem 1.5rem;
  288.                 font-size: 1rem;
  289.                 border-radius: 10px;
  290.             }
  291.             
  292.             .alert i {
  293.                 font-size: 1.3rem;
  294.                 margin-right: 0.75rem;
  295.             }
  296.             
  297.             /* Titres plus grands */
  298.             .page-heading {
  299.                 font-size: 2.2rem !important;
  300.             }
  301.             
  302.             .page-heading small {
  303.                 font-size: 1.1rem;
  304.                 margin-top: 0.5rem;
  305.             }
  306.             
  307.             /* Barres de progression */
  308.             .progress {
  309.                 height: 10px !important;
  310.                 border-radius: 5px;
  311.             }
  312.             
  313.             .progress-bar {
  314.                 border-radius: 5px;
  315.             }
  316.             
  317.             @media (max-width: 1399.98px) {
  318.                 .dashboard-container {
  319.                     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  320.                 }
  321.                 
  322.                 .metric-value {
  323.                     font-size: 2.5rem;
  324.                 }
  325.             }
  326.             
  327.             @media (max-width: 767.98px) {
  328.                 .dashboard-container {
  329.                     grid-template-columns: 1fr;
  330.                     gap: 1.5rem;
  331.                 }
  332.                 
  333.                 .card-header {
  334.                     padding: 1.25rem 1.5rem;
  335.                 }
  336.                 
  337.                 .card-body-flex {
  338.                     padding: 1.5rem;
  339.                 }
  340.                 
  341.                 .metric-value {
  342.                     font-size: 2.2rem;
  343.                 }
  344.                 
  345.                 .page-heading {
  346.                     font-size: 1.8rem !important;
  347.                 }
  348.             }
  350.                     .table-responsive {
  351.                 overflow: visible !important;
  352.             }
  353.             td .dropdown {
  354.                 position: static; /* Permet au dropdown de s'échapper du conteneur */
  355.             }
  357.     </style>
  358. </html>