<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Welcome!{% endblock %}</title>
<link rel="stylesheet" href="https://bootswatch.com/4/lumen/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style type="text/css">
select {
color: #444;
border-radius: 0.2em;
margin: 0 1rem 1rem 0;
padding: 0.2rem 1rem;
}
th {
color: #158cba;
}
.table td {
padding: .3rem .5rem;
}
.table .odd {
background-color: ghostwhite;
}
.nav-item {
list-style: none;
}
button {
padding: .2rem .4rem !important;
}
.top {
display: flex;
justify-content: space-between;
}
tfoot {
display: table-header-group;
}
tfoot input {
margin-left: -.75rem;
width: 100%;
padding: 3px;
box-sizing: inherit;
}
.content-separator {
width: 100%;
height: 1px;
background-color: #dee2e6;
margin-bottom: 10px;
}
.dataTables_wrapper > .top{
height: 38px;
}
.dataTables_wrapper > .top .dataTables_length label{
display: flex;
align-items: baseline;
}
.dataTables_wrapper > .top .dataTables_length label select{
margin-left: 5px;
margin-right: 5px;
}
.bottom {
padding-top: 1rem;
}
.overlay {
position: fixed;
text-align: center;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000000000;
background-color: rgba(0, 38, 76, 0.5);
}
.overlay:hover {
cursor: wait;
}
/* LOADING ANIMATION */
+ #box1, #box2, #box3 {
grid-row: 1
}
#box3, #box4, #box6 {
grid-column: 3
}
#box2, #box5, #box7 {
grid-column: 2
}
#box6, #box7, #box8 {
grid-row: 3
}
#box4, #box5, #box9 {
grid-row: 2
}
#box1, #box8, #box9 {
grid-column: 1
}
.box {
float: left;
position: relative;
width: 50px;
height: 50px
}
#box1 {
animation: colorchange1 1s infinite;
-webkit-animation: colorchange1 1s infinite
}
#box2 {
animation: colorchange2 1s infinite;
-webkit-animation: colorchange2 1s infinite
}
#box3 {
animation: colorchange3 1s infinite;
-webkit-animation: colorchange3 1s infinite
}
#box4 {
animation: colorchange4 1s infinite;
-webkit-animation: colorchange4 1s infinite
}
#box6 {
animation: colorchange5 1s infinite;
-webkit-animation: colorchange5 1s infinite
}
#box7 {
animation: colorchange6 1s infinite;
-webkit-animation: colorchange6 1s infinite
}
#box8 {
animation: colorchange7 1s infinite;
-webkit-animation: colorchange7 1s infinite
}
#box9 {
animation: colorchange8 1s infinite;
-webkit-animation: colorchange8 1s infinite
}
.loading_wrapper {
width: 159px;
height: 159px;
display: grid;
grid-column-gap: 3px;
column-gap: 3px;
row-gap: 3px;
margin-top: -79px;
margin-left: -87px
}
@keyframes colorchange1 {
0% {
background-color: #00264c
}
15% {
background-color: #003e6d
}
30% {
background-color: #00558d
}
45% {
background-color: #0064a3
}
60% {
background-color: #0072b5
}
75% {
background-color: #0079bf
}
88% {
background-color: #008dda
}
100% {
background-color: #00a8ff
}
}
@-webkit-keyframes colorchange1 {
0% {
background-color: #00264c
}
15% {
background-color: #003e6d
}
30% {
background-color: #00558d
}
45% {
background-color: #0064a3
}
60% {
background-color: #0072b5
}
75% {
background-color: #0079bf
}
88% {
background-color: #008dda
}
100% {
background-color: #00a8ff
}
}
@keyframes colorchange2 {
0% {
background-color: #00a8ff
}
15% {
background-color: #00264c
}
30% {
background-color: #003e6d
}
45% {
background-color: #00558d
}
60% {
background-color: #0064a3
}
75% {
background-color: #0072b5
}
88% {
background-color: #0079bf
}
100% {
background-color: #008dda
}
}
@-webkit-keyframes colorchange2 {
0% {
background-color: #00a8ff
}
15% {
background-color: #00264c
}
30% {
background-color: #003e6d
}
45% {
background-color: #00558d
}
60% {
background-color: #0064a3
}
75% {
background-color: #0072b5
}
88% {
background-color: #0079bf
}
100% {
background-color: #008dda
}
}
@keyframes colorchange3 {
0% {
background-color: #008dda
}
15% {
background-color: #00a8ff
}
30% {
background-color: #00264c
}
45% {
background-color: #003e6d
}
60% {
background-color: #00558d
}
75% {
background-color: #0064a3
}
88% {
background-color: #0072b5
}
100% {
background-color: #0079bf
}
}
@-webkit-keyframes colorchange3 {
0% {
background-color: #008dda
}
15% {
background-color: #00a8ff
}
30% {
background-color: #00264c
}
45% {
background-color: #003e6d
}
60% {
background-color: #00558d
}
75% {
background-color: #0064a3
}
88% {
background-color: #0072b5
}
100% {
background-color: #0079bf
}
}
@keyframes colorchange4 {
0% {
background-color: #0079bf
}
15% {
background-color: #008dda
}
30% {
background-color: #00a8ff
}
45% {
background-color: #00264c
}
60% {
background-color: #003e6d
}
75% {
background-color: #00558d
}
88% {
background-color: #0064a3
}
100% {
background-color: #0072b5
}
}
@-webkit-keyframes colorchange4 {
0% {
background-color: #0079bf
}
15% {
background-color: #008dda
}
30% {
background-color: #00a8ff
}
45% {
background-color: #00264c
}
60% {
background-color: #003e6d
}
75% {
background-color: #00558d
}
88% {
background-color: #0064a3
}
100% {
background-color: #0072b5
}
}
@keyframes colorchange5 {
0% {
background-color: #0072b5
}
15% {
background-color: #0079bf
}
30% {
background-color: #008dda
}
45% {
background-color: #00a8ff
}
60% {
background-color: #00264c
}
75% {
background-color: #003e6d
}
88% {
background-color: #00558d
}
100% {
background-color: #0064a3
}
}
@-webkit-keyframes colorchange5 {
0% {
background-color: #0072b5
}
15% {
background-color: #0079bf
}
30% {
background-color: #008dda
}
45% {
background-color: #00a8ff
}
60% {
background-color: #00264c
}
75% {
background-color: #003e6d
}
88% {
background-color: #00558d
}
100% {
background-color: #0064a3
}
}
@keyframes colorchange6 {
0% {
background-color: #0064a3
}
15% {
background-color: #0072b5
}
30% {
background-color: #0079bf
}
45% {
background-color: #008dda
}
60% {
background-color: #00a8ff
}
75% {
background-color: #00264c
}
88% {
background-color: #003e6d
}
100% {
background-color: #00558d
}
}
@-webkit-keyframes colorchange6 {
0% {
background-color: #0064a3
}
15% {
background-color: #0072b5
}
30% {
background-color: #0079bf
}
45% {
background-color: #008dda
}
60% {
background-color: #00a8ff
}
75% {
background-color: #00264c
}
88% {
background-color: #003e6d
}
100% {
background-color: #00558d
}
}
@keyframes colorchange7 {
0% {
background-color: #00558d
}
15% {
background-color: #0064a3
}
30% {
background-color: #0072b5
}
45% {
background-color: #0079bf
}
60% {
background-color: #008dda
}
75% {
background-color: #00a8ff
}
88% {
background-color: #00264c
}
100% {
background-color: #003e6d
}
}
@-webkit-keyframes colorchange7 {
0% {
background-color: #00558d
}
15% {
background-color: #0064a3
}
30% {
background-color: #0072b5
}
45% {
background-color: #0079bf
}
60% {
background-color: #008dda
}
75% {
background-color: #00a8ff
}
88% {
background-color: #00264c
}
100% {
background-color: #003e6d
}
}
@keyframes colorchange8 {
0% {
background-color: #003e6d
}
15% {
background-color: #00558d
}
30% {
background-color: #0064a3
}
45% {
background-color: #0072b5
}
60% {
background-color: #0079bf
}
75% {
background-color: #008dda
}
88% {
background-color: #00a8ff
}
100% {
background-color: #00264c
}
}
@-webkit-keyframes colorchange8 {
0% {
background-color: #003e6d
}
15% {
background-color: #00558d
}
30% {
background-color: #0064a3
}
45% {
background-color: #0072b5
}
60% {
background-color: #0079bf
}
75% {
background-color: #008dda
}
88% {
background-color: #00a8ff
}
100% {
background-color: #00264c
}
}
/* END LOADING ANIMATION */
.overlayContentWrapper {
position: fixed;
top: 50%;
transform: translateY(-50%);
left: 50%;
}
.overlayProgressBarWrapper {
width: 698px;
background-color: #00a8ff;
margin-left: -355px;
position: relative;
margin-top: 10px;
}
.overlayProgressBarTitle {
width: 698px;
color: white;
margin-left: -355px;
margin-top: 10px;
}
.overlayProgressBar {
width: 1%;
height: 20px;
background-color: #00264c;
}
.overlayProgressBarText {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
color: white;
}
</style>
{% block stylesheets %}{% endblock %}
</head>
<body style="background-color: whitesmoke;">
{% block header %}{% endblock %}
{% block body %}{% endblock %}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.22/datatables.min.js"></script>
<script type="text/javascript" src="https://kit.fontawesome.com/f06b2c1b8b.js" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.datatables.net/plug-ins/1.10.21/i18n/French.json"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/1.10.25/sorting/datetime-moment.js"></script>
<script type="text/javascript">
$.fn.dataTable.moment( 'DD/MM/YYYY' );
$(document).ready(function () {
//Get language
var SearchBarText;
var language = $('#language')[0].textContent;
switch (language) {
case 'fr':
langue = 'French';
SearchBarText = 'Chercher'
break;
case 'en':
langue = 'English';
SearchBarText = 'Search'
break;
case 'pl':
langue = 'Polish';
SearchBarText = ''
break;
}
// Setup - add a text input to each footer cell
$('#Table tfoot th').each(function () {
var title = $(this).text();
if (title) {
$(this).html('<input type="text" placeholder="' + SearchBarText + ' ' + title + '" />');
}
});
});
</script>
{% block javascripts %}{% endblock %}
</body>
</html>