diff --git a/MaquetteWEB/css/PROF/mes-infos.css b/MaquetteWEB/css/PROF/mes-infos.css
new file mode 100644
index 0000000..5377b5c
--- /dev/null
+++ b/MaquetteWEB/css/PROF/mes-infos.css
@@ -0,0 +1,260 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+.info-card h2 {
+ border-bottom: 2px solid #a17b12;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+}
+.info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+.info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+.info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+}
+.info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+.action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #a17b12;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+}
+.action-btn:hover {
+ background-color: #5f490b;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #a17b12;
+ color: white;
+ margin-top: 40px;
+}
+.non-editable {
+ background-color: #e9e9e9;
+}
+
+.header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+.info-card h2 {
+ border-bottom: 2px solid #a17b12;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+}
+.info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+.info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+.info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+}
+.info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+.action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #a17b12;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+}
+.action-btn:hover {
+ background-color: #5f490b;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #a17b12;
+ color: white;
+ margin-top: 40px;
+}
+.non-editable {
+ background-color: #e9e9e9;
+}
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #a17b12; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+}
+.popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #a17b12; /* Couleur de texte */
+}
+.popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+}
+.popup button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+}
+.popup button:hover {
+ background-color: #5f490b;
+}
+
+/* Sablier de chargement */
+.loading-text {
+ font-size: 1.2em;
+ color: #555;
+}
+.loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+}
+
+.file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+}
+
+.file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+}
+
+.file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+}
+
+.document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+}
\ No newline at end of file
diff --git a/MaquetteWEB/html/PROF/enseignant_permanent.html b/MaquetteWEB/html/PROF/enseignant_permanent.html
index 0f54854..884fae8 100644
--- a/MaquetteWEB/html/PROF/enseignant_permanent.html
+++ b/MaquetteWEB/html/PROF/enseignant_permanent.html
@@ -9,26 +9,35 @@
</head>
<body>
- <div class="header">
+ <div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo 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 class="categories">
- <a href="./enseignant_permanent.html">Accueil</a>
- <a href="./mes-heures.html">Heures</a>
- <a href="./paiements.html">Paiements</a>
- <a href="./mes-informations.html">Mes informations et documents</a>
+ <div id="menu" class="categories w3-hide-small w3-bar-item">
+ <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ <div class="user-section w3-bar-item w3-right">
<div class="user-name">
Denis MONNERAT
</div>
- <div class="logout-container">
+ <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>
diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html
index 08586c5..f8ac88b 100644
--- a/MaquetteWEB/html/PROF/mes-heures.html
+++ b/MaquetteWEB/html/PROF/mes-heures.html
@@ -10,26 +10,36 @@
</head>
<body>
- <div class="header">
+
+ <div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo 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 class="categories">
- <a href="./enseignant_permanent.html">Accueil</a>
- <a href="./mes-heures.html">Heures</a>
- <a href="./paiements.html">Paiements</a>
- <a href="./mes-informations.html">Mes informations et documents</a>
+ <div id="menu" class="categories w3-hide-small w3-bar-item">
+ <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ <div class="user-section w3-bar-item w3-right">
<div class="user-name">
Denis MONNERAT
</div>
- <div class="logout-container">
+ <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>
@@ -37,13 +47,12 @@
</div>
</div>
- <div class="dashboard-container">
-
- <div class="section-header">
- <h2>Propositions d'Heures</h2>
+ <div class="w3-container dashboard-container">
+ <div class="section-header w3-border-bottom w3-padding">
+ <h2>Offres d'heures supplémentaires</h2>
</div>
- <div class="proposition-container">
- <table class="proposition-table" id="proposalTable">
+ <div class="proposition-container w3-responsive">
+ <table class="w3-table w3-bordered w3-striped proposition-table" id="proposalTable">
<thead>
<tr>
<th>Période</th>
@@ -64,8 +73,8 @@
<td>CM, TD</td>
<td>8h</td>
<td>
- <button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
- <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ <button class="w3-button w3-blue accept-button" onclick="acceptProposal(this)">Postuler</button>
+ <button class="w3-button w3-red refuse-button" onclick="confirmRefusal(this)">Refuser</button>
</td>
</tr>
<tr>
@@ -76,27 +85,67 @@
<td>TD, TP</td>
<td>6h</td>
<td>
- <button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
- <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ <button class="w3-button w3-blue accept-button" onclick="acceptProposal(this)">Postuler</button>
+ <button class="w3-button w3-red refuse-button" onclick="confirmRefusal(this)">Refuser</button>
</td>
</tr>
</tbody>
</table>
</div>
-
- <!-- Popup pour pièces justificatives -->
- <div id="justificatifForm" class="justificatif-form popup">
- <h3>Confirmation de soumission</h3>
- <p>Votre demande a bien été prise en compte !</p>
- <button onclick="closeJustificatifPopup()">Fermer</button>
+
+ <!-- Formulaire de déclaration d'heures supplémentaires -->
+ <div class="section-header w3-border-bottom w3-padding">
+ <h2>Déclarer des heures supplémentaires</h2>
+ </div>
+ <div class="w3-responsive w3-padding-16">
+ <form id="declarationForm" onsubmit="declareHours(event)" class="w3-container">
+ <div class="w3-margin-bottom">
+ <label for="periode">Période :</label>
+ <input type="text" id="periode" name="periode" placeholder="Ex: Janvier 2025" required class="w3-input w3-border">
+ </div>
+
+ <div class="w3-margin-bottom">
+ <label for="formation">Formation :</label>
+ <input type="text" id="formation" name="formation" placeholder="Ex: BUT1" required class="w3-input w3-border">
+ </div>
+
+ <div class="w3-margin-bottom">
+ <label for="cours">Nom du Cours :</label>
+ <input type="text" id="cours" name="cours" placeholder="Ex: Développement Web" required class="w3-input w3-border">
+ </div>
+
+ <div class="w3-margin-bottom">
+ <label for="semestre">Semestre :</label>
+ <input type="number" id="semestre" name="semestre" placeholder="Ex: 1" required class="w3-input w3-border">
+ </div>
+
+ <div class="w3-margin-bottom">
+ <label for="typeIntervention">Type d'intervention :</label>
+ <select id="typeIntervention" name="typeIntervention" required class="w3-select w3-border">
+ <option value="" disabled selected>Choisir un type</option>
+ <option value="CM">CM</option>
+ <option value="TD">TD</option>
+ <option value="TP">TP</option>
+ <option value="Suivi d'élève">Suivi d'élève</option>
+ </select>
+ </div>
+
+ <div class="w3-margin-bottom">
+ <label for="volumeHoraire">Volume Horaire :</label>
+ <input type="text" id="volumeHoraire" name="volumeHoraire" placeholder="Ex: 4h" required class="w3-input w3-border">
+ </div>
+
+ <button type="submit" class="w3-button w3-text-white w3-round" style="background-color: #a17b12;" >Déclarer</button>
+ </form>
</div>
-
- <div class="section-header">
- <h2>Prochaines heures</h2>
+
+ <!-- Section pour afficher les heures supplémentaires déclarées -->
+ <div id="declaredHoursSection" class="section-header w3-border-bottom w3-padding" style="display: none;">
+ <h2>Heures supplémentaires déclarées</h2>
</div>
- <div class="validated-hours-container card">
- <table class="validated-hours-table" id="validatedTable">
+ <div class="proposition-container w3-responsive" id="declaredHoursContainer" style="display: none;">
+ <table class="w3-table w3-bordered w3-striped proposition-table" id="declaredHoursTable">
<thead>
<tr>
<th>Période</th>
@@ -104,114 +153,186 @@
<th>Nom du Cours</th>
<th>Semestre</th>
<th>Type d'intervention</th>
- <th>Volume Prévisionnel</th>
- <th>Statut</th> <!-- Nouvelle colonne pour le statut -->
+ <th>Volume Horaire</th>
+ <th>Statut</th>
</tr>
</thead>
- <tbody id="validatedTableBody">
- <tr>
- <td>Décembre 2024</td>
- <td>BUT1</td>
- <td>Développement Web</td>
- <td>1</td>
- <td>CM, TD</td>
- <td>8h</td>
- <td class="status-valide">Validé</td> <!-- Statut -->
- </tr>
- <tr>
- <td>Janvier 2025</td>
- <td>BUT2</td>
- <td>SCR</td>
- <td>3</td>
- <td>TD, TP</td>
- <td>6h</td>
- <td class="status-valide">Validé</td> <!-- Statut -->
- </tr>
- <tr>
- <td>Février 2025</td>
- <td>BUT3</td>
- <td>Base de données</td>
- <td>5</td>
- <td>CM</td>
- <td>10h</td>
- <td class="status-valide">Validé</td> <!-- Statut -->
- </tr>
- <tr>
- <td>Mars 2025</td>
- <td>BUT3</td>
- <td>IA et Machine Learning</td>
- <td>6</td>
- <td>TD, TP</td>
- <td>12h</td>
- <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
- </tr>
- <tr>
- <td>Avril 2025</td>
- <td>BUT2</td>
- <td>Réseaux</td>
- <td>4</td>
- <td>CM, TD</td>
- <td>4h</td>
- <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
- </tr>
+ <tbody id="declaredHoursBody">
+ <!-- Les heures déclarées seront ajoutées ici -->
</tbody>
</table>
</div>
- <div class="section-header">
- <h2>Historique des Heures Travaillées</h2>
- </div>
+
- <div class="card">
- <div class="table-container">
- <table id="hoursTable">
+
+ <!-- Popup pour la confirmation des heures supplémentaires -->
+ <div id="confirmationPopup" class="popup">
+ <h4>Confirmation de la déclaration des heures</h4>
+ <p>Votre demande d'heures supplémentaires a été transmise avec succès et est en attente de traitement.</p>
+ <button onclick="closeConfirmationPopup()">Fermer</button>
+ </div>
+
+
+
+ <div class="w3-container dashboard-container">
+ <div class="section-header w3-border-bottom w3-padding">
+ <h2>Prochaines heures</h2>
+ </div>
+ <div class="validated-hours-container w3-responsive card">
+ <table class="w3-table w3-bordered w3-striped validated-hours-table" id="validatedTable">
<thead>
<tr>
- <th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
- <th>Matière</th>
- <th>Type d'Intervention</th>
- <th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
- <th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
- <th>Actions</th>
+ <th>Période</th>
+ <th>Formation</th>
+ <th>Nom du Cours</th>
+ <th>Semestre</th>
+ <th>Type d'intervention</th>
+ <th>Volume Prévisionnel</th>
+ <th>Statut</th>
</tr>
</thead>
- <tbody id="hoursTableBody">
- <!-- Rows will be generated dynamically with JavaScript -->
+ <tbody id="validatedTableBody">
+ <tr>
+ <td>Décembre 2024</td>
+ <td>BUT1</td>
+ <td>Développement Web</td>
+ <td>1</td>
+ <td>CM, TD</td>
+ <td>8h</td>
+ <td class="status-valide">Validé</td>
+ </tr>
+ <tr>
+ <td>Janvier 2025</td>
+ <td>BUT2</td>
+ <td>SCR</td>
+ <td>3</td>
+ <td>TD, TP</td>
+ <td>6h</td>
+ <td class="status-valide">Validé</td>
+ </tr>
+ <tr>
+ <td>Février 2025</td>
+ <td>BUT3</td>
+ <td>Base de données</td>
+ <td>5</td>
+ <td>CM</td>
+ <td>10h</td>
+ <td class="status-valide">Validé</td>
+ </tr>
+ <tr>
+ <td>Mars 2025</td>
+ <td>BUT3</td>
+ <td>IA et Machine Learning</td>
+ <td>6</td>
+ <td>TD, TP</td>
+ <td>12h</td>
+ <td class="status-valide">Validé</td>
+ </tr>
+ <tr>
+ <td>Avril 2025</td>
+ <td>BUT2</td>
+ <td>Réseaux</td>
+ <td>4</td>
+ <td>CM, TD</td>
+ <td>4h</td>
+ <td class="status-valide">Validé</td>
+ </tr>
</tbody>
</table>
</div>
+ </div>
-
+ <div class="w3-container dashboard-container">
+ <div class="section-header w3-border-bottom w3-padding">
+ <h2>Historique des Heures Travaillées</h2>
+ </div>
+
+ <div class="card w3-responsive">
+ <div class="table-container">
+ <table id="hoursTable" class="w3-table w3-bordered w3-striped">
+ <thead>
+ <tr>
+ <th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
+ <th>Matière</th>
+ <th>Type d'Intervention</th>
+ <th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
+ <th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="hoursTableBody">
+ <!-- Les lignes seront générées dynamiquement avec JavaScript -->
+ </tbody>
+ </table>
+ </div>
+
<!-- Pagination Buttons -->
- <div id="pagination">
- <button onclick="prevPage()">Précédent</button>
+ <div id="pagination" class="w3-center">
+ <button class="w3-button" style="background-color: #a17b12;" onclick="prevPage()">Précédent</button>
<span id="pageNumber"></span>
- <button onclick="nextPage()">Suivant</button>
- </div>
+ <button class="w3-button" style="background-color: #a17b12;" onclick="nextPage()">Suivant</button>
</div>
+ </div>
+</div>
- <div class="section-header">
+ <div class="section-header dashboard-container">
<h2>Graphique des Heures Travaillées</h2>
</div>
- <div class="chart-container">
+ <div class="dashboard-container">
<canvas id="hoursChart"></canvas>
</div>
-
- <div class="section-header">
+
+ <div class="section-header dashboard-container">
<h2>Signalement de problèmes d'heures</h2>
</div>
- <div class="contact-form">
+ <div class="contact-form dashboard-container">
<form id="contactForm">
<label for="probleme">Type de problème :</label>
- <select id="probleme" name="probleme" required>
+ <select id="probleme" name="probleme" class="w3-select" required>
<option value="" disabled selected>Choisir un problème</option>
<option value="non_paye">Il manque des heures dans mon historique</option>
- <option value="montant_incorrect">Il y a des heures en trop</option>
+ <option value="montant_incorrect">Il y a des heures en trop dans mon historique</option>
+ <option value="erreur_formation">Erreur dans la formation associée</option>
+ <option value="erreur_type_intervention">Erreur dans le type d'intervention</option>
<option value="autre">Autre</option>
</select>
- <label for="commentaire">Commentaires :</label>
- <input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
+ <label for="mois">Mois concerné :</label>
+ <select id="mois" name="mois" class="w3-select" required>
+ <option value="" disabled selected>Choisir un mois</option>
+ <option value="janvier">Janvier</option>
+ <option value="fevrier">Février</option>
+ <option value="mars">Mars</option>
+ <option value="avril">Avril</option>
+ <option value="mai">Mai</option>
+ <option value="juin">Juin</option>
+ <option value="juillet">Juillet</option>
+ <option value="aout">Août</option>
+ <option value="septembre">Septembre</option>
+ <option value="octobre">Octobre</option>
+ <option value="novembre">Novembre</option>
+ <option value="decembre">Décembre</option>
+ </select>
+
+ <label for="heures">Heures concernées :</label>
+ <select id="heures" name="heures" class="w3-select" required>
+ <option value="" disabled selected>Choisir un nombre d'heures</option>
+ <option value="1">1 heure</option>
+ <option value="2">2 heures</option>
+ <option value="3">3 heures</option>
+ <option value="4">4 heures</option>
+ <option value="5">5 heures</option>
+ <option value="6">6 heures</option>
+ <option value="7">7 heures</option>
+ <option value="8">8 heures</option>
+ <option value="9">9 heures</option>
+ <option value="10">10 heures</option>
+ <option value="autre">Plus de 10 heures</option>
+ </select>
+
+ <label for="commentaire">Commentaires (facultatif) :</label>
+ <input type="text" id="commentaire" name="commentaire" placeholder="Ajoutez des détails supplémentaires" class="w3-input">
<button type="submit">Soumettre</button>
</form>
@@ -226,6 +347,7 @@
<p><strong>Salle :</strong> <span id="salle"></span></p>
<button onclick="closeInfoPopup()">Fermer</button>
</div>
+
<!-- Popup pour succès de l'envoi du formulaire -->
<div id="popup" class="popup">
@@ -265,12 +387,12 @@
const hoursChart = new Chart(ctx, {
type: 'bar',
data: {
- labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
+ labels: ['Semestre 1 - 2023', 'Semestre 2 - 2023', 'Semestre 1 - 2024', 'Semestre 2 - 2024'],
datasets: [{
label: 'Heures Travaillées',
- data: [5, 10, 7, 8],
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
- borderColor: 'rgba(75, 192, 192, 1)',
+ data: [480, 460, 490, 470],
+ backgroundColor: 'rgba(204, 153, 0, 1)', // Jaune très sombre, pas transparent
+ borderColor: 'rgba(178, 128, 0, 1)', // Jaune plus foncé pour la bordure
borderWidth: 1
}]
},
@@ -287,7 +409,7 @@
x: {
title: {
display: true,
- text: 'Semaines'
+ text: 'Semestres'
}
}
}
@@ -465,6 +587,61 @@
// Initial load
displayTable(currentPage);
+ </script>
+
+ <script>
+// Fonction pour déclarer des heures supplémentaires
+function declareHours(event) {
+ event.preventDefault(); // Empêche l'envoi du formulaire
+
+ // Récupération des valeurs du formulaire
+ const periode = document.getElementById('periode').value;
+ const formation = document.getElementById('formation').value;
+ const cours = document.getElementById('cours').value;
+ const semestre = document.getElementById('semestre').value;
+ const typeIntervention = document.getElementById('typeIntervention').value;
+ const volumeHoraire = document.getElementById('volumeHoraire').value;
+
+ // Ajout d'une nouvelle ligne à la table des heures déclarées
+ const tableBody = document.getElementById('declaredHoursBody');
+ const newRow = tableBody.insertRow();
+ newRow.innerHTML = `
+ <td>${periode}</td>
+ <td>${formation}</td>
+ <td>${cours}</td>
+ <td>${semestre}</td>
+ <td>${typeIntervention}</td>
+ <td>${volumeHoraire}</td>
+ <td class="status-attente">En attente de traitement</td>
+ `;
+
+ // Affichage de la section si elle est vide
+ updateDeclaredHoursSectionVisibility();
+
+ // Affichage de la popup de confirmation
+ document.getElementById('confirmationPopup').style.display = 'block';
+
+ // Réinitialisation du formulaire
+ document.getElementById('declarationForm').reset();
+}
+
+// Fonction pour mettre à jour la visibilité de la section des heures déclarées
+function updateDeclaredHoursSectionVisibility() {
+ const declaredHoursBody = document.getElementById('declaredHoursBody');
+ const declaredHoursSection = document.getElementById('declaredHoursSection');
+ const declaredHoursContainer = document.getElementById('declaredHoursContainer');
+
+ // Vérifiez si des heures déclarées existent
+ if (declaredHoursBody.rows.length > 0) {
+ declaredHoursSection.style.display = 'block';
+ declaredHoursContainer.style.display = 'block';
+ } else {
+ declaredHoursSection.style.display = 'none';
+ declaredHoursContainer.style.display = 'none';
+ }
+}
+
+
</script>
</body>
</html>
\ No newline at end of file
diff --git a/MaquetteWEB/html/PROF/mes-informations.html b/MaquetteWEB/html/PROF/mes-informations.html
index 64c7ee8..261aa7e 100644
--- a/MaquetteWEB/html/PROF/mes-informations.html
+++ b/MaquetteWEB/html/PROF/mes-informations.html
@@ -5,294 +5,39 @@
<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">
- <style>
- body {
- font-family: Arial, sans-serif;
- background-color: #f4f4f4;
- margin: 0;
- padding: 0;
- }
- .container {
- max-width: 1200px;
- margin: auto;
- padding: 20px;
- }
- .info-card {
- background-color: white;
- padding: 20px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
- margin-bottom: 20px;
- border-radius: 8px;
- }
- .info-card h2 {
- border-bottom: 2px solid #a17b12;
- padding-bottom: 10px;
- margin-bottom: 20px;
- }
- .info-table {
- width: 100%;
- border-collapse: collapse;
- margin-bottom: 20px;
- }
- .info-table th, .info-table td {
- padding: 12px;
- text-align: left;
- border-bottom: 1px solid #ddd;
- }
- .info-table th {
- background-color: #f8f8f8;
- color: #333;
- }
- .info-table input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- .action-btn {
- display: inline-block;
- padding: 10px 20px;
- color: white;
- background-color: #a17b12;
- text-decoration: none;
- border-radius: 5px;
- margin: 10px 0;
- cursor: pointer;
- }
- .action-btn:hover {
- background-color: #5f490b;
- }
- .footer {
- text-align: center;
- padding: 10px 0;
- background-color: #a17b12;
- color: white;
- margin-top: 40px;
- }
- .non-editable {
- background-color: #e9e9e9;
- }
-
- .header {
- background-color: #a17b12;
- color: white;
- padding: 10px 0;
- display: flex;
- justify-content: space-between;
- align-items: center;
- position: relative;
- }
-
- .logo-container img {
- width: 200px;
- height: 50px;
- cursor: pointer;
- }
- .categories {
- display: flex;
- gap: 15px;
- margin-left: 50px;
- }
- .categories a {
- color: white;
- text-decoration: none;
- font-weight: bold;
- }
- .categories a:hover {
- text-decoration: underline;
- }
- .user-section {
- display: flex;
- align-items: center;
- margin-right: 20px;
- }
- .user-name {
- margin-right: 15px;
- font-size: 16px;
- font-weight: bold;
- }
- .logout-container {
- display: flex;
- align-items: center;
- }
- .logout-container img {
- width: 25px;
- height: 25px;
- margin-left: 10px;
- cursor: pointer;
- }
-
- .container {
- max-width: 1200px;
- margin: auto;
- padding: 20px;
- }
- .info-card {
- background-color: white;
- padding: 20px;
- box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
- margin-bottom: 20px;
- border-radius: 8px;
- }
- .info-card h2 {
- border-bottom: 2px solid #a17b12;
- padding-bottom: 10px;
- margin-bottom: 20px;
- }
- .info-table {
- width: 100%;
- border-collapse: collapse;
- margin-bottom: 20px;
- }
- .info-table th, .info-table td {
- padding: 12px;
- text-align: left;
- border-bottom: 1px solid #ddd;
- }
- .info-table th {
- background-color: #f8f8f8;
- color: #333;
- }
- .info-table input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- .action-btn {
- display: inline-block;
- padding: 10px 20px;
- color: white;
- background-color: #a17b12;
- text-decoration: none;
- border-radius: 5px;
- margin: 10px 0;
- cursor: pointer;
- }
- .action-btn:hover {
- background-color: #5f490b;
- }
- .footer {
- text-align: center;
- padding: 10px 0;
- background-color: #a17b12;
- color: white;
- margin-top: 40px;
- }
- .non-editable {
- background-color: #e9e9e9;
- }
-
- /* Styles pour le popup */
- .popup {
- display: none;
- position: fixed;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background-color: #fff; /* Blanc */
- padding: 20px;
- border: 2px solid #a17b12; /* Bordure couleur thème */
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- z-index: 1000;
- border-radius: 10px;
- text-align: center;
- width: 300px; /* Largeur fixe */
- }
- .popup h4 {
- margin: 0 0 15px 0;
- font-size: 1.5em;
- color: #a17b12; /* Couleur de texte */
- }
- .popup p {
- font-size: 1.2em;
- margin: 5px 0; /* Espacement entre les lignes */
- color: #333; /* Couleur de texte */
- }
- .popup button {
- background-color: #a17b12;
- color: white;
- border: none;
- padding: 10px;
- cursor: pointer;
- border-radius: 5px; /* Arrondir les coins */
- margin-top: 15px; /* Espacement au-dessus du bouton */
- }
- .popup button:hover {
- background-color: #5f490b;
- }
-
- /* Sablier de chargement */
- .loading-text {
- font-size: 1.2em;
- color: #555;
- }
- .loading-icon {
- margin-left: 10px;
- width: 20px;
- height: 20px;
- vertical-align: middle;
- }
-
- .file-upload-label {
- display: inline-block;
- padding: 10px 15px;
- cursor: pointer;
- background-color: #e0e0e0; /* Couleur de fond gris clair */
- color: #333; /* Couleur du texte gris foncé */
- border-radius: 5px;
- margin-bottom: 10px; /* Espacement entre le label et le bouton */
- text-align: center; /* Centrer le texte */
- border: 1px solid #ccc; /* Bordure grise */
- transition: background-color 0.3s; /* Transition pour l'effet hover */
- }
-
- .file-upload-label:hover {
- background-color: #d0d0d0; /* Couleur de fond au survol */
- }
-
- .file-name {
- display: block;
- margin-top: 5px; /* Espacement entre le label et le nom du fichier */
- color: #555; /* Couleur du texte du nom de fichier */
- }
-
- .document-select {
- width: 100%; /* Prend toute la largeur */
- padding: 10px; /* Espacement interne */
- border: 1px solid #ddd; /* Bordure grise */
- border-radius: 4px; /* Coins arrondis */
- margin-bottom: 10px; /* Espacement sous le sélecteur */
- font-size: 16px; /* Taille du texte */
- color: #333; /* Couleur du texte */
- }
-
-
-
- </style>
+ <link rel="stylesheet" href="../../css/PROF/mes-infos.css">
</head>
<body>
- <div class="header">
+ <div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo 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 class="categories">
- <a href="./enseignant_permanent.html">Accueil</a>
- <a href="./mes-heures.html">Heures</a>
- <a href="./paiements.html">Paiements</a>
- <a href="./mes-informations.html">Mes informations et documents</a>
+ <div id="menu" class="categories w3-hide-small w3-bar-item">
+ <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ <div class="user-section w3-bar-item w3-right">
<div class="user-name">
Denis MONNERAT
</div>
- <div class="logout-container">
+ <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>
diff --git a/MaquetteWEB/html/PROF/notifications.html b/MaquetteWEB/html/PROF/notifications.html
new file mode 100644
index 0000000..7163f4c
--- /dev/null
+++ b/MaquetteWEB/html/PROF/notifications.html
@@ -0,0 +1,153 @@
+<!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="stylesheet" href="../../css/PROF/enseignant_permanent.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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ Denis MONNERAT
+ </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);">×</span>
+ <p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
+ </div>
+ <div class="w3-panel w3-green success">
+ <span class="w3-closebtn close" onclick="removeNotification(this);">×</span>
+ <p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</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: #a17b12;">
+ <p>© 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>
diff --git a/MaquetteWEB/html/PROF/paiements.html b/MaquetteWEB/html/PROF/paiements.html
index 6a98ef2..38413a2 100644
--- a/MaquetteWEB/html/PROF/paiements.html
+++ b/MaquetteWEB/html/PROF/paiements.html
@@ -10,26 +10,36 @@
</head>
<body>
- <div class="header">
+ <!-- Header -->
+ <div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
- <div class="logo-container">
- <img src="../../media/img/logoWhite.png" alt="Logo 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 class="categories">
- <a href="./enseignant_permanent.html">Accueil</a>
- <a href="./mes-heures.html">Heures</a>
- <a href="./paiements.html">Paiements</a>
- <a href="./mes-informations.html">Mes informations et documents</a>
+ <div id="menu" class="categories w3-hide-small w3-bar-item">
+ <a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ <div class="user-section w3-bar-item w3-right">
<div class="user-name">
Denis MONNERAT
</div>
- <div class="logout-container">
+ <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>
@@ -289,8 +299,8 @@ const paymentChart = new Chart(ctx, {
datasets: [{
label: 'Montant Brut (€)',
data: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
- borderColor: 'rgba(75, 192, 192, 1)',
- backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ backgroundColor: 'rgba(204, 153, 0, 0.60)', // Jaune très sombre, pas transparent
+ borderColor: 'rgba(178, 128, 0, 1)', // Jaune plus foncé pour la bordure
fill: true,
tension: 0.3,
}]
diff --git a/MaquetteWEB/html/PROF/settings.html b/MaquetteWEB/html/PROF/settings.html
new file mode 100644
index 0000000..595c702
--- /dev/null
+++ b/MaquetteWEB/html/PROF/settings.html
@@ -0,0 +1,249 @@
+<!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="stylesheet" href="../../css/PROF/enseignant_permanent.css">
+ <style>
+ .header {
+ background-color: #a17b12; /* Couleur par défaut */
+ color: white;
+ }
+ footer {
+ background-color: #a17b12; /* Couleur par défaut */
+ color: white;
+ }
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ }
+ .categories a {
+ font-weight: bold;
+ }
+ .btn {
+ background-color: #a17b12;
+ }
+ .btn:hover {
+ background-color: #6d530a;
+ }
+ /* 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: #a17b12; /* 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="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
+ <a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
+ <a href="./paiements.html" class="w3-bar-item w3-button">Paiements</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">
+ Denis MONNERAT
+ </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" style="background-color: #a17b12;">Sauvegarder les modifications</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Footer -->
+ <footer id="footer" class="w3-center w3-padding w3-text-white footer">
+ <p>© 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>
diff --git a/MaquetteWEB/html/VACATAIRE/vacataire.html b/MaquetteWEB/html/VACATAIRE/vacataire.html
index c3da7c9..8ab49eb 100644
--- a/MaquetteWEB/html/VACATAIRE/vacataire.html
+++ b/MaquetteWEB/html/VACATAIRE/vacataire.html
@@ -6,39 +6,9 @@
<title>Dashboard Vacataire</title>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
- <style>
- .header {
- background-color: #370559;
- color: white;
- }
- .logo-container img {
- width: 200px;
- height: 50px;
- }
- .categories a {
- font-weight: bold;
- }
- .btn {
- background-color: #370559;
- }
- .btn:hover {
- background-color: #5a0bda;
- }
- .alert, .success {
- position: relative;
- }
- .alert .close, .success .close {
- position: absolute;
- right: 10px;
- top: 50%;
- transform: translateY(-50%);
- cursor: pointer;
- font-weight: bold;
- font-size: 18px;
- }
- </style>
</head>
-<body class="w3-light-grey">
+<body>
+
<div class="header w3-bar w3-card-4 w3-dark-blue">
<!-- Logo pour retourner à l'accueil -->
@@ -77,84 +47,83 @@
</div>
</div>
- <!-- Dashboard -->
- <div class="w3-content w3-padding-16 dashboard-container">
-
- <!-- 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="this.parentElement.style.display='none';">×</span>
- <p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
- </div>
- <div class="w3-panel w3-green success">
- <span class="w3-closebtn close" onclick="this.parentElement.style.display='none';">×</span>
- <p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
- </div>
- </div>
- </div>
-
- <!-- Suivi des Paiements -->
- <div class="w3-container w3-white w3-card-4">
- <h2 class="w3-text-dark-gray">Suivi des Paiements</h2>
- <div class="w3-responsive">
- <table class="w3-table-all w3-centered">
- <thead>
- <tr class="w3-light-grey">
- <th>Période</th>
- <th>Heures Payées</th>
- <th>Montant Brut (€)</th>
- <th>Date de Paiement</th>
- <th>Bulletin de paie</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Septembre 2024</td>
- <td>20h</td>
- <td>870,00</td>
- <td class="w3-text-green">01/10/2024</td>
- <td><a href="https://ensap.gouv.fr" target="_blank" class="w3-button w3-round btn" style="background-color: #370559;">Voir Bulletin</a></td>
- </tr>
- <tr>
- <td>Octobre 2024</td>
- <td>22h</td>
- <td>957,00</td>
- <td class="w3-text-orange">En attente</td>
- <td><a href="https://ensap.gouv.fr" target="_blank" class="w3-button w3-round btn" style="background-color: #370559;">Voir Bulletin</a></td>
- </tr>
- </tbody>
- </table>
- </div>
- <p class="w3-padding"><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
-
- <div class="w3-container w3-center">
- <a href="./paiements.html" class="w3-button w3-round btn w3-margin-bottom" style="background-color: #370559;">Voir tous les paiements</a>
- </div>
- </div>
-
+<div class="dashboard-container">
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
</div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
+ </div>
+ <div class="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
+ </div>
+ </div>
+
- <!-- Footer -->
- <footer class="w3-center w3-padding w3-text-white" style="background-color: #370559;">
- <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
- <a href="../mentions_legales.html">Mentions légales</a>
- </p>
- </footer>
-
+ <!-- Script pour gérer l'affichage des notifications -->
<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');
- }
+ const notificationsContainer = document.getElementById('notifications-container');
+ const notificationsSection = document.getElementById('notifications-section');
+
+ // Vérifiez si le conteneur des notifications est vide
+ if (notificationsContainer.childElementCount === 0) {
+ notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
}
</script>
+
+ <!-- Suivi des Paiements -->
+ <div class="section-header">
+ <h2>Suivi des Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Heures Payées</th>
+ <th>Montant Brut (€)</th>
+ <th>Date de Paiement</th>
+ <th>Bulletin de paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>20h</td>
+ <td>870,00</td>
+ <td>01/10/2024</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Octobre 2024</td>
+ <td>22h</td>
+ <td>957,00</td>
+ <td>En attente</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
+
+ <div class="more-payments">
+ <p><a href="./paiements.html" class="btn">Voir tous les paiements</a></p>
+ </div>
+ </div>
+
+</div>
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
</body>
</html>