Ajouts RH

This commit is contained in:
stiti 2024-10-18 19:07:09 +02:00
parent 233622142f
commit a5dc0ec8a0
27 changed files with 1361 additions and 334 deletions

@ -7,6 +7,7 @@
<title>Dashboard Chef de département</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/chef_departement2.css">
</head>

@ -8,6 +8,7 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
<link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
/* Styles pour le modal */
.modal {

@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
<style>
/* Styles pour le modal */

@ -7,6 +7,7 @@
<title>Pilotage Budgétaire</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
<style>
.container {

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Financier</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
</head>
<body>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Historique des Transactions</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
<style>
.dashboard-container {

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paiements en Attente</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/FINANCE/finance.css">
<style>

@ -5,6 +5,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index des Rapports Financiers</title>
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/FINANCE/style.css">
<style>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard enseignant permanent</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
</head>
<body>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Heures</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../../css/PROF/mes-heures.css">
</head>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mes Informations</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/mes-infos.css">
</head>
<body>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifications</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
<style>
/* Ajout d'un style pour le conteneur des notifications */

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Suivi des Paiements</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="../../css/PROF/paiements.css">
</head>

@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paramètres Utilisateur</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
<style>
.header {

@ -7,6 +7,7 @@
<link rel="stylesheet" href="../../css/RH/style.css">
<link rel="stylesheet" href="../../css/RH/rh.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<title>Gestion des Candidatures</title>
</head>
@ -32,12 +33,18 @@
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name w3-padding-16">
Alice BERGER
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
@ -45,54 +52,69 @@
<div class="w3-container">
<div class="w3-row">
<div class="w3-col s10">
<div class="w3-col l10 m12 s12"> <!-- Pour large, medium et small devices -->
<h2>Candidatures en Attente de Validation</h2>
</div>
</div>
<!-- Barre de recherche -->
<div class="w3-margin-bottom">
<input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()" class="w3-input w3-border">
</div>
<!-- Conteneur de tri -->
<div class="w3-margin-bottom">
<button class="w3-button w3-green" onclick="sortTable(0)">Trier par Nom</button>
<button class="w3-button w3-green" onclick="sortTable(1)">Trier par Prénom</button>
<button class="w3-button w3-green" onclick="sortTable(2)">Trier par Formation</button>
<button class="w3-button w3-green" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
<div class="w3-margin-bottom w3-row">
<!-- Boutons empilés sur les petits écrans -->
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(0)">Trier par Nom</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(1)">Trier par Prénom</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom" style="padding-right: 8px;">
<button class="w3-button w3-green w3-block w3-small" style="padding: 5px;" onclick="sortTable(2)">Trier par Formation</button>
</div>
<div class="w3-col l2 m6 s12 w3-margin-bottom">
<button class="w3-button w3-blue w3-block w3-small" style="padding: 5px;" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
</div>
</div>
<table class="w3-table w3-bordered w3-white">
<thead>
<tr class="w3-green">
<th>Nom</th>
<th>Prénom</th>
<th>Formation</th>
<th>Action</th>
</tr>
</thead>
<tbody id="candidatures-table">
<tr>
<td>Mike</td>
<td>Michel</td>
<td>Informatique - BUT1</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
</td>
</tr>
<tr>
<td>John</td>
<td>Williams</td>
<td>Mathématiques - BUT GEA</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
</td>
</tr>
<!-- Ajoutez d'autres lignes ici -->
</tbody>
</table>
<!-- Tableau responsive -->
<div class="w3-responsive">
<table class="w3-table w3-bordered w3-white">
<thead>
<tr class="w3-green">
<th>Nom</th>
<th>Prénom</th>
<th>Formation</th>
<th>Durée</th>
<th>Action</th>
</tr>
</thead>
<tbody id="candidatures-table">
<tr>
<td>Mike</td>
<td>Michel</td>
<td>Informatique - BUT1</td>
<td>1 semestre (120h)</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
</td>
</tr>
<tr>
<td>John</td>
<td>Williams</td>
<td>Mathématiques - BUT GEA</td>
<td>2 semestre (180h)</td>
<td>
<button class="w3-button w3-green" onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal pour consulter le dossier de candidature -->
<div id="dossierModal" class="w3-modal">
@ -108,8 +130,8 @@
<button class="w3-button w3-lime" style="margin-bottom: 10px;" onclick="ajouterCommentaire()">Ajouter Commentaire</button>
</div>
<div>
<button class="w3-button w3-green" onclick="validerDossier()">Valider Dossier</button>
<button class="w3-button w3-red" onclick="refuserDossier()">Refuser Dossier</button>
<button class="w3-button w3-green w3-margin-bottom" onclick="validerDossier()">Valider Dossier</button>
<button class="w3-button w3-red w3-margin-bottom" onclick="refuserDossier()">Refuser Dossier</button>
</div>
</div>
</div>
@ -131,7 +153,7 @@
<label for="duree">Durée (en jours) :</label>
<input type="number" id="duree" name="duree" min="1" required class="w3-input w3-border">
<button type="submit" class="w3-button w3-green">Soumettre l'Offre</button>
<button type="submit" class="w3-button w3-green w3-margin-top w3-margin-bottom">Soumettre l'Offre</button>
</form>
</div>
</div>

@ -4,10 +4,11 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pilotage Budgétaire</title>
<title>Heures</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/RH/style.css">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
.chart-container {
position: relative;
@ -113,12 +114,18 @@
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name w3-padding-16">
Alice BERGER
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion" style="width:25px; height:25px;">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
@ -135,7 +142,7 @@
<div class="section-header">
<h2>Suivi des demandes de modification d'heures</h2>
</div>
<div class="card">
<div class="card w3-responsive">
<table class="w3-table-all" id="teaching-hours-table">
<thead>
<tr>
@ -184,65 +191,68 @@
</table>
</div>
<h2>Heures des Professeurs</h2>
<table class="info-table" id="professorTable">
<thead>
<tr>
<th>Professeur</th>
<th>Nombre d'heures</th>
<th>Statut</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Denis MONNERAT</td>
<td>120h</td>
<td>Permanents</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
<button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
</td>
</tr>
<tr class="details" id="denis-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 30h</li>
<li>BUT2 Groupe 2 : 40h</li>
<li>BUT3 Groupe 1 : 50h</li>
</ul>
<div class="chart-container">
<canvas id="denisChart"></canvas>
</div>
</td>
</tr>
<tr>
<td>Maxime MENAULT</td>
<td>90h</td>
<td>Vacataire</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
<button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
</td>
</tr>
<tr class="details" id="menault-details">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 45h</li>
<li>BUT2 Groupe 3 : 45h</li>
</ul>
<div class="chart-container">
<canvas id="menaultChart"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="w3-container">
<h2>Heures des Professeurs</h2>
<!-- Table des heures des professeurs -->
<div class="w3-responsive"> <!-- Classe pour la réactivité -->
<table class="info-table" id="professorTable">
<thead>
<tr>
<th>Professeur</th>
<th>Nombre d'heures</th>
<th>Statut</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>Denis MONNERAT</td>
<td>120h</td>
<td>Permanents</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
<button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
</td>
</tr>
<tr class="details" id="denis-details" style="display: none;">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 30h</li>
<li>BUT2 Groupe 2 : 40h</li>
<li>BUT3 Groupe 1 : 50h</li>
</ul>
<div class="chart-container">
<canvas id="denisChart" width="200" height="100"></canvas>
</div>
</td>
</tr>
<tr>
<td>Maxime MENAULT</td>
<td>90h</td>
<td>Vacataire</td>
<td>
<button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
<button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
</td>
</tr>
<tr class="details" id="menault-details" style="display: none;">
<td colspan="4">
<strong>Historique des heures :</strong>
<ul>
<li>BUT1 Groupe 1 : 45h</li>
<li>BUT2 Groupe 3 : 45h</li>
</ul>
<div class="chart-container">
<canvas id="menaultChart" width="200" height="100"></canvas>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
@ -355,7 +365,7 @@
</form>
</div>
</div>
<div class="footer">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
@ -379,14 +389,14 @@
label: 'Heures des Professeurs par Catégorie',
data: heuresParCategorie,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
'rgba(255, 99, 132, 0.7)', // Couleur rouge plus foncée
'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
'rgba(255, 99, 132, 1)', // Bordure rouge opaque
'rgba(54, 162, 235, 1)', // Bordure bleue opaque
'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
borderWidth: 1
}]
@ -412,14 +422,14 @@
label: 'Répartition des heures',
data: heures,
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)'
'rgba(255, 99, 132, 0.7)', // Couleur rouge plus foncée
'rgba(54, 162, 235, 0.7)', // Couleur bleue plus foncée
'rgba(255, 206, 86, 0.7)' // Couleur jaune plus foncée
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)'
'rgba(255, 99, 132, 1)', // Bordure rouge opaque
'rgba(54, 162, 235, 1)', // Bordure bleue opaque
'rgba(255, 206, 86, 1)' // Bordure jaune opaque
],
borderWidth: 1
}]
@ -688,6 +698,18 @@ function deleteVacationOffer(button) {
row.parentElement.removeChild(row);
}
</script>
<script>
function toggleMenu() {
var menu = document.getElementById('menu');
var nom = document.getElementById('user-section');
if (menu.classList.contains('w3-hide-small')) {
menu.classList.remove('w3-hide-small');
menu.classList.remove('user-section');
} else {
menu.classList.add('w3-hide-small');
}
}
</script>
</body>

