diff --git a/MaquetteWEB/html/FINANCE/finance.html b/MaquetteWEB/html/FINANCE/finance.html index f545f1f..30f7c31 100644 --- a/MaquetteWEB/html/FINANCE/finance.html +++ b/MaquetteWEB/html/FINANCE/finance.html @@ -10,37 +10,70 @@ </head> <body> + + <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> - <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a> - <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> - <div class="user-name w3-padding-16"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> Jean DUPONT </div> <div class="logout-container w3-bar-item"> + <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:25px; height:25px;"> + <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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> </a> </div> </div> </div> + + <div class="dashboard-container w3-content"> <!-- Alertes et Notifications --> <div class="section-header w3-container w3-light-gray w3-border-left" style="border-left: 5px solid #20195e;"> @@ -187,13 +220,11 @@ <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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/FINANCE/historique_paiements.html b/MaquetteWEB/html/FINANCE/historique_paiements.html index fd560e3..8f8dbef 100644 --- a/MaquetteWEB/html/FINANCE/historique_paiements.html +++ b/MaquetteWEB/html/FINANCE/historique_paiements.html @@ -3,7 +3,7 @@ <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Historique des Transactions</title> + <title>Historique des paiements</title> <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" /> <link rel="stylesheet" href="../../css/FINANCE/finance.css"> @@ -38,29 +38,58 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> - <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a> - <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> - <div class="user-name w3-padding-16"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> Jean DUPONT </div> <div class="logout-container w3-bar-item"> + <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:25px; height:25px;"> + <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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> </a> </div> </div> @@ -68,7 +97,7 @@ <div class="dashboard-container w3-container"> <div class="card w3-card"> - <h2>Historique des Transactions</h2> + <h2>Historique des paiements</h2> <!-- Section de filtre --> <div class="filter-section w3-margin-bottom"> @@ -80,7 +109,7 @@ <button class="w3-button w3-blue" onclick="filterByStatus('Salaire payer')">Payé</button> </div> - <!-- Tableau des transactions --> + <!-- Tableau des paiements --> <table class="w3-table w3-bordered w3-striped w3-white"> <thead> <tr class="w3-light-grey"> @@ -167,13 +196,11 @@ } 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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/FINANCE/mes_informations.html b/MaquetteWEB/html/FINANCE/mes_informations.html index a8234e7..4075ee5 100644 --- a/MaquetteWEB/html/FINANCE/mes_informations.html +++ b/MaquetteWEB/html/FINANCE/mes_informations.html @@ -308,29 +308,58 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> - <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a> - <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> - <div class="user-name w3-padding-16"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> Jean DUPONT </div> <div class="logout-container w3-bar-item"> + <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:25px; height:25px;"> + <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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> </a> </div> </div> @@ -575,15 +604,13 @@ } 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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } - } + } </script> diff --git a/MaquetteWEB/html/FINANCE/notifications.html b/MaquetteWEB/html/FINANCE/notifications.html new file mode 100644 index 0000000..3376662 --- /dev/null +++ b/MaquetteWEB/html/FINANCE/notifications.html @@ -0,0 +1,177 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Notifications</title> + <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> + <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" /> + <link rel="stylesheet" href="../../css/FINANCE/finance.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:150px; height:40px;"> + </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-hide-medium w3-bar-item"> + <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + </div> + + <!-- Section utilisateur avec déconnexion --> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> + Jean DUPONT + </div> + <div class="logout-container w3-bar-item"> + <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;"> + </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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> + </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>Paiements en attente :</strong> Vous avez des paiements qui n'ont pas encore été traités. Merci de vérifier dans : <a href="paiements_en_attente.html">Paiements en attente</a>.</p> + </div> + <div class="w3-panel w3-green success"> + <span class="w3-closebtn close" onclick="removeNotification(this);">×</span> + <p><strong>Rapport validé :</strong> Votre dernier rapport financier a été validé. Vous pouvez le consulter dans : <a href="rapports_financiers.html">Rapports Financiers</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: #20195e;"> + <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 x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } + </script> + +</body> +</html> diff --git a/MaquetteWEB/html/FINANCE/paiements_en_attente.html b/MaquetteWEB/html/FINANCE/paiements_en_attente.html index ee9c52f..9d19ec9 100644 --- a/MaquetteWEB/html/FINANCE/paiements_en_attente.html +++ b/MaquetteWEB/html/FINANCE/paiements_en_attente.html @@ -74,29 +74,58 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> - <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a> - <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> - <div class="user-name w3-padding-16"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> Jean DUPONT </div> <div class="logout-container w3-bar-item"> + <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:25px; height:25px;"> + <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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> </a> </div> </div> @@ -105,58 +134,62 @@ <div class="w3-container dashboard-container w3-margin-top"> <div class="w3-card w3-white w3-padding"> <h2>Liste des paiements en attente de traitement</h2> - <table class="w3-table w3-bordered w3-striped w3-white w3-hoverable"> - <thead> - <tr class="w3-light-grey"> - <th>ID Paiement</th> - <th>Nom du Bénéficiaire</th> - <th>Montant (€)</th> - <th>Status</th> - <th>Actions</th> - </tr> - </thead> - <tbody id="paymentTableBody"> - <tr> - <td>002</td> - <td>Maxime Menault (vacataire)</td> - <td>1200,00</td> - <td id="status-2">En attente</td> - <td> - <button class="w3-button w3-red" onclick="openPopup('bloquer', 2)">Bloquer</button> - <button class="w3-button w3-orange" onclick="openPopup('annuler', 2)">Annuler</button> - <button class="w3-button w3-green" onclick="openPopup('débloquer', 2)">Débloquer</button> - <button class="w3-button w3-blue" onclick="openPopup('envoyer', 2)">Payer</button> - </td> - </tr> - <tr> - <td>003</td> - <td>Denis Monnerat (permanent)</td> - <td>1800,00</td> - <td id="status-3">En attente</td> - <td> - <button class="w3-button w3-red" onclick="openPopup('bloquer', 3)">Bloquer</button> - <button class="w3-button w3-orange" onclick="openPopup('annuler', 3)">Annuler</button> - <button class="w3-button w3-green" onclick="openPopup('débloquer', 3)">Débloquer</button> - <button class="w3-button w3-blue" onclick="openPopup('envoyer', 3)">Payer</button> - </td> - </tr> - <tr> - <td>004</td> - <td>Sophie Bernard (vacataire)</td> - <td>1350,00</td> - <td id="status-4">En attente</td> - <td> - <button class="w3-button w3-red" onclick="openPopup('bloquer', 4)">Bloquer</button> - <button class="w3-button w3-orange" onclick="openPopup('annuler', 4)">Annuler</button> - <button class="w3-button w3-green" onclick="openPopup('débloquer', 4)">Débloquer</button> - <button class="w3-button w3-blue" onclick="openPopup('envoyer', 4)">Payer</button> - </td> - </tr> - <!-- Ajouter plus de lignes ici --> - </tbody> - </table> + + <!-- Table responsive --> + <div class="w3-responsive"> + <table class="w3-table w3-bordered w3-striped w3-white w3-hoverable"> + <thead> + <tr class="w3-light-grey"> + <th>ID Paiement</th> + <th>Nom du Bénéficiaire</th> + <th>Montant (€)</th> + <th>Status</th> + <th>Actions</th> + </tr> + </thead> + <tbody id="paymentTableBody"> + <tr> + <td>002</td> + <td>Maxime Menault (vacataire)</td> + <td>1200,00</td> + <td id="status-2">En attente</td> + <td> + <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 2)">Bloquer</button> + <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 2)">Annuler</button> + <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 2)">Débloquer</button> + <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 2)">Payer</button> + </td> + </tr> + <tr> + <td>003</td> + <td>Denis Monnerat (permanent)</td> + <td>1800,00</td> + <td id="status-3">En attente</td> + <td> + <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 3)">Bloquer</button> + <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 3)">Annuler</button> + <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 3)">Débloquer</button> + <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 3)">Payer</button> + </td> + </tr> + <tr> + <td>004</td> + <td>Sophie Bernard (vacataire)</td> + <td>1350,00</td> + <td id="status-4">En attente</td> + <td> + <button class="w3-button w3-red w3-small" onclick="openPopup('bloquer', 4)">Bloquer</button> + <button class="w3-button w3-orange w3-small" onclick="openPopup('annuler', 4)">Annuler</button> + <button class="w3-button w3-green w3-small" onclick="openPopup('débloquer', 4)">Débloquer</button> + <button class="w3-button w3-blue w3-small" onclick="openPopup('envoyer', 4)">Payer</button> + </td> + </tr> + </tbody> + </table> + </div> </div> </div> + <div class="w3-center w3-padding-16 w3-text-white" style="background-color: #20195e;"> <p>© 2024 IUT de Fontainebleau. Tous droits réservés | @@ -232,13 +265,11 @@ document.querySelector('.confirm').addEventListener('click', confirmAction); 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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/FINANCE/rapports_financiers.html b/MaquetteWEB/html/FINANCE/rapports_financiers.html index bba1981..dc768dd 100644 --- a/MaquetteWEB/html/FINANCE/rapports_financiers.html +++ b/MaquetteWEB/html/FINANCE/rapports_financiers.html @@ -74,29 +74,58 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> - <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des transactions</a> - <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> - <div class="user-name w3-padding-16"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> Jean DUPONT </div> <div class="logout-container w3-bar-item"> + <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:25px; height:25px;"> + <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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> </a> </div> </div> @@ -164,13 +193,11 @@ }); 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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/FINANCE/settings.html b/MaquetteWEB/html/FINANCE/settings.html new file mode 100644 index 0000000..e231097 --- /dev/null +++ b/MaquetteWEB/html/FINANCE/settings.html @@ -0,0 +1,272 @@ +<!DOCTYPE html> +<html lang="fr"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Paramètres Utilisateur</title> + <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> + <link rel="icon" href="../../media/img/logoIcon.ico" type="image/x-icon" /> + <link rel="stylesheet" href="../../css/FINANCE/style.css"> + <style> + .header { + background-color: #20195e; /* Couleur par défaut */ + color: white; + } + footer { + background-color: #20195e; /* Couleur par défaut */ + color: white; + } + .logo-container img { + width: 200px; + height: 50px; + } + .categories a { + font-weight: bold; + } + .btn { + background-color: #20195e; + } + .btn:hover { + background-color: #151044; + } + /* 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: #20195e; /* 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:150px; height:40px;"> + </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-hide-medium w3-bar-item"> + <a href="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + </div> + + <!-- Section utilisateur avec déconnexion --> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> + <div class="user-name"> + Jean DUPONT + </div> + <div class="logout-container w3-bar-item"> + <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;"> + </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="./finance.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./paiements_en_attente.html" class="w3-bar-item w3-button">Paiements en attente</a> + <a href="./historique_paiements.html" class="w3-bar-item w3-button">Historique des paiements</a> + <a href="./rapports_financiers.html" class="w3-bar-item w3-button">Rapports Financiers</a> + <a href="./mes_informations.html" class="w3-bar-item w3-button">Mes informations</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Jean DUPONT</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;"> + </a> + </div> + </div> + </div> + + <!-- Paramètres de l'utilisateur --> + <div class="w3-content w3-padding-16"> + <div class="w3-container w3-white w3-card-4 w3-padding-large"> + <h2 class="w3-text-dark-gray">Paramètres de communication et d'accessibilité</h2> + + <form class="w3-container w3-padding-16"> + <!-- Notifications par Email --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Notifications par Email</b></label> + <p>Recevez des notifications par e-mail concernant les heures, paiements, et plus.</p> + <input class="w3-check" type="checkbox" id="email-notifications" checked> + <label for="email-notifications">Activer les notifications par email</label> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Notifications par SMS --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Notifications par SMS</b></label> + <p>Recevez des notifications par SMS sur votre téléphone mobile.</p> + <input class="w3-check" type="checkbox" id="sms-notifications"> + <label for="sms-notifications">Activer les notifications par SMS</label> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Préférences de Langue --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Langue de Communication</b></label> + <select class="w3-select" name="language" id="language"> + <option value="fr" selected>Français</option> + <option value="en">Anglais</option> + </select> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Fréquence de réception des emails --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Fréquence des emails de notification</b></label> + <select class="w3-select" name="email-frequency" id="email-frequency"> + <option value="instant">Immédiatement</option> + <option value="daily">Quotidiennement</option> + <option value="weekly" selected>Hebdomadairement</option> + </select> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Mode Daltonien --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Mode Daltonien</b></label> + <p>Améliore les contrastes et les couleurs pour mieux correspondre aux besoins des personnes atteintes de troubles visuels.</p> + <input class="w3-check" type="checkbox" id="daltonien-mode" onchange="toggleDaltonienMode()"> + <label for="daltonien-mode">Activer le mode Daltonien</label> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Changer la police --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Changer la police</b></label> + <select class="w3-select" name="font" id="font" onchange="changeFont()"> + <option value="Arial" selected>Arial</option> + <option value="Verdana">Verdana</option> + <option value="Georgia">Georgia</option> + <option value="Tahoma">Tahoma</option> + </select> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Grossir le texte --> + <div class="w3-section"> + <label class="w3-text-dark-gray"><b>Agrandir le texte</b></label> + <select class="w3-select" name="text-size" id="text-size" onchange="changeTextSize()"> + <option value="normal" selected>Normal</option> + <option value="large">Grand</option> + <option value="xlarge">Très Grand</option> + </select> + </div> + + <hr class="w3-divider"> <!-- Séparation --> + + <!-- Sauvegarder les modifications --> + <button type="submit" class="w3-button w3-round w3-margin-top btn w3-text-white" style="background-color: #20195e;">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 x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } + </script> + +</body> +</html> diff --git a/MaquetteWEB/html/PROF/enseignant_permanent.html b/MaquetteWEB/html/PROF/enseignant_permanent.html index 59290c1..506e539 100644 --- a/MaquetteWEB/html/PROF/enseignant_permanent.html +++ b/MaquetteWEB/html/PROF/enseignant_permanent.html @@ -13,14 +13,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -28,19 +28,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -124,5 +146,17 @@ </p> </div> + +<script> + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } +</script> + </body> </html> diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html index 0f32285..1c1e952 100644 --- a/MaquetteWEB/html/PROF/mes-heures.html +++ b/MaquetteWEB/html/PROF/mes-heures.html @@ -11,18 +11,17 @@ </head> <body> - <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -30,19 +29,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -642,6 +663,14 @@ function updateDeclaredHoursSectionVisibility() { } } +function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } </script> </body> diff --git a/MaquetteWEB/html/PROF/mes-informations.html b/MaquetteWEB/html/PROF/mes-informations.html index 9e300cb..5d1a891 100644 --- a/MaquetteWEB/html/PROF/mes-informations.html +++ b/MaquetteWEB/html/PROF/mes-informations.html @@ -13,14 +13,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -28,19 +28,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -281,6 +303,15 @@ document.getElementById('popup').style.display = 'none'; } + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } + </script> </body> diff --git a/MaquetteWEB/html/PROF/notifications.html b/MaquetteWEB/html/PROF/notifications.html index 9e14c1a..978fd69 100644 --- a/MaquetteWEB/html/PROF/notifications.html +++ b/MaquetteWEB/html/PROF/notifications.html @@ -31,14 +31,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -46,19 +46,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -139,13 +161,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/PROF/paiements.html b/MaquetteWEB/html/PROF/paiements.html index 3ef3ca2..450fd50 100644 --- a/MaquetteWEB/html/PROF/paiements.html +++ b/MaquetteWEB/html/PROF/paiements.html @@ -15,14 +15,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -30,19 +30,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -407,6 +429,15 @@ function isDate(dateString) { return !isNaN(Date.parse(dateString)); } +function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } +} + </script> </body> diff --git a/MaquetteWEB/html/PROF/settings.html b/MaquetteWEB/html/PROF/settings.html index 47b21c3..e17de21 100644 --- a/MaquetteWEB/html/PROF/settings.html +++ b/MaquetteWEB/html/PROF/settings.html @@ -75,14 +75,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -90,19 +90,41 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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="./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> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Denis MONNERAT</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;"> </a> </div> </div> @@ -235,13 +257,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/RH/candidature.html b/MaquetteWEB/html/RH/candidature.html index 22e2f1c..af26460 100644 --- a/MaquetteWEB/html/RH/candidature.html +++ b/MaquetteWEB/html/RH/candidature.html @@ -16,14 +16,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -32,19 +32,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -246,13 +269,11 @@ }; 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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/RH/gestion-heures.html b/MaquetteWEB/html/RH/gestion-heures.html index 915c3b4..8e49baa 100644 --- a/MaquetteWEB/html/RH/gestion-heures.html +++ b/MaquetteWEB/html/RH/gestion-heures.html @@ -97,14 +97,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -113,27 +113,47 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> </div> - - - <div class="container"> <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur..." onkeyup="searchProfessor()"> @@ -700,16 +720,14 @@ function deleteVacationOffer(button) { </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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/RH/gestion_personnel.html b/MaquetteWEB/html/RH/gestion_personnel.html index 9d67593..fdaad7f 100644 --- a/MaquetteWEB/html/RH/gestion_personnel.html +++ b/MaquetteWEB/html/RH/gestion_personnel.html @@ -133,14 +133,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -149,19 +149,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -727,16 +750,14 @@ } </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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/RH/mes-informations.html b/MaquetteWEB/html/RH/mes-informations.html index 68a4b54..3c32fe9 100644 --- a/MaquetteWEB/html/RH/mes-informations.html +++ b/MaquetteWEB/html/RH/mes-informations.html @@ -255,14 +255,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -271,19 +271,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -530,16 +553,14 @@ </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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/RH/notifications.html b/MaquetteWEB/html/RH/notifications.html index 24d9c6f..4ac3c8b 100644 --- a/MaquetteWEB/html/RH/notifications.html +++ b/MaquetteWEB/html/RH/notifications.html @@ -32,14 +32,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -48,19 +48,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -141,13 +164,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/RH/rh.html b/MaquetteWEB/html/RH/rh.html index c4ae47b..6c5eb99 100644 --- a/MaquetteWEB/html/RH/rh.html +++ b/MaquetteWEB/html/RH/rh.html @@ -51,14 +51,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -67,19 +67,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -145,13 +168,11 @@ <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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/RH/settings.html b/MaquetteWEB/html/RH/settings.html index ae8b7e6..27d4751 100644 --- a/MaquetteWEB/html/RH/settings.html +++ b/MaquetteWEB/html/RH/settings.html @@ -75,14 +75,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium w3-bar-item"> <a href="./rh.html" class="w3-bar-item w3-button">Accueil</a> <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> @@ -91,19 +91,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <div class="user-name"> - Alice BERGER + Alice BERGER </div> <div class="logout-container w3-bar-item"> <a href="./notifications.html" title="Notifications"> - <img src="../../media/img/notifs.png" alt="Logo notification"> + <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"> + <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"> + <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="./rh.html" class="w3-bar-item w3-button">Accueil</a> + <a href="./gestion_personnel.html" class="w3-bar-item w3-button">Gestion du personnel</a> + <a href="./gestion-heures.html" class="w3-bar-item w3-button">Heures</a> + <a href="./candidature.html" class="w3-bar-item w3-button">Candidatures</a> + <a href="./mes-informations.html" class="w3-bar-item w3-button">Mes informations et documents</a> + + <!-- Section utilisateur pour mobile --> + <div class="w3-bar-item w3-border-top w3-margin-top"> + <div class="user-name">Alice BERGER</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;"> </a> </div> </div> @@ -236,13 +259,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/VACATAIRE/mes-heures.html b/MaquetteWEB/html/VACATAIRE/mes-heures.html index dd07c67..6b94037 100644 --- a/MaquetteWEB/html/VACATAIRE/mes-heures.html +++ b/MaquetteWEB/html/VACATAIRE/mes-heures.html @@ -14,14 +14,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -30,23 +30,48 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> </div> + + <div class="w3-container dashboard-container"> <div class="section-header w3-border-bottom w3-padding"> <h2>Offres de vacation</h2> @@ -527,13 +552,11 @@ <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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/VACATAIRE/mes-informations.html b/MaquetteWEB/html/VACATAIRE/mes-informations.html index 1474a52..505d38b 100644 --- a/MaquetteWEB/html/VACATAIRE/mes-informations.html +++ b/MaquetteWEB/html/VACATAIRE/mes-informations.html @@ -276,14 +276,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -292,19 +292,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -558,16 +581,14 @@ </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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/VACATAIRE/mon-contrat.html b/MaquetteWEB/html/VACATAIRE/mon-contrat.html index 450b8f2..0071ee6 100644 --- a/MaquetteWEB/html/VACATAIRE/mon-contrat.html +++ b/MaquetteWEB/html/VACATAIRE/mon-contrat.html @@ -12,14 +12,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -28,19 +28,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -78,16 +101,14 @@ </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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/VACATAIRE/notifications.html b/MaquetteWEB/html/VACATAIRE/notifications.html index baea7e6..1d5a324 100644 --- a/MaquetteWEB/html/VACATAIRE/notifications.html +++ b/MaquetteWEB/html/VACATAIRE/notifications.html @@ -30,14 +30,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -46,19 +46,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -139,13 +162,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/VACATAIRE/paiements.html b/MaquetteWEB/html/VACATAIRE/paiements.html index 4d5e5f7..3ac1eac 100644 --- a/MaquetteWEB/html/VACATAIRE/paiements.html +++ b/MaquetteWEB/html/VACATAIRE/paiements.html @@ -13,14 +13,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -29,19 +29,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -408,16 +431,14 @@ 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'); + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } } - } </script> </body> diff --git a/MaquetteWEB/html/VACATAIRE/settings.html b/MaquetteWEB/html/VACATAIRE/settings.html index 8cd4b0f..c339ecd 100644 --- a/MaquetteWEB/html/VACATAIRE/settings.html +++ b/MaquetteWEB/html/VACATAIRE/settings.html @@ -74,14 +74,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -90,19 +90,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -235,13 +258,11 @@ </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'); + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; } else { - menu.classList.add('w3-hide-small'); + x.className = x.className.replace(" w3-show", ""); } } </script> diff --git a/MaquetteWEB/html/VACATAIRE/vacataire.html b/MaquetteWEB/html/VACATAIRE/vacataire.html index 8ab49eb..dc7a867 100644 --- a/MaquetteWEB/html/VACATAIRE/vacataire.html +++ b/MaquetteWEB/html/VACATAIRE/vacataire.html @@ -13,14 +13,14 @@ <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;"> + <img src="../../media/img/logoWhite.png" alt="Logo Accueil" class="w3-image" style="width:150px; height:40px;"> </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"> + <div id="menu" class="categories w3-hide-small w3-hide-medium 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> @@ -29,19 +29,42 @@ </div> <!-- Section utilisateur avec déconnexion --> - <div class="user-section w3-bar-item w3-right"> + <div class="user-section w3-right w3-hide-small w3-hide-medium"> <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"> + <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"> + <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"> + <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;"> </a> </div> </div> @@ -125,5 +148,16 @@ </p> </div> +<script> + function toggleMenu() { + var x = document.getElementById("mobileMenu"); + if (x.className.indexOf("w3-show") == -1) { + x.className += " w3-show"; + } else { + x.className = x.className.replace(" w3-show", ""); + } + } +</script> + </body> </html>