Modification des vacataires + utilisation de W3 CSS - Commit pour Marwa à cause d'un problème de git
This commit is contained in:
stiti
parent
78664f1bac
commit
cf02879d92
MaquetteWEB
@ -10,41 +10,49 @@
|
||||
</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="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mon-contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-container">
|
||||
|
||||
<div class="section-header">
|
||||
<div class="w3-container dashboard-container">
|
||||
<div class="section-header w3-border-bottom w3-padding">
|
||||
<h2>Offres de vacation</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>
|
||||
@ -65,8 +73,8 @@
|
||||
<td>CM, TD</td>
|
||||
<td>8h</td>
|
||||
<td>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Postuler</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>
|
||||
@ -77,146 +85,191 @@
|
||||
<td>TD, TP</td>
|
||||
<td>6h</td>
|
||||
<td>
|
||||
<button class="accept-button" onclick="acceptProposal(this)">Postuler</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>
|
||||
</div>
|
||||
|
||||
<!-- Popup pour pièces justificatives -->
|
||||
<div id="justificatifForm" class="justificatif-form popup">
|
||||
<h3>Téléchargez vos pièces justificatives</h3>
|
||||
<p>Veuillez télécharger le document suivant :</p>
|
||||
<ul>
|
||||
<li>Contrat de travail actuel</li>
|
||||
</ul>
|
||||
<input type="file" id="justificatif" name="justificatif" required>
|
||||
<button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button>
|
||||
<button onclick="closeJustificatifPopup()">Annuler</button>
|
||||
<div id="justificatifForm" class="w3-modal">
|
||||
<div class="w3-modal-content w3-card-4">
|
||||
<header class="w3-container w3-purple">
|
||||
<h3>Téléchargez vos pièces justificatives</h3>
|
||||
</header>
|
||||
<div class="w3-container">
|
||||
<p>Veuillez télécharger votre contrat de travail pour la candidature :</p>
|
||||
<input type="file" id="justificatif" name="justificatif" class="w3-input w3-border" required>
|
||||
</div>
|
||||
<footer class="w3-container">
|
||||
<button id="submitJustificatif" class="w3-button w3-green w3-margin-top w3-margin-bottom" onclick="submitJustificatif()">Soumettre</button>
|
||||
<button class="w3-button w3-red w3-margin-top w3-margin-bottom" onclick="closeJustificatifPopup()">Annuler</button>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-header">
|
||||
<h2>Prochaines heures</h2>
|
||||
</div>
|
||||
<div class="validated-hours-container card">
|
||||
<table class="validated-hours-table" id="validatedTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<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> <!-- Nouvelle colonne pour le statut -->
|
||||
</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>
|
||||
</table>
|
||||
</div>
|
||||
<div class="section-header">
|
||||
<h2>Historique des Heures Travaillées</h2>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="table-container">
|
||||
<table id="hoursTable">
|
||||
<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-attente">En attente de traitement</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-attente">En attente de traitement</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 w3-purple" onclick="prevPage()">Précédent</button>
|
||||
<span id="pageNumber"></span>
|
||||
<button onclick="nextPage()">Suivant</button>
|
||||
</div>
|
||||
<button class="w3-button w3-purple" 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>
|
||||
@ -270,12 +323,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: [25, 18, 21, 32],
|
||||
backgroundColor: 'rgba(128, 0, 128, 0.6)', // Couleur de fond violet foncé moins transparente
|
||||
borderColor: 'rgba(128, 0, 128, 1)', // Couleur de bord violet foncé
|
||||
borderWidth: 1
|
||||
}]
|
||||
},
|
||||
@ -292,7 +345,7 @@
|
||||
x: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Semaines'
|
||||
text: 'Semestres'
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -471,5 +524,18 @@
|
||||
displayTable(currentPage);
|
||||
|
||||
</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>
|
||||
@ -273,27 +273,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="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mon-contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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>
|
||||
@ -418,8 +427,8 @@
|
||||
<!-- Popup de confirmation -->
|
||||
<div class="popup" id="popup">
|
||||
<img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
|
||||
<h4>Message envoyé</h4>
|
||||
<p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
|
||||
<h4>Document envoyé</h4>
|
||||
<p>Votre document a été transmis au service RH. Un email de confirmation vous a été envoyé.</p>
|
||||
<button onclick="fermerPopup()">Fermer</button>
|
||||
</div>
|
||||
|
||||
@ -485,9 +494,6 @@
|
||||
if(localStorage.getItem('numero_securite')) {
|
||||
document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
|
||||
}
|
||||
if(localStorage.getItem('statut')) {
|
||||
document.getElementById('statut').value = localStorage.getItem('statut');
|
||||
}
|
||||
|
||||
// Informations bancaires
|
||||
if(localStorage.getItem('banque')) {
|
||||
@ -551,5 +557,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>
|
||||
|
||||
@ -9,33 +9,42 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="header">
|
||||
<!-- Logo pour retourner à l'accueil -->
|
||||
<div class="logo-container">
|
||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
||||
</div>
|
||||
|
||||
<!-- Catégories dans le header -->
|
||||
<div class="categories">
|
||||
<a href="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mon-contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
<!-- 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="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</a>
|
||||
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||
</div>
|
||||
<div class="logout-container">
|
||||
<a href="../../index.html" title="Se déconnecter">
|
||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||
</a>
|
||||
|
||||
<!-- Section utilisateur avec déconnexion -->
|
||||
<div class="user-section w3-bar-item w3-right">
|
||||
<div class="user-name">
|
||||
Maxime MENAULT
|
||||
</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>
|
||||
</div>
|
||||
|
||||
<div class="dashboard-container">
|
||||
<!-- Détails du contrat -->
|
||||
@ -49,10 +58,15 @@
|
||||
<p class="w3-text-green"><strong>Statut :</strong> Actif</p>
|
||||
<p><strong>Département :</strong> Informatique</p>
|
||||
<p><strong>Salaire horaire :</strong> 43,50 €</p>
|
||||
<p><strong>Nombre total d'heures :</strong> 60 heures (CM : 20, TD : 20, TP : 20)</p>
|
||||
<p><strong>Avantages :</strong> Tickets restaurant, remboursement de frais de transport</p>
|
||||
<p><strong>Conditions de résiliation :</strong> Préavis de 1 mois</p>
|
||||
<p><strong>Formation requise :</strong> Master en Informatique</p>
|
||||
|
||||
|
||||
<div class="action-buttons">
|
||||
<a href="../../media/docs/contrat.pdf" class="btn" target="_blank">Télécharger le contrat (PDF)</a>
|
||||
<a href="mailto:rh@example.com?subject=Demande de modification de contrat" class="btn">Contacter les RH pour modification</a>
|
||||
<a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf" class="btn" target="_blank">Télécharger le contrat (PDF)</a>
|
||||
<a href="mailto:rh@u-pec.fr?subject=Demande de modification de contrat" class="btn">Contacter les RH pour modification</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -63,5 +77,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>
|
||||
|
||||
154
MaquetteWEB/html/VACATAIRE/notifications.html
Normal file
154
MaquetteWEB/html/VACATAIRE/notifications.html
Normal file
@ -0,0 +1,154 @@
|
||||
<!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/VACATAIRE/vacataire.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="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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: #370559;">
|
||||
<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>
|
||||
@ -9,28 +9,37 @@
|
||||
<link rel="stylesheet" href="../../css/VACATAIRE/paiements.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="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./mon-contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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>
|
||||
@ -398,6 +407,18 @@ function isDate(dateString) {
|
||||
}
|
||||
|
||||
</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>
|
||||
|
||||
250
MaquetteWEB/html/VACATAIRE/settings.html
Normal file
250
MaquetteWEB/html/VACATAIRE/settings.html
Normal file
@ -0,0 +1,250 @@
|
||||
<!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/VACATAIRE/vacataire.css">
|
||||
<style>
|
||||
.header {
|
||||
background-color: #370559; /* Couleur par défaut */
|
||||
color: white;
|
||||
}
|
||||
footer {
|
||||
background-color: #370559; /* Couleur par défaut */
|
||||
color: white;
|
||||
}
|
||||
.logo-container img {
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
}
|
||||
.categories a {
|
||||
font-weight: bold;
|
||||
}
|
||||
.btn {
|
||||
background-color: #370559;
|
||||
}
|
||||
.btn:hover {
|
||||
background-color: #5a0bda;
|
||||
}
|
||||
/* 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: #370559; /* 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: #ff8c00; /* Couleur facilement visible */
|
||||
}
|
||||
|
||||
.daltonien .btn:hover {
|
||||
background-color: #ffa500;
|
||||
}
|
||||
|
||||
/* 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="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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-purple w3-round w3-margin-top btn">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>
|
||||
@ -6,30 +6,70 @@
|
||||
<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>
|
||||
<body class="w3-light-grey">
|
||||
|
||||
<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="./vacataire.html">Accueil</a>
|
||||
<a href="./mes-heures.html">Heures</a>
|
||||
<a href="./paiements.html">Paiements</a>
|
||||
<a href="./contrat.html">Contrat</a>
|
||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
||||
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||
<a href="./vacataire.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="./mon-contrat.html" class="w3-bar-item w3-button">Contrat</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">
|
||||
Maxime MENAULT
|
||||
</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,83 +77,84 @@
|
||||
</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>
|
||||
<!-- 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>
|
||||
<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>
|
||||
|
||||
|
||||
<!-- Script pour gérer l'affichage des notifications -->
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
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
|
||||
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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
BIN
MaquetteWEB/media/img/notifs.png
Normal file
BIN
MaquetteWEB/media/img/notifs.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 9.2 KiB |
BIN
MaquetteWEB/media/img/settings.png
Normal file
BIN
MaquetteWEB/media/img/settings.png
Normal file
Binary file not shown.
|
After 
(image error) Size: 15 KiB |
Loading…
x
Reference in New Issue
Block a user