File diff suppressed because it is too large Load Diff

@ -7,6 +7,7 @@
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/RH/rh.css">
<link rel="stylesheet" href="../../css/RH/style.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
body {
font-family: Arial, sans-serif;
@ -251,22 +252,36 @@
</head>
<body>
<div class="header">
<div class="logo-container">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
<div class="logo-container w3-bar-item">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
</div>
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>
<!-- Bouton burger pour petit écran -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()"></a>
<div class="user-section">
<div class="user-name">Alice BERGER</div>
<div class="logout-container">
<!-- Catégories dans le header -->
<div id="menu" class="categories w3-hide-small w3-bar-item">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
</div>
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
@ -514,6 +529,18 @@
}
</script>
<script>
function toggleMenu() {
var menu = document.getElementById('menu');
var nom = document.getElementById('user-section');
if (menu.classList.contains('w3-hide-small')) {
menu.classList.remove('w3-hide-small');
menu.classList.remove('user-section');
} else {
menu.classList.add('w3-hide-small');
}
}
</script>
</body>
</html>

@ -0,0 +1,156 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notifications</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/RH/style.css">
<link rel="stylesheet" href="../../css/RH/rh.css">
<style>
/* Ajout d'un style pour le conteneur des notifications */
#notifications-container {
border: 1px solid #ccc; /* Bordure autour du conteneur */
border-radius: 8px; /* Coins arrondis */
padding: 16px; /* Espacement intérieur */
margin-top: 16px; /* Espacement supérieur */
max-height: 300px; /* Hauteur maximale */
overflow-y: auto; /* Ajout de défilement si le contenu dépasse */
background-color: #f9f9f9; /* Couleur de fond */
}
/* Amélioration de l'apparence des notifications */
.alert, .success {
margin: 8px 0; /* Marge entre les notifications */
}
</style>
</head>
<body class="w3-light-grey">
<!-- Header -->
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
<div class="logo-container w3-bar-item">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
</div>
<!-- Bouton burger pour petit écran -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()"></a>
<!-- Catégories dans le header -->
<div id="menu" class="categories w3-hide-small w3-bar-item">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
</div>
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
</div>
<!-- Alertes et Notifications -->
<div class="w3-container w3-white w3-card-4 w3-margin-bottom">
<h2 class="w3-text-dark-gray">Alertes et Notifications</h2>
<div id="notifications-container">
<!-- Notifications -->
<div class="w3-panel w3-red alert">
<span class="w3-closebtn close" onclick="removeNotification(this);">&times;</span>
<p><strong>Validation de Candidature :</strong> Une nouvelle candidature a été soumise pour l'offre de vacation n°383. Veuillez la consulter et valider dans les plus brefs délais dans (la candidature expire dans 26 jours) : <a href="./candidature.html">Candidatures</a>.</p>
</div>
<div class="w3-panel w3-green success">
<span class="w3-closebtn close" onclick="removeNotification(this);">&times;</span>
<p><strong>Demande de paiement :</strong> Le service financier a procédé au paiement de Jean DUPONT. Vous pouvez consulter les détails : <a href="gestion_personnel.html">Gestion du personnel</a>.</p>
</div>
</div>
<!-- Bouton pour tout effacer -->
<button id="clear-notifications" class="w3-button w3-dark-grey w3-margin-top w3-margin-bottom" onclick="clearAllNotifications();">Tout effacer</button>
<!-- Message quand aucune notification n'est présente -->
<div id="no-notifications-message" class="w3-hide w3-padding-16 w3-text-gray">
<p>Vous n'avez pas de notifications pour le moment !</p>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="w3-center w3-padding w3-text-white footer" style="background-color: #0f431f;">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</footer>
<script>
function removeNotification(element) {
// Supprime la notification
const notification = element.parentElement;
notification.style.display = 'none';
// Vérifier s'il reste des notifications
checkNotifications();
}
function clearAllNotifications() {
const notifications = document.getElementById('notifications-container');
let hasNotifications = false;
// Cacher toutes les notifications
Array.from(notifications.children).forEach(notification => {
if (notification.style.display !== 'none') {
notification.style.display = 'none';
hasNotifications = true; // Au moins une notification a été cachée
}
});
// Vérifier s'il reste des notifications
if (hasNotifications) {
checkNotifications(); // Vérifie les notifications restantes
}
}
function checkNotifications() {
const notifications = document.getElementById('notifications-container');
const noNotificationsMessage = document.getElementById('no-notifications-message');
const visibleNotifications = Array.from(notifications.children).some(notification => notification.style.display !== 'none');
if (!visibleNotifications) {
noNotificationsMessage.classList.remove('w3-hide');
document.getElementById('clear-notifications').style.display = 'none'; // Cacher le bouton "Tout effacer"
} else {
noNotificationsMessage.classList.add('w3-hide');
document.getElementById('clear-notifications').style.display = 'block'; // Montrer le bouton "Tout effacer"
}
}
</script>
<script>
function toggleMenu() {
var menu = document.getElementById('menu');
var nom = document.getElementById('user-section');
if (menu.classList.contains('w3-hide-small')) {
menu.classList.remove('w3-hide-small');
menu.classList.remove('user-section');
} else {
menu.classList.add('w3-hide-small');
}
}
</script>
</body>
</html>

