Modification des permanents + w3 css - Commit pour Marwa à cause d'un problème de git
This commit is contained in:
stiti
parent
cf02879d92
commit
233622142f
MaquetteWEB
260
MaquetteWEB/css/PROF/mes-infos.css
Normal file
260
MaquetteWEB/css/PROF/mes-infos.css
Normal file
@ -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 */
|
||||||
|
}
|
||||||
@ -9,26 +9,35 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||||
<!-- Logo pour retourner à l'accueil -->
|
<!-- Logo pour retourner à l'accueil -->
|
||||||
<div class="logo-container">
|
<div class="logo-container w3-bar-item">
|
||||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
|
||||||
</div>
|
</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 -->
|
<!-- Catégories dans le header -->
|
||||||
<div class="categories">
|
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||||
<a href="./enseignant_permanent.html">Accueil</a>
|
<a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
|
||||||
<a href="./mes-heures.html">Heures</a>
|
<a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||||
<a href="./paiements.html">Paiements</a>
|
<a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
|
||||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section utilisateur avec déconnexion -->
|
<!-- Section utilisateur avec déconnexion -->
|
||||||
<div class="user-section">
|
<div class="user-section w3-bar-item w3-right">
|
||||||
<div class="user-name">
|
<div class="user-name">
|
||||||
Denis MONNERAT
|
Denis MONNERAT
|
||||||
</div>
|
</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">
|
<a href="../../index.html" title="Se déconnecter">
|
||||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@ -5,294 +5,39 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Mes Informations</title>
|
<title>Mes Informations</title>
|
||||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<style>
|
<link rel="stylesheet" href="../../css/PROF/mes-infos.css">
|
||||||
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>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="header">
|
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||||
<!-- Logo pour retourner à l'accueil -->
|
<!-- Logo pour retourner à l'accueil -->
|
||||||
<div class="logo-container">
|
<div class="logo-container w3-bar-item">
|
||||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
|
||||||
</div>
|
</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 -->
|
<!-- Catégories dans le header -->
|
||||||
<div class="categories">
|
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||||
<a href="./enseignant_permanent.html">Accueil</a>
|
<a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
|
||||||
<a href="./mes-heures.html">Heures</a>
|
<a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||||
<a href="./paiements.html">Paiements</a>
|
<a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
|
||||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section utilisateur avec déconnexion -->
|
<!-- Section utilisateur avec déconnexion -->
|
||||||
<div class="user-section">
|
<div class="user-section w3-bar-item w3-right">
|
||||||
<div class="user-name">
|
<div class="user-name">
|
||||||
Denis MONNERAT
|
Denis MONNERAT
|
||||||
</div>
|
</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">
|
<a href="../../index.html" title="Se déconnecter">
|
||||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
153
MaquetteWEB/html/PROF/notifications.html
Normal file
153
MaquetteWEB/html/PROF/notifications.html
Normal file
@ -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>
|
||||||
@ -10,26 +10,36 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<div class="header">
|
<!-- Header -->
|
||||||
|
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||||
<!-- Logo pour retourner à l'accueil -->
|
<!-- Logo pour retourner à l'accueil -->
|
||||||
<div class="logo-container">
|
<div class="logo-container w3-bar-item">
|
||||||
<img src="../../media/img/logoWhite.png" alt="Logo Accueil">
|
<img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:200px; height:50px;">
|
||||||
</div>
|
</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 -->
|
<!-- Catégories dans le header -->
|
||||||
<div class="categories">
|
<div id="menu" class="categories w3-hide-small w3-bar-item">
|
||||||
<a href="./enseignant_permanent.html">Accueil</a>
|
<a href="./enseignant_permanent.html" class="w3-bar-item w3-button">Accueil</a>
|
||||||
<a href="./mes-heures.html">Heures</a>
|
<a href="./mes-heures.html" class="w3-bar-item w3-button">Heures</a>
|
||||||
<a href="./paiements.html">Paiements</a>
|
<a href="./paiements.html" class="w3-bar-item w3-button">Paiements</a>
|
||||||
<a href="./mes-informations.html">Mes informations et documents</a>
|
<a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Section utilisateur avec déconnexion -->
|
<!-- Section utilisateur avec déconnexion -->
|
||||||
<div class="user-section">
|
<div class="user-section w3-bar-item w3-right">
|
||||||
<div class="user-name">
|
<div class="user-name">
|
||||||
Denis MONNERAT
|
Denis MONNERAT
|
||||||
</div>
|
</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">
|
<a href="../../index.html" title="Se déconnecter">
|
||||||
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
<img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
|
||||||
</a>
|
</a>
|
||||||
@ -289,8 +299,8 @@ const paymentChart = new Chart(ctx, {
|
|||||||
datasets: [{
|
datasets: [{
|
||||||
label: 'Montant Brut (€)',
|
label: 'Montant Brut (€)',
|
||||||
data: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
|
data: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
|
||||||
borderColor: 'rgba(75, 192, 192, 1)',
|
backgroundColor: 'rgba(204, 153, 0, 0.60)', // Jaune très sombre, pas transparent
|
||||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
borderColor: 'rgba(178, 128, 0, 1)', // Jaune plus foncé pour la bordure
|
||||||
fill: true,
|
fill: true,
|
||||||
tension: 0.3,
|
tension: 0.3,
|
||||||
}]
|
}]
|
||||||
|
|||||||
249
MaquetteWEB/html/PROF/settings.html
Normal file
249
MaquetteWEB/html/PROF/settings.html
Normal file
@ -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>
|
||||||
@ -6,39 +6,9 @@
|
|||||||
<title>Dashboard Vacataire</title>
|
<title>Dashboard Vacataire</title>
|
||||||
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
||||||
<link rel="stylesheet" href="../../css/VACATAIRE/vacataire.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>
|
</head>
|
||||||
<body class="w3-light-grey">
|
<body>
|
||||||
|
|
||||||
|
|
||||||
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
<div class="header w3-bar w3-card-4 w3-dark-blue">
|
||||||
<!-- Logo pour retourner à l'accueil -->
|
<!-- Logo pour retourner à l'accueil -->
|
||||||
@ -77,84 +47,83 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Dashboard -->
|
<div class="dashboard-container">
|
||||||
<div class="w3-content w3-padding-16 dashboard-container">
|
<!-- Alertes et Notifications -->
|
||||||
|
<div class="section-header" id="notifications-section">
|
||||||
<!-- Alertes et Notifications -->
|
<h2>Alertes et Notifications</h2>
|
||||||
<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>
|
</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 -->
|
<!-- Script pour gérer l'affichage des notifications -->
|
||||||
<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>
|
<script>
|
||||||
function toggleMenu() {
|
const notificationsContainer = document.getElementById('notifications-container');
|
||||||
var menu = document.getElementById('menu');
|
const notificationsSection = document.getElementById('notifications-section');
|
||||||
var nom = document.getElementById('user-section');
|
|
||||||
if (menu.classList.contains('w3-hide-small')) {
|
// Vérifiez si le conteneur des notifications est vide
|
||||||
menu.classList.remove('w3-hide-small');
|
if (notificationsContainer.childElementCount === 0) {
|
||||||
menu.classList.remove('user-section');
|
notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
|
||||||
} else {
|
|
||||||
menu.classList.add('w3-hide-small');
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</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>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user