<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Planning Professionnel</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background-color: #f0f4f8;
color: #333;
}
.container {
background-color: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
animation: fadeIn 0.5s ease-out;
width: 90%;
max-width: 1200px;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
margin-top: 20px;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
th, td {
border: 1px solid #e0e0e0;
padding: 15px;
text-align: center;
transition: all 0.3s ease;
}
th {
background-color: #3c6e71;
color: white;
font-weight: bold;
text-transform: uppercase;
}
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #f0f0f0;
}
.conge {
background-color: #ffd6d6;
animation: pulse 1s infinite;
}
.ferie {
background-color: #d4edda;
animation: sparkle 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
@keyframes sparkle {
0% { box-shadow: 0 0 0 0 rgba(0,128,0,0.4); }
70% { box-shadow: 0 0 0 10px rgba(0,128,0,0); }
100% { box-shadow: 0 0 0 0 rgba(0,128,0,0); }
}
#datePicker {
margin-bottom: 20px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
width: 200px;
}
.emoji {
font-size: 20px;
margin-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<input type="date" id="datePicker">
<table id="planningTable">
<tr>
<th colspan="3">Équipe EXE</th>
</tr>
<tr>
<th>Nom</th>
<th>Matin</th>
<th>Après-midi</th>
</tr>
<tr>
<td>Youssef</td>
<td class="morning"></td>
<td class="afternoon"></td>
</tr>
<tr>
<td>Samir</td>
<td class="morning"></td>
<td class="afternoon"></td>
</tr>
<tr>
<td>Mohamed</td>
<td class="morning"></td>
<td class="afternoon"></td>
</tr>
<tr>
<th colspan="3">Équipe Créa</th>
</tr>
<tr>
<td>Khalid</td>
<td class="morning"></td>
<td class="afternoon"></td>
</tr>
<tr>
<td>Kenza</td>
<td class="morning"></td>
<td class="afternoon"></td>
</tr>
</table>
</div>
<script>
const planning = {
Youssef: { matin: "8:00 - 13:00", apresmidi: "14:00 - 17:00" },
Samir: { matin: "9:00 - 14:00", apresmidi: "15:00 - 18:00" },
Mohamed: { matin: "9:00 - 13:30", apresmidi: "14:30 - 18:00" },
Khalid: { matin: "9:30 - 13:30", apresmidi: "14:30 - 18:30" },
Kenza: { matin: "9:30 - 14:30", apresmidi: "15:30 - 18:30" }
};
const conges = {
Youssef: { debut: new Date(2024, 7, 12), fin: new Date(2024, 8, 1) },
Khalid: { debut: new Date(2024, 7, 26), fin: new Date(2024, 8, 1) }
};
const joursFeries = {
"2024-01-01": "Jour de l'An",
"2024-04-01": "Lundi de Pâques",
"2024-05-01": "Fête du Travail",
"2024-05-08": "Victoire 1945",
"2024-05-09": "Ascension",
"2024-05-20": "Lundi de Pentecôte",
"2024-07-14": "Fête Nationale",
"2024-08-15": "Assomption",
"2024-11-01": "Toussaint",
"2024-11-11": "Armistice 1918",
"2024-12-25": "Noël"
};
function updatePlanning() {
const date = new Date(datePicker.value);
const dateString = date.toISOString().split('T')[0];
document.querySelectorAll('tr').forEach(row => {
const name = row.cells[0].textContent;
if (planning[name]) {
const morningCell = row.querySelector('.morning');
const afternoonCell = row.querySelector('.afternoon');
if (joursFeries[dateString]) {
const content = `<span class="emoji">🎉</span>${joursFeries[dateString]}`;
morningCell.innerHTML = content;
afternoonCell.innerHTML = content;
morningCell.classList.add('ferie');
afternoonCell.classList.add('ferie');
} else if (conges[name] && date >= conges[name].debut && date <= conges[name].fin) {
const content = `<span class="emoji">🏖️</span>Congé`;
morningCell.innerHTML = content;
afternoonCell.innerHTML = content;
morningCell.classList.add('conge');
afternoonCell.classList.add('conge');
} else {
morningCell.textContent = planning[name].matin;
afternoonCell.textContent = planning[name].apresmidi;
morningCell.classList.remove('conge', 'ferie');
afternoonCell.classList.remove('conge', 'ferie');
}
}
});
}
const datePicker = document.getElementById('datePicker');
datePicker.valueAsDate = new Date();
datePicker.addEventListener('change', updatePlanning);
updatePlanning();
</script>
</body>
</html>