2024-10-18 16:10:48 +02:00
<!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 : 1 px solid #ccc ; /* Bordure autour du conteneur */
border-radius : 8 px ; /* Coins arrondis */
padding : 16 px ; /* Espacement intérieur */
margin-top : 16 px ; /* Espacement supérieur */
max-height : 300 px ; /* 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 : 8 px 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" >
2024-10-18 19:45:09 +02:00
< img src = "../../media/img/logoWhite.png" alt = "Logo Accueil" class = "w3-image" style = "width:150px; height:40px;" >
2024-10-18 16:10:48 +02:00
< / div >
2024-10-18 19:45:09 +02:00
2024-10-18 16:10:48 +02:00
<!-- 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 >
2024-10-18 19:45:09 +02:00
2024-10-18 16:10:48 +02:00
<!-- Catégories dans le header -->
2024-10-18 19:45:09 +02:00
< div id = "menu" class = "categories w3-hide-small w3-hide-medium w3-bar-item" >
2024-10-18 16:10:48 +02:00
< 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 -->
2024-10-18 19:45:09 +02:00
< div class = "user-section w3-right w3-hide-small w3-hide-medium" >
2024-10-18 16:10:48 +02:00
< div class = "user-name" >
Maxime MENAULT
< / div >
< div class = "logout-container w3-bar-item" >
< a href = "./notifications.html" title = "Notifications" >
2024-10-18 19:45:09 +02:00
< img src = "../../media/img/notifs.png" alt = "Logo notification" style = "width:24px; height:24px;" >
2024-10-18 16:10:48 +02:00
< / a >
< a href = "./settings.html" title = "Paramètres" >
2024-10-18 19:45:09 +02:00
< img src = "../../media/img/settings.png" alt = "Logo paramètres" style = "width:24px; height:24px;" >
2024-10-18 16:10:48 +02:00
< / a >
< a href = "../../index.html" title = "Se déconnecter" >
2024-10-18 19:45:09 +02:00
< img src = "../../media/img/LogOutWhite.png" alt = "Logo Déconnexion" style = "width:24px; height:24px;" >
< / a >
< / div >
< / div >
<!-- Menu mobile caché au départ -->
< div id = "mobileMenu" class = "w3-bar-block w3-hide w3-hide-large w3-dark-blue" >
< 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 >
<!-- Section utilisateur pour mobile -->
< div class = "w3-bar-item w3-border-top w3-margin-top" >
< div class = "user-name" > Maxime MENAULT< / div >
< a href = "./notifications.html" title = "Notifications" >
< img src = "../../media/img/notifs.png" alt = "Logo notification" style = "width:24px; height:24px;" >
< / a >
< a href = "./settings.html" title = "Paramètres" >
< img src = "../../media/img/settings.png" alt = "Logo paramètres" style = "width:24px; height:24px;" >
< / a >
< a href = "../../index.html" title = "Se déconnecter" >
< img src = "../../media/img/LogOutWhite.png" alt = "Logo Déconnexion" style = "width:24px; height:24px;" >
2024-10-18 16:10:48 +02:00
< / 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 ( ) {
2024-10-18 19:45:09 +02:00
var x = document . getElementById ( "mobileMenu" ) ;
if ( x . className . indexOf ( "w3-show" ) == - 1 ) {
x . className += " w3-show" ;
2024-10-18 16:10:48 +02:00
} else {
2024-10-18 19:45:09 +02:00
x . className = x . className . replace ( " w3-show" , "" ) ;
2024-10-18 16:10:48 +02:00
}
}
< / script >
< / body >
< / html >
