templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>{% block title %}Welcome!{% endblock %}</title>
  7.     <link rel="stylesheet" href="https://bootswatch.com/4/lumen/bootstrap.min.css">
  8.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>
  9.     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.css"/>
  10.     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  11.     <style type="text/css">
  12.         select {
  13.             color: #444;
  14.             border-radius: 0.2em;
  15.             margin: 0 1rem 1rem 0;
  16.             padding: 0.2rem 1rem;
  17.         }
  18.         th {
  19.             color: #158cba;
  20.         }
  21.         .table td {
  22.             padding: .3rem .5rem;
  23.         }
  24.         .table .odd {
  25.             background-color: ghostwhite;
  26.         }
  27.         .nav-item {
  28.             list-style: none;
  29.         }
  30.         button {
  31.             padding: .2rem .4rem !important;
  32.         }
  33.         .top {
  34.             display: flex;
  35.             justify-content: space-between;
  36.         }
  37.         tfoot {
  38.             display: table-header-group;
  39.         }
  40.         tfoot input {
  41.             margin-left: -.75rem;
  42.             width: 100%;
  43.             padding: 3px;
  44.             box-sizing: inherit;
  45.         }
  46.         .content-separator {
  47.             width: 100%;
  48.             height: 1px;
  49.             background-color: #dee2e6;
  50.             margin-bottom: 10px;
  51.         }
  52.         .dataTables_wrapper > .top{
  53.             height: 38px;
  54.         }
  55.         .dataTables_wrapper > .top .dataTables_length label{
  56.             display: flex;
  57.             align-items: baseline;
  58.         }
  59.         .dataTables_wrapper > .top .dataTables_length label select{
  60.             margin-left: 5px;
  61.             margin-right: 5px;
  62.         }
  63.         .bottom {
  64.             padding-top: 1rem;
  65.         }
  66.         .overlay {
  67.             position: fixed;
  68.             text-align: center;
  69.             top: 0;
  70.             left: 0;
  71.             height: 100%;
  72.             width: 100%;
  73.             z-index: 1000000000;
  74.             background-color: rgba(0, 38, 76, 0.5);
  75.         }
  76.         .overlay:hover {
  77.             cursor: wait;
  78.         }
  79.         /* LOADING ANIMATION */
  80.         + #box1, #box2, #box3 {
  81.             grid-row: 1
  82.         }
  83.         #box3, #box4, #box6 {
  84.             grid-column: 3
  85.         }
  86.         #box2, #box5, #box7 {
  87.             grid-column: 2
  88.         }
  89.         #box6, #box7, #box8 {
  90.             grid-row: 3
  91.         }
  92.         #box4, #box5, #box9 {
  93.             grid-row: 2
  94.         }
  95.         #box1, #box8, #box9 {
  96.             grid-column: 1
  97.         }
  98.         .box {
  99.             float: left;
  100.             position: relative;
  101.             width: 50px;
  102.             height: 50px
  103.         }
  104.         #box1 {
  105.             animation: colorchange1 1s infinite;
  106.             -webkit-animation: colorchange1 1s infinite
  107.         }
  108.         #box2 {
  109.             animation: colorchange2 1s infinite;
  110.             -webkit-animation: colorchange2 1s infinite
  111.         }
  112.         #box3 {
  113.             animation: colorchange3 1s infinite;
  114.             -webkit-animation: colorchange3 1s infinite
  115.         }
  116.         #box4 {
  117.             animation: colorchange4 1s infinite;
  118.             -webkit-animation: colorchange4 1s infinite
  119.         }
  120.         #box6 {
  121.             animation: colorchange5 1s infinite;
  122.             -webkit-animation: colorchange5 1s infinite
  123.         }
  124.         #box7 {
  125.             animation: colorchange6 1s infinite;
  126.             -webkit-animation: colorchange6 1s infinite
  127.         }
  128.         #box8 {
  129.             animation: colorchange7 1s infinite;
  130.             -webkit-animation: colorchange7 1s infinite
  131.         }
  132.         #box9 {
  133.             animation: colorchange8 1s infinite;
  134.             -webkit-animation: colorchange8 1s infinite
  135.         }
  136.         .loading_wrapper {
  137.             width: 159px;
  138.             height: 159px;
  139.             display: grid;
  140.             grid-column-gap: 3px;
  141.             column-gap: 3px;
  142.             row-gap: 3px;
  143.             margin-top: -79px;
  144.             margin-left: -87px
  145.         }
  146.         @keyframes colorchange1 {
  147.             0% {
  148.                 background-color: #00264c
  149.             }
  150.             15% {
  151.                 background-color: #003e6d
  152.             }
  153.             30% {
  154.                 background-color: #00558d
  155.             }
  156.             45% {
  157.                 background-color: #0064a3
  158.             }
  159.             60% {
  160.                 background-color: #0072b5
  161.             }
  162.             75% {
  163.                 background-color: #0079bf
  164.             }
  165.             88% {
  166.                 background-color: #008dda
  167.             }
  168.             100% {
  169.                 background-color: #00a8ff
  170.             }
  171.         }
  172.         @-webkit-keyframes colorchange1 {
  173.             0% {
  174.                 background-color: #00264c
  175.             }
  176.             15% {
  177.                 background-color: #003e6d
  178.             }
  179.             30% {
  180.                 background-color: #00558d
  181.             }
  182.             45% {
  183.                 background-color: #0064a3
  184.             }
  185.             60% {
  186.                 background-color: #0072b5
  187.             }
  188.             75% {
  189.                 background-color: #0079bf
  190.             }
  191.             88% {
  192.                 background-color: #008dda
  193.             }
  194.             100% {
  195.                 background-color: #00a8ff
  196.             }
  197.         }
  198.         @keyframes colorchange2 {
  199.             0% {
  200.                 background-color: #00a8ff
  201.             }
  202.             15% {
  203.                 background-color: #00264c
  204.             }
  205.             30% {
  206.                 background-color: #003e6d
  207.             }
  208.             45% {
  209.                 background-color: #00558d
  210.             }
  211.             60% {
  212.                 background-color: #0064a3
  213.             }
  214.             75% {
  215.                 background-color: #0072b5
  216.             }
  217.             88% {
  218.                 background-color: #0079bf
  219.             }
  220.             100% {
  221.                 background-color: #008dda
  222.             }
  223.         }
  224.         @-webkit-keyframes colorchange2 {
  225.             0% {
  226.                 background-color: #00a8ff
  227.             }
  228.             15% {
  229.                 background-color: #00264c
  230.             }
  231.             30% {
  232.                 background-color: #003e6d
  233.             }
  234.             45% {
  235.                 background-color: #00558d
  236.             }
  237.             60% {
  238.                 background-color: #0064a3
  239.             }
  240.             75% {
  241.                 background-color: #0072b5
  242.             }
  243.             88% {
  244.                 background-color: #0079bf
  245.             }
  246.             100% {
  247.                 background-color: #008dda
  248.             }
  249.         }
  250.         @keyframes colorchange3 {
  251.             0% {
  252.                 background-color: #008dda
  253.             }
  254.             15% {
  255.                 background-color: #00a8ff
  256.             }
  257.             30% {
  258.                 background-color: #00264c
  259.             }
  260.             45% {
  261.                 background-color: #003e6d
  262.             }
  263.             60% {
  264.                 background-color: #00558d
  265.             }
  266.             75% {
  267.                 background-color: #0064a3
  268.             }
  269.             88% {
  270.                 background-color: #0072b5
  271.             }
  272.             100% {
  273.                 background-color: #0079bf
  274.             }
  275.         }
  276.         @-webkit-keyframes colorchange3 {
  277.             0% {
  278.                 background-color: #008dda
  279.             }
  280.             15% {
  281.                 background-color: #00a8ff
  282.             }
  283.             30% {
  284.                 background-color: #00264c
  285.             }
  286.             45% {
  287.                 background-color: #003e6d
  288.             }
  289.             60% {
  290.                 background-color: #00558d
  291.             }
  292.             75% {
  293.                 background-color: #0064a3
  294.             }
  295.             88% {
  296.                 background-color: #0072b5
  297.             }
  298.             100% {
  299.                 background-color: #0079bf
  300.             }
  301.         }
  302.         @keyframes colorchange4 {
  303.             0% {
  304.                 background-color: #0079bf
  305.             }
  306.             15% {
  307.                 background-color: #008dda
  308.             }
  309.             30% {
  310.                 background-color: #00a8ff
  311.             }
  312.             45% {
  313.                 background-color: #00264c
  314.             }
  315.             60% {
  316.                 background-color: #003e6d
  317.             }
  318.             75% {
  319.                 background-color: #00558d
  320.             }
  321.             88% {
  322.                 background-color: #0064a3
  323.             }
  324.             100% {
  325.                 background-color: #0072b5
  326.             }
  327.         }
  328.         @-webkit-keyframes colorchange4 {
  329.             0% {
  330.                 background-color: #0079bf
  331.             }
  332.             15% {
  333.                 background-color: #008dda
  334.             }
  335.             30% {
  336.                 background-color: #00a8ff
  337.             }
  338.             45% {
  339.                 background-color: #00264c
  340.             }
  341.             60% {
  342.                 background-color: #003e6d
  343.             }
  344.             75% {
  345.                 background-color: #00558d
  346.             }
  347.             88% {
  348.                 background-color: #0064a3
  349.             }
  350.             100% {
  351.                 background-color: #0072b5
  352.             }
  353.         }
  354.         @keyframes colorchange5 {
  355.             0% {
  356.                 background-color: #0072b5
  357.             }
  358.             15% {
  359.                 background-color: #0079bf
  360.             }
  361.             30% {
  362.                 background-color: #008dda
  363.             }
  364.             45% {
  365.                 background-color: #00a8ff
  366.             }
  367.             60% {
  368.                 background-color: #00264c
  369.             }
  370.             75% {
  371.                 background-color: #003e6d
  372.             }
  373.             88% {
  374.                 background-color: #00558d
  375.             }
  376.             100% {
  377.                 background-color: #0064a3
  378.             }
  379.         }
  380.         @-webkit-keyframes colorchange5 {
  381.             0% {
  382.                 background-color: #0072b5
  383.             }
  384.             15% {
  385.                 background-color: #0079bf
  386.             }
  387.             30% {
  388.                 background-color: #008dda
  389.             }
  390.             45% {
  391.                 background-color: #00a8ff
  392.             }
  393.             60% {
  394.                 background-color: #00264c
  395.             }
  396.             75% {
  397.                 background-color: #003e6d
  398.             }
  399.             88% {
  400.                 background-color: #00558d
  401.             }
  402.             100% {
  403.                 background-color: #0064a3
  404.             }
  405.         }
  406.         @keyframes colorchange6 {
  407.             0% {
  408.                 background-color: #0064a3
  409.             }
  410.             15% {
  411.                 background-color: #0072b5
  412.             }
  413.             30% {
  414.                 background-color: #0079bf
  415.             }
  416.             45% {
  417.                 background-color: #008dda
  418.             }
  419.             60% {
  420.                 background-color: #00a8ff
  421.             }
  422.             75% {
  423.                 background-color: #00264c
  424.             }
  425.             88% {
  426.                 background-color: #003e6d
  427.             }
  428.             100% {
  429.                 background-color: #00558d
  430.             }
  431.         }
  432.         @-webkit-keyframes colorchange6 {
  433.             0% {
  434.                 background-color: #0064a3
  435.             }
  436.             15% {
  437.                 background-color: #0072b5
  438.             }
  439.             30% {
  440.                 background-color: #0079bf
  441.             }
  442.             45% {
  443.                 background-color: #008dda
  444.             }
  445.             60% {
  446.                 background-color: #00a8ff
  447.             }
  448.             75% {
  449.                 background-color: #00264c
  450.             }
  451.             88% {
  452.                 background-color: #003e6d
  453.             }
  454.             100% {
  455.                 background-color: #00558d
  456.             }
  457.         }
  458.         @keyframes colorchange7 {
  459.             0% {
  460.                 background-color: #00558d
  461.             }
  462.             15% {
  463.                 background-color: #0064a3
  464.             }
  465.             30% {
  466.                 background-color: #0072b5
  467.             }
  468.             45% {
  469.                 background-color: #0079bf
  470.             }
  471.             60% {
  472.                 background-color: #008dda
  473.             }
  474.             75% {
  475.                 background-color: #00a8ff
  476.             }
  477.             88% {
  478.                 background-color: #00264c
  479.             }
  480.             100% {
  481.                 background-color: #003e6d
  482.             }
  483.         }
  484.         @-webkit-keyframes colorchange7 {
  485.             0% {
  486.                 background-color: #00558d
  487.             }
  488.             15% {
  489.                 background-color: #0064a3
  490.             }
  491.             30% {
  492.                 background-color: #0072b5
  493.             }
  494.             45% {
  495.                 background-color: #0079bf
  496.             }
  497.             60% {
  498.                 background-color: #008dda
  499.             }
  500.             75% {
  501.                 background-color: #00a8ff
  502.             }
  503.             88% {
  504.                 background-color: #00264c
  505.             }
  506.             100% {
  507.                 background-color: #003e6d
  508.             }
  509.         }
  510.         @keyframes colorchange8 {
  511.             0% {
  512.                 background-color: #003e6d
  513.             }
  514.             15% {
  515.                 background-color: #00558d
  516.             }
  517.             30% {
  518.                 background-color: #0064a3
  519.             }
  520.             45% {
  521.                 background-color: #0072b5
  522.             }
  523.             60% {
  524.                 background-color: #0079bf
  525.             }
  526.             75% {
  527.                 background-color: #008dda
  528.             }
  529.             88% {
  530.                 background-color: #00a8ff
  531.             }
  532.             100% {
  533.                 background-color: #00264c
  534.             }
  535.         }
  536.         @-webkit-keyframes colorchange8 {
  537.             0% {
  538.                 background-color: #003e6d
  539.             }
  540.             15% {
  541.                 background-color: #00558d
  542.             }
  543.             30% {
  544.                 background-color: #0064a3
  545.             }
  546.             45% {
  547.                 background-color: #0072b5
  548.             }
  549.             60% {
  550.                 background-color: #0079bf
  551.             }
  552.             75% {
  553.                 background-color: #008dda
  554.             }
  555.             88% {
  556.                 background-color: #00a8ff
  557.             }
  558.             100% {
  559.                 background-color: #00264c
  560.             }
  561.         }
  562.         /* END LOADING ANIMATION */
  563.         .overlayContentWrapper {
  564.             position: fixed;
  565.             top: 50%;
  566.             transform: translateY(-50%);
  567.             left: 50%;
  568.         }
  569.         .overlayProgressBarWrapper {
  570.             width: 698px;
  571.             background-color: #00a8ff;
  572.             margin-left: -355px;
  573.             position: relative;
  574.             margin-top: 10px;
  575.         }
  576.         .overlayProgressBarTitle {
  577.             width: 698px;
  578.             color: white;
  579.             margin-left: -355px;
  580.             margin-top: 10px;
  581.         }
  582.         .overlayProgressBar {
  583.             width: 1%;
  584.             height: 20px;
  585.             background-color: #00264c;
  586.         }
  587.         .overlayProgressBarText {
  588.             position: absolute;
  589.             top: 0;
  590.             left: 50%;
  591.             transform: translateX(-50%);
  592.             color: white;
  593.         }
  594.     </style>
  595.     {% block stylesheets %}{% endblock %}
  596. </head>
  597. <body style="background-color: whitesmoke;">
  598. {% block header %}{% endblock %}
  599. {% block body %}{% endblock %}
  600. <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
  601. <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
  602.         integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
  603.         crossorigin="anonymous"></script>
  604. <script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
  605.         integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
  606.         crossorigin="anonymous"></script>
  607. <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
  608. <script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
  609. <script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.js"></script>
  610. <script type="text/javascript" src="https://kit.fontawesome.com/f06b2c1b8b.js" crossorigin="anonymous"></script>
  611. <script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/French.json"></script>
  612. <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
  613. <script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
  614. <script type="text/javascript">
  615.     $.fn.dataTable.moment( 'DD/MM/YYYY' );
  616.     $(document).ready(function () {
  617.         //Get language
  618.         var SearchBarText;
  619.         var language = $('#language')[0].textContent;
  620.         switch (language) {
  621.             case 'fr':
  622.                 langue = 'French';
  623.                 SearchBarText = 'Chercher'
  624.                 break;
  625.             case 'en':
  626.                 langue = 'English';
  627.                 SearchBarText = 'Search'
  628.                 break;
  629.             case 'pl':
  630.                 langue = 'Polish';
  631.                 SearchBarText = ''
  632.                 break;
  633.         }
  634.         // Setup - add a text input to each footer cell
  635.         $('#Table tfoot th').each(function () {
  636.             var title = $(this).text();
  637.             if (title) {
  638.                 $(this).html('<input type="text" placeholder="' + SearchBarText + ' ' + title + '" />');
  639.             }
  640.         });
  641.     });
  642. </script>
  643. {% block javascripts %}{% endblock %}
  644. </body>
  645. </html>