@ -3,9 +3,10 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Vacataire</title>
<title>Dashboard RH</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<style>
.header {
background-color: #0f431f;
@ -46,22 +47,37 @@
</head>
<body>
<div class="header">
<div class="logo-container">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
<div class="logo-container w3-bar-item">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
</div>
<div class="categories">
<a href="./rh.html">Accueil</a>
<a href="./gestion_personnel.html">Gestion du personnel</a>
<a href="./gestion-heures.html">Heures</a>
<a href="./candidature.html">Candidatures</a>
<a href="./mes-informations.html">Mes informations et documents</a>
</div>
<!-- Bouton burger pour petit écran -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()"></a>
<div class="user-section">
<div class="user-name">Alice BERGER</div>
<div class="logout-container">
<!-- Catégories dans le header -->
<div id="menu" class="categories w3-hide-small w3-bar-item">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
</div>
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
@ -93,7 +109,7 @@
<div class="summary">
<p><strong>Heures Travaillées :</strong> 120 heures</p>
<p><strong>Heures à Payer :</strong> 30 heures</p>
<p><a href="./gestion_personnel.html" class="btn">Voir Détails</a></p>
<p><a href="./gestion-heures.html" class="btn">Voir Détails</a></p>
</div>
@ -127,5 +143,18 @@
</p>
</div>
<script>
function toggleMenu() {
var menu = document.getElementById('menu');
var nom = document.getElementById('user-section');
if (menu.classList.contains('w3-hide-small')) {
menu.classList.remove('w3-hide-small');
menu.classList.remove('user-section');
} else {
menu.classList.add('w3-hide-small');
}
}
</script>
</body>
</html>

@ -0,0 +1,251 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Paramètres Utilisateur</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" />
<link rel="stylesheet" href="../../css/RH/style.css">
<style>
.header {
background-color: #0f431f; /* Couleur par défaut */
color: white;
}
footer {
background-color: #0f431f; /* Couleur par défaut */
color: white;
}
.logo-container img {
width: 200px;
height: 50px;
}
.categories a {
font-weight: bold;
}
.btn {
background-color: #0f431f;
}
.btn:hover {
background-color: #0b3317;
}
/* Style par défaut */
body {
font-family: Arial, sans-serif;
}
/* Mode Daltonien et autres troubles visuels */
body.daltonien {
background-color: #e8f4ff; /* Meilleure visibilité pour le texte */
color: #2c2c2c;
}
.header {
background-color: #0f431f; /* Couleur par défaut */
}
body.daltonien .header {
background-color: #3b3a3a; /* Couleur plus neutre */
}
/* Couleur du footer en mode daltonien */
body.daltonien #footer {
background-color: #3b3a3a; /* Couleur plus neutre */
}
.daltonien .btn {
background-color: #31302d; /* Couleur facilement visible */
}
.daltonien .btn:hover {
background-color: #242321;
}
/* Grossissement des textes */
body.large-text {
font-size: 1.2em;
}
body.xlarge-text {
font-size: 1.5em;
}
</style>
</head>
<body class="w3-light-grey" id="main-body">
<!-- Header -->
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
<div class="logo-container w3-bar-item">
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
</div>
<!-- Bouton burger pour petit écran -->
<a href="javascript:void(0)" class="w3-bar-item w3-button w3-hide-large w3-right w3-padding-16" onclick="toggleMenu()"></a>
<!-- Catégories dans le header -->
<div id="menu" class="categories w3-hide-small w3-bar-item">
<a href="./rh.html" class="w3-bar-item w3-button">Accueil</a>
<a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a>
<a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a>
<a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a>
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
</div>
<!-- Section utilisateur avec déconnexion -->
<div class="user-section w3-bar-item w3-right">
<div class="user-name">
Alice BERGER
</div>
<div class="logout-container w3-bar-item">
<a href="./notifications.html" title="Notifications">
<img src="../../media/img/notifs.png" alt="Logo notification">
</a>
<a href="./settings.html" title="Paramètres">
<img src="../../media/img/settings.png" alt="Logo paramètres">
</a>
<a href="../../index.html" title="Se déconnecter">
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
</a>
</div>
</div>
</div>
<!-- Paramètres de l'utilisateur -->
<div class="w3-content w3-padding-16">
<div class="w3-container w3-white w3-card-4 w3-padding-large">
<h2 class="w3-text-dark-gray">Paramètres de communication et d'accessibilité</h2>
<form class="w3-container w3-padding-16">
<!-- Notifications par Email -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Notifications par Email</b></label>
<p>Recevez des notifications par e-mail concernant les heures, paiements, et plus.</p>
<input class="w3-check" type="checkbox" id="email-notifications" checked>
<label for="email-notifications">Activer les notifications par email</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Notifications par SMS -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Notifications par SMS</b></label>
<p>Recevez des notifications par SMS sur votre téléphone mobile.</p>
<input class="w3-check" type="checkbox" id="sms-notifications">
<label for="sms-notifications">Activer les notifications par SMS</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Préférences de Langue -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Langue de Communication</b></label>
<select class="w3-select" name="language" id="language">
<option value="fr" selected>Français</option>
<option value="en">Anglais</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Fréquence de réception des emails -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Fréquence des emails de notification</b></label>
<select class="w3-select" name="email-frequency" id="email-frequency">
<option value="instant">Immédiatement</option>
<option value="daily">Quotidiennement</option>
<option value="weekly" selected>Hebdomadairement</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Mode Daltonien -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Mode Daltonien</b></label>
<p>Améliore les contrastes et les couleurs pour mieux correspondre aux besoins des personnes atteintes de troubles visuels.</p>
<input class="w3-check" type="checkbox" id="daltonien-mode" onchange="toggleDaltonienMode()">
<label for="daltonien-mode">Activer le mode Daltonien</label>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Changer la police -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Changer la police</b></label>
<select class="w3-select" name="font" id="font" onchange="changeFont()">
<option value="Arial" selected>Arial</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Tahoma">Tahoma</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Grossir le texte -->
<div class="w3-section">
<label class="w3-text-dark-gray"><b>Agrandir le texte</b></label>
<select class="w3-select" name="text-size" id="text-size" onchange="changeTextSize()">
<option value="normal" selected>Normal</option>
<option value="large">Grand</option>
<option value="xlarge">Très Grand</option>
</select>
</div>
<hr class="w3-divider"> <!-- Séparation -->
<!-- Sauvegarder les modifications -->
<button type="submit" class="w3-button w3-round w3-margin-top btn w3-text-white" style="background-color: #0f431f;">Sauvegarder les modifications</button>
</form>
</div>
</div>
<!-- Footer -->
<footer id="footer" class="w3-center w3-padding w3-text-white footer">
<p>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</footer>
<!-- Script pour changer la police et la taille du texte -->
<script>
function toggleDaltonienMode() {
const body = document.getElementById('main-body');
const daltonienMode = document.getElementById('daltonien-mode').checked;
if (daltonienMode) {
body.classList.add('daltonien');
} else {
body.classList.remove('daltonien');
}
}
function changeFont() {
const selectedFont = document.getElementById('font').value;
document.body.style.fontFamily = selectedFont;
}
function changeTextSize() {
const textSize = document.getElementById('text-size').value;
document.body.classList.remove('large-text', 'xlarge-text');
if (textSize === 'large') {
document.body.classList.add('large-text');
} else if (textSize === 'xlarge') {
document.body.classList.add('xlarge-text');
}
}
</script>
<script>
function toggleMenu() {
var menu = document.getElementById('menu');
var nom = document.getElementById('user-section');
if (menu.classList.contains('w3-hide-small')) {
menu.classList.remove('w3-hide-small');
menu.classList.remove('user-section');
} else {
menu.classList.add('w3-hide-small');
}
}
</script>
</body>
</html>

@ -7,6 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../css/mentions_legales.css">
<link rel="icon" href="../media/img/logoIcon.ico" type="image/x-icon" />
</head>
<body>

@ -7,6 +7,7 @@
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="css/index.css">
<link rel="icon" href="./media/img/logoIcon.ico" type="image/x-icon" />
</head>
<body>

Binary file not shown.

After

(image error) Size: 7.7 KiB