diff --git a/MaquetteWEB/README.md b/MaquetteWEB/README.md
new file mode 100644
index 0000000..e69de29
diff --git a/MaquetteWEB/css/CHEF/chef_departement.css b/MaquetteWEB/css/CHEF/chef_departement.css
new file mode 100644
index 0000000..7a98749
--- /dev/null
+++ b/MaquetteWEB/css/CHEF/chef_departement.css
@@ -0,0 +1,222 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #592e05;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #5e3a19;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.alert {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #f44336;
+ color: white;
+ position: relative;
+}
+.alert .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.success {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #4CAF50;
+ color: white;
+ position: relative;
+}
+.success .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.btn {
+ padding: 10px 15px;
+ background-color: #5e3a19;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ display: inline-block;
+}
+.btn:hover {
+ background-color: #9c5e24;
+}
+.input-group {
+ margin-bottom: 20px;
+}
+.input-group label {
+ display: block;
+ margin-bottom: 5px;
+}
+.input-group input, .input-group select {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+/* Styling for the modern schedule */
+.schedule-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+.schedule-table {
+ width: 100%;
+ max-width: 1200px;
+ border-collapse: collapse;
+ border: 1px solid #ddd;
+ background-color: white;
+}
+.schedule-table th,
+.schedule-table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: center;
+}
+.schedule-table th {
+ background-color: #4CAF50;
+ color: white;
+}
+.time-slot {
+ background-color: #f9f9f9;
+ font-weight: bold;
+ width: 70px;
+}
+.class {
+ background-color: #e3f2fd;
+ color: #333;
+ border-left: 5px solid #2141f3;
+ text-align: left;
+ padding-left: 10px;
+ font-weight: bold;
+ position: relative;
+}
+.class span {
+ font-size: 0.9em;
+ color: #555;
+}
+.no-class {
+ background-color: #f9f9f9;
+}
+.week-navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+.week-navigation button {
+ padding: 10px 15px;
+ background-color: #5e3a19;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.week-navigation button:hover {
+ background-color: #9c5e24;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #5e3a19;
+ color: white;
+}
+
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #5e3a19;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
diff --git a/MaquetteWEB/css/CHEF/gestion-heures-formation.css b/MaquetteWEB/css/CHEF/gestion-heures-formation.css
new file mode 100644
index 0000000..ea87b20
--- /dev/null
+++ b/MaquetteWEB/css/CHEF/gestion-heures-formation.css
@@ -0,0 +1,207 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+
+.header {
+ background-color: #5e3a19;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.categories a:hover {
+ text-decoration: underline;
+}
+
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+
+.info-card h2 {
+ border-bottom: 2px solid #5e3a19;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+}
+
+.info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+.info-table th,
+.info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+
+.info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+}
+
+.action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #5e3a19;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+}
+
+.action-btn:hover {
+ background-color: #4a2e13;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+}
+
+.modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ max-width: 400px;
+ border-radius: 8px;
+}
+
+.close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #5e3a19;
+ color: white;
+ margin-top: 40px;
+}
+
+.search-bar {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+}
+
+.details {
+ display: none;
+}
+
+ /* Dropdown menu */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.dropdown:hover .dropbtn {
+ background-color: #4a2e13;
+}
diff --git a/MaquetteWEB/css/CHEF/gestion-heures-professeur.css b/MaquetteWEB/css/CHEF/gestion-heures-professeur.css
new file mode 100644
index 0000000..8117a28
--- /dev/null
+++ b/MaquetteWEB/css/CHEF/gestion-heures-professeur.css
@@ -0,0 +1,206 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+
+.header {
+ background-color: #5e3a19;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.categories a:hover {
+ text-decoration: underline;
+}
+
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+
+.info-card h2 {
+ border-bottom: 2px solid #5e3a19;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+}
+
+.info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+.info-table th,
+.info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+
+.info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+}
+
+.action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #5e3a19;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+}
+
+.action-btn:hover {
+ background-color: #4a2e13;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+}
+
+.modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ max-width: 400px;
+ border-radius: 8px;
+}
+
+.close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #5e3a19;
+ color: white;
+ margin-top: 40px;
+}
+
+.search-bar {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+}
+
+.details {
+ display: none;
+}
+
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.dropdown:hover .dropbtn {
+ background-color: #4a2e13;
+}
diff --git a/MaquetteWEB/css/FINANCE/finance.css b/MaquetteWEB/css/FINANCE/finance.css
new file mode 100644
index 0000000..79e0993
--- /dev/null
+++ b/MaquetteWEB/css/FINANCE/finance.css
@@ -0,0 +1,222 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #20195e;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #20195e;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.alert {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #f44336;
+ color: white;
+ position: relative;
+}
+.alert .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.success {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #4CAF50;
+ color: white;
+ position: relative;
+}
+.success .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.btn {
+ padding: 10px 15px;
+ background-color: #20195e;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ display: inline-block;
+}
+.btn:hover {
+ background-color: #130d47;
+}
+.input-group {
+ margin-bottom: 20px;
+}
+.input-group label {
+ display: block;
+ margin-bottom: 5px;
+}
+.input-group input, .input-group select {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+/* Styling for the modern schedule */
+.schedule-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+.schedule-table {
+ width: 100%;
+ max-width: 1200px;
+ border-collapse: collapse;
+ border: 1px solid #ddd;
+ background-color: white;
+}
+.schedule-table th,
+.schedule-table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: center;
+}
+.schedule-table th {
+ background-color: #4CAF50;
+ color: white;
+}
+.time-slot {
+ background-color: #f9f9f9;
+ font-weight: bold;
+ width: 70px;
+}
+.class {
+ background-color: #e3f2fd;
+ color: #333;
+ border-left: 5px solid #20195e;
+ text-align: left;
+ padding-left: 10px;
+ font-weight: bold;
+ position: relative;
+}
+.class span {
+ font-size: 0.9em;
+ color: #555;
+}
+.no-class {
+ background-color: #f9f9f9;
+}
+.week-navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+.week-navigation button {
+ padding: 10px 15px;
+ background-color: #5e3a19;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.week-navigation button:hover {
+ background-color: #150f48;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #20195e;
+ color: white;
+}
+
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #20195e;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
diff --git a/MaquetteWEB/css/FINANCE/style.css b/MaquetteWEB/css/FINANCE/style.css
new file mode 100644
index 0000000..1d7fa11
--- /dev/null
+++ b/MaquetteWEB/css/FINANCE/style.css
@@ -0,0 +1,194 @@
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+
+ .header {
+ background-color: #20195e;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+
+ .categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+ }
+
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .categories a:hover {
+ text-decoration: underline;
+ }
+
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+
+ .logout-container {
+ display: flex;
+ align-items: center;
+ }
+
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+
+ .info-card h2 {
+ border-bottom: 2px solid #20195e;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+
+ .info-table th,
+ .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #20195e;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+
+ .action-btn:hover {
+ background-color: #191351;
+ }
+
+ .modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+ }
+
+ .modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ max-width: 400px;
+ border-radius: 8px;
+ }
+
+
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #20195e;
+ color: white;
+ margin-top: 40px;
+ }
+
+ .search-bar {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+ }
+
+ .details {
+ display: none;
+ }
+
+ /* Dropdown menu */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+ }
+
+.dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+}
+
+.dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+}
+
+.dropdown-content a:hover {
+ background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+ display: block;
+}
+
+.dropdown:hover .dropbtn {
+ background-color: #20195e;
+}
diff --git a/MaquetteWEB/css/PROF/enseignant_permanent.css b/MaquetteWEB/css/PROF/enseignant_permanent.css
new file mode 100644
index 0000000..6e87176
--- /dev/null
+++ b/MaquetteWEB/css/PROF/enseignant_permanent.css
@@ -0,0 +1,221 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #a17b12;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.alert {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #f44336;
+ color: white;
+ position: relative;
+}
+.alert .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.success {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #4CAF50;
+ color: white;
+ position: relative;
+}
+.success .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.btn {
+ padding: 10px 15px;
+ background-color: #a17b12;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ display: inline-block;
+}
+.btn:hover {
+ background-color: #644c08;
+}
+.input-group {
+ margin-bottom: 20px;
+}
+.input-group label {
+ display: block;
+ margin-bottom: 5px;
+}
+.input-group input, .input-group select {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+/* Styling for the modern schedule */
+.schedule-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+.schedule-table {
+ width: 100%;
+ max-width: 1200px;
+ border-collapse: collapse;
+ border: 1px solid #ddd;
+ background-color: white;
+}
+.schedule-table th,
+.schedule-table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: center;
+}
+.schedule-table th {
+ background-color: #4CAF50;
+ color: white;
+}
+.time-slot {
+ background-color: #f9f9f9;
+ font-weight: bold;
+ width: 70px;
+}
+.class {
+ background-color: #e3f2fd;
+ color: #333;
+ border-left: 5px solid #2141f3;
+ text-align: left;
+ padding-left: 10px;
+ font-weight: bold;
+ position: relative;
+}
+.class span {
+ font-size: 0.9em;
+ color: #555;
+}
+.no-class {
+ background-color: #f9f9f9;
+}
+.week-navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+.week-navigation button {
+ padding: 10px 15px;
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.week-navigation button:hover {
+ background-color: #a17b12;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #a17b12;
+ color: white;
+}
+
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
diff --git a/MaquetteWEB/css/PROF/mes-heures.css b/MaquetteWEB/css/PROF/mes-heures.css
new file mode 100644
index 0000000..4aad589
--- /dev/null
+++ b/MaquetteWEB/css/PROF/mes-heures.css
@@ -0,0 +1,299 @@
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ }
+ .dashboard-container {
+ max-width: 1500px;
+ margin: auto;
+ padding: 20px;
+ }
+ .header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+ .categories {
+ display: flex;
+ gap: 20px;
+ margin-left: 50px;
+ }
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .categories a:hover {
+ text-decoration: underline;
+ }
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+ }
+ .section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #a17b12;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ .card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ }
+ .table-container {
+ overflow-x: auto;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+ table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ table th {
+ background-color: #f2f2f2;
+ }
+ .status-valide {
+ color: green;
+ font-weight: bold;
+ }
+ .status-attente {
+ color: red;
+ font-weight: bold;
+ }
+ /* Styles pour les graphiques */
+ .chart-container {
+ width: 100%;
+ margin: 20px 0;
+ }
+ /* Styles pour le formulaire */
+ .contact-form {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .contact-form h3 {
+ margin-bottom: 15px;
+ }
+ .contact-form select, .contact-form input {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .contact-form button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ }
+ .contact-form button:hover {
+ background-color: #5f490b;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #a17b12;
+ color: white;
+ }
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #a17b12; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #a17b12; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #5f490b;
+ }
+ /* Style pour le détail du cours */
+ .details-button {
+ cursor: pointer;
+ color: #a17b12;
+ text-decoration: underline;
+ }
+
+ .proposition-container {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .proposition-table th, .proposition-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .proposition-table th {
+ background-color: #f2f2f2;
+ }
+
+ .refuse-button{
+ background-color: #a61414;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+
+ .refuse-button:hover{
+ background-color: #590505;
+ }
+
+ .accept-button {
+ background-color: #077712;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+ .accept-button:hover {
+ background-color: #0d5905;
+ }
+ /* Styles pour le formulaire de pièces justificatives */
+ .justificatif-form {
+ display: none; /* Cacher par défaut */
+ margin-top: 20px;
+ padding: 20px;
+ background-color: #f8f8f8;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+
+ /* Styles pour la popup de confirmation */
+ .confirmation-popup {
+ display: none; /* Cacher par défaut */
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ justify-content: center;
+ align-items: center;
+ }
+ .confirmation-content {
+ background-color: white;
+ padding: 20px;
+ border-radius: 5px;
+ text-align: center;
+ }
+
+ .validated-hours {
+ margin-top: 20px;
+ border-top: 1px solid #ccc;
+ padding-top: 20px;
+ }
+ .validated-hours h3 {
+ margin: 0;
+ }
+
+ .status-valide {
+ color: green; /* Pour le statut validé */
+ font-weight: bold;
+ }
+
+ .status-attente {
+ color: rgb(255, 136, 0); /* Pour le statut en attente */
+ font-weight: bold;
+ }
+
+/* Style général pour le conteneur de pagination */
+#pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px 0;
+}
+
+/* Style pour les boutons Précédent et Suivant */
+#pagination button {
+ background-color: #a17b12; /* Couleur de fond verte */
+ color: white; /* Couleur du texte */
+ border: none;
+ padding: 10px 20px;
+ margin: 0 5px; /* Espacement entre les boutons */
+ border-radius: 5px; /* Coins arrondis */
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+/* Hover effect pour les boutons */
+#pagination button:hover {
+ background-color: #5f490b; /* Couleur plus foncée au survol */
+}
+
+/* Style du texte de la page actuelle */
+#pagination span {
+ font-size: 18px;
+ margin: 0 10px;
+}
+
+/* Désactivation des boutons si nécessaire */
+#pagination button:disabled {
+ background-color: #cccccc; /* Couleur gris clair si désactivé */
+ cursor: not-allowed;
+}
diff --git a/MaquetteWEB/css/PROF/paiements.css b/MaquetteWEB/css/PROF/paiements.css
new file mode 100644
index 0000000..540ca46
--- /dev/null
+++ b/MaquetteWEB/css/PROF/paiements.css
@@ -0,0 +1,205 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1500px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #a17b12;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.status-valide {
+ color: green;
+ font-weight: bold;
+}
+.status-attente {
+ color: red;
+ font-weight: bold;
+}
+/* Styles pour les graphiques */
+.chart-container {
+ width: 100%;
+ margin: 20px 0;
+}
+/* Styles pour le formulaire */
+.contact-form {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+.contact-form h3 {
+ margin-bottom: 15px;
+}
+.contact-form select, .contact-form input, .contact-form textarea {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+.contact-form button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+}
+.contact-form button:hover {
+ background-color: #5f490b;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #a17b12;
+ color: white;
+}
+/* Styles pour le popup */
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #a17b12; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #a17b12; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #5f490b;
+ }
+
+.header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+th[data-sort] {
+ cursor: pointer;
+ position: relative;
+ padding-right: 20px; /* Espace pour l'icône */
+}
+
+/* Icône par défaut (tri croissant) */
+th::after {
+ content: "▲";
+ position: absolute;
+ right: 10px;
+ font-size: 12px;
+ color: gray;
+}
+
+/* Classe pour tri croissant */
+th.ascending::after {
+ content: "▲"; /* Tri croissant */
+ color: black; /* Icône active */
+}
+
+/* Classe pour tri décroissant */
+th.descending::after {
+ content: "▼"; /* Tri décroissant */
+ color: black; /* Icône active */
+}
diff --git a/MaquetteWEB/css/RH/rh.css b/MaquetteWEB/css/RH/rh.css
new file mode 100644
index 0000000..df473ec
--- /dev/null
+++ b/MaquetteWEB/css/RH/rh.css
@@ -0,0 +1,136 @@
+
+
+body {
+ font-family: 'Arial', sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+}
+
+
+.logo-container img {
+ height: 50px; /* Ajuster la taille du logo */
+}
+
+.categories a {
+ color: white;
+ text-decoration: none;
+ padding: 10px 15px;
+ transition: background-color 0.3s;
+}
+
+.categories a:hover {
+ background-color: rgba(255, 255, 255, 0.2); /* Effet au survol */
+}
+
+/* Section principale */
+main {
+ padding: 20px;
+}
+
+h2 {
+ margin-bottom: 20px;
+ color: #0f431f; /* Couleur bleu */
+}
+
+/* Table */
+table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ background: white; /* Fond de la table */
+ border-radius: 8px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+th, td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #dddddd; /* Bordure des cellules */
+}
+
+th {
+ background-color: #0f431f; /* Couleur des en-têtes */
+ color: white;
+}
+
+tr:hover {
+ background-color: #f1f1f1; /* Effet au survol des lignes */
+}
+
+/* Boutons */
+button {
+ background-color: #0f431f;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ border-radius: 5px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+ margin-right: 5px; /* Espacement entre les boutons */
+}
+
+button:hover {
+ background-color: #082d13; /* Couleur au survol */
+}
+
+/* Styles pour le pop-up */
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgba(0,0,0,0.4);
+ padding-top: 60px;
+}
+
+.modal-content {
+ background-color: #fff;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 70%;
+ border-radius: 8px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
+}
+
+.close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+/* Formulaire */
+form {
+ display: flex;
+ flex-direction: column;
+}
+
+label {
+ margin: 10px 0 5px; /* Espacement autour des labels */
+}
+
+input[type="text"],
+input[type="date"] {
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+ margin-bottom: 15px; /* Espacement entre les champs */
+}
+
+input[type="text"]:focus,
+input[type="date"]:focus {
+ border-color: #0f431f; /* Couleur de bordure au focus */
+ outline: none; /* Enlève le contour par défaut */
+}
diff --git a/MaquetteWEB/css/RH/style.css b/MaquetteWEB/css/RH/style.css
new file mode 100644
index 0000000..fbb8fd2
--- /dev/null
+++ b/MaquetteWEB/css/RH/style.css
@@ -0,0 +1,194 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+
+.header {
+ background-color: #0f431f;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+
+.categories a:hover {
+ text-decoration: underline;
+}
+
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+}
+
+.info-card h2 {
+ border-bottom: 2px solid #0f431f;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+}
+
+.info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+}
+
+.info-table th,
+.info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+
+.info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+}
+
+.action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #0f431f;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+}
+
+.action-btn:hover {
+ background-color: #092d14;
+}
+
+.modal {
+ display: none;
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+ padding-top: 60px;
+}
+
+.modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ max-width: 400px;
+ border-radius: 8px;
+}
+
+
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #0f431f;
+ color: white;
+ margin-top: 40px;
+}
+
+.search-bar {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 20px;
+ border-radius: 5px;
+ border: 1px solid #ddd;
+}
+
+.details {
+ display: none;
+}
+
+/* Dropdown menu */
+.dropdown {
+ position: relative;
+ display: inline-block;
+}
+
+.dropdown-content {
+display: none;
+position: absolute;
+background-color: white;
+min-width: 200px;
+box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+z-index: 1;
+}
+
+.dropdown-content a {
+color: black;
+padding: 12px 16px;
+text-decoration: none;
+display: block;
+}
+
+.dropdown-content a:hover {
+background-color: #ddd;
+}
+
+.dropdown:hover .dropdown-content {
+display: block;
+}
+
+.dropdown:hover .dropbtn {
+background-color: #0f431f;
+}
diff --git a/MaquetteWEB/css/VACATAIRE/mes-heures.css b/MaquetteWEB/css/VACATAIRE/mes-heures.css
new file mode 100644
index 0000000..11091fe
--- /dev/null
+++ b/MaquetteWEB/css/VACATAIRE/mes-heures.css
@@ -0,0 +1,300 @@
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ }
+ .dashboard-container {
+ max-width: 1500px;
+ margin: auto;
+ padding: 20px;
+ }
+ .header {
+ background-color: #370559;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+ .categories {
+ display: flex;
+ gap: 20px;
+ margin-left: 50px;
+ }
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .categories a:hover {
+ text-decoration: underline;
+ }
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+ }
+ .section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #4a0777;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ }
+ .card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ }
+ .table-container {
+ overflow-x: auto;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+ table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ table th {
+ background-color: #f2f2f2;
+ }
+ .status-valide {
+ color: green;
+ font-weight: bold;
+ }
+ .status-attente {
+ color: red;
+ font-weight: bold;
+ }
+ /* Styles pour les graphiques */
+ .chart-container {
+ width: 100%;
+ margin: 20px 0;
+ }
+ /* Styles pour le formulaire */
+ .contact-form {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .contact-form h3 {
+ margin-bottom: 15px;
+ }
+ .contact-form select, .contact-form input {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .contact-form button {
+ background-color: #4a0777;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+ }
+ .contact-form button:hover {
+ background-color: #370559;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #4a0777;
+ color: white;
+ }
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #4a0777; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #4a0777; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #4a0777;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #370559;
+ }
+ /* Style pour le détail du cours */
+ .details-button {
+ cursor: pointer;
+ color: #4a0777;
+ text-decoration: underline;
+ }
+
+ .proposition-container {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+ .proposition-table th, .proposition-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .proposition-table th {
+ background-color: #f2f2f2;
+ }
+
+ .refuse-button{
+ background-color: #a61414;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+
+ .refuse-button:hover{
+ background-color: #590505;
+ }
+
+ .accept-button {
+ background-color: #077712;
+ color: white;
+ border: none;
+ padding: 10px 15px;
+ cursor: pointer;
+ margin-right: 10px;
+ border-radius: 5px;
+ }
+ .accept-button:hover {
+ background-color: #0d5905;
+ }
+ /* Styles pour le formulaire de pièces justificatives */
+ .justificatif-form {
+ display: none; /* Cacher par défaut */
+ margin-top: 20px;
+ padding: 20px;
+ background-color: #f8f8f8;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+ }
+
+ /* Styles pour la popup de confirmation */
+ .confirmation-popup {
+ display: none; /* Cacher par défaut */
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ justify-content: center;
+ align-items: center;
+ }
+ .confirmation-content {
+ background-color: white;
+ padding: 20px;
+ border-radius: 5px;
+ text-align: center;
+ }
+
+ .validated-hours {
+ margin-top: 20px;
+ border-top: 1px solid #ccc;
+ padding-top: 20px;
+ }
+ .validated-hours h3 {
+ margin: 0;
+ }
+
+ .status-valide {
+ color: green; /* Pour le statut validé */
+ font-weight: bold;
+ }
+
+ .status-attente {
+ color: rgb(255, 136, 0); /* Pour le statut en attente */
+ font-weight: bold;
+ }
+
+/* Style général pour le conteneur de pagination */
+#pagination {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin: 20px 0;
+}
+
+/* Style pour les boutons Précédent et Suivant */
+#pagination button {
+ background-color: #4a0777; /* Couleur de fond verte */
+ color: white; /* Couleur du texte */
+ border: none;
+ padding: 10px 20px;
+ margin: 0 5px; /* Espacement entre les boutons */
+ border-radius: 5px; /* Coins arrondis */
+ font-size: 16px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+/* Hover effect pour les boutons */
+#pagination button:hover {
+ background-color: #3b085e; /* Couleur plus foncée au survol */
+}
+
+/* Style du texte de la page actuelle */
+#pagination span {
+ font-size: 18px;
+ margin: 0 10px;
+}
+
+/* Désactivation des boutons si nécessaire */
+#pagination button:disabled {
+ background-color: #cccccc; /* Couleur gris clair si désactivé */
+ cursor: not-allowed;
+}
+
diff --git a/MaquetteWEB/css/VACATAIRE/paiements.css b/MaquetteWEB/css/VACATAIRE/paiements.css
new file mode 100644
index 0000000..921c444
--- /dev/null
+++ b/MaquetteWEB/css/VACATAIRE/paiements.css
@@ -0,0 +1,205 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1500px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #4a0777;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #4a0777;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.status-valide {
+ color: green;
+ font-weight: bold;
+}
+.status-attente {
+ color: red;
+ font-weight: bold;
+}
+/* Styles pour les graphiques */
+.chart-container {
+ width: 100%;
+ margin: 20px 0;
+}
+/* Styles pour le formulaire */
+.contact-form {
+ margin-top: 30px;
+ padding: 20px;
+ background-color: #fff;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+.contact-form h3 {
+ margin-bottom: 15px;
+}
+.contact-form select, .contact-form input, .contact-form textarea {
+ width: 100%;
+ padding: 10px;
+ margin: 10px 0;
+ border: 1px solid #ddd;
+ border-radius: 5px;
+}
+.contact-form button {
+ background-color: #4a0777;
+ color: white;
+ border: none;
+ padding: 10px 20px;
+ cursor: pointer;
+}
+.contact-form button:hover {
+ background-color: #370559;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #4a0777;
+ color: white;
+}
+/* Styles pour le popup */
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #4a0777; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #4a0777; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #4a0777;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #370559;
+ }
+
+.header {
+ background-color: #370559;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+th[data-sort] {
+ cursor: pointer;
+ position: relative;
+ padding-right: 20px; /* Espace pour l'icône */
+}
+
+/* Icône par défaut (tri croissant) */
+th::after {
+ content: "▲";
+ position: absolute;
+ right: 10px;
+ font-size: 12px;
+ color: gray;
+}
+
+/* Classe pour tri croissant */
+th.ascending::after {
+ content: "▲"; /* Tri croissant */
+ color: black; /* Icône active */
+}
+
+/* Classe pour tri décroissant */
+th.descending::after {
+ content: "▼"; /* Tri décroissant */
+ color: black; /* Icône active */
+}
diff --git a/MaquetteWEB/css/VACATAIRE/vacataire.css b/MaquetteWEB/css/VACATAIRE/vacataire.css
new file mode 100644
index 0000000..7de1062
--- /dev/null
+++ b/MaquetteWEB/css/VACATAIRE/vacataire.css
@@ -0,0 +1,221 @@
+body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+}
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #370559;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+}
+.section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #370559;
+ margin-bottom: 20px;
+}
+.card {
+ background-color: white;
+ padding: 15px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+}
+.table-container {
+ overflow-x: auto;
+}
+table {
+ width: 100%;
+ border-collapse: collapse;
+}
+table th, table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+}
+table th {
+ background-color: #f2f2f2;
+}
+.alert {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #f44336;
+ color: white;
+ position: relative;
+}
+.alert .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.success {
+ padding: 10px;
+ margin-bottom: 20px;
+ background-color: #4CAF50;
+ color: white;
+ position: relative;
+}
+.success .close {
+ position: absolute;
+ right: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: white;
+ cursor: pointer;
+ font-weight: bold;
+ font-size: 18px;
+}
+.btn {
+ padding: 10px 15px;
+ background-color: #370559;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ display: inline-block;
+}
+.btn:hover {
+ background-color: #5a0bda;
+}
+.input-group {
+ margin-bottom: 20px;
+}
+.input-group label {
+ display: block;
+ margin-bottom: 5px;
+}
+.input-group input, .input-group select {
+ width: 100%;
+ padding: 10px;
+ border: 1px solid #ccc;
+ border-radius: 5px;
+}
+/* Styling for the modern schedule */
+.schedule-container {
+ display: flex;
+ justify-content: center;
+ margin-top: 20px;
+}
+.schedule-table {
+ width: 100%;
+ max-width: 1200px;
+ border-collapse: collapse;
+ border: 1px solid #ddd;
+ background-color: white;
+}
+.schedule-table th,
+.schedule-table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: center;
+}
+.schedule-table th {
+ background-color: #4CAF50;
+ color: white;
+}
+.time-slot {
+ background-color: #f9f9f9;
+ font-weight: bold;
+ width: 70px;
+}
+.class {
+ background-color: #e3f2fd;
+ color: #333;
+ border-left: 5px solid #2141f3;
+ text-align: left;
+ padding-left: 10px;
+ font-weight: bold;
+ position: relative;
+}
+.class span {
+ font-size: 0.9em;
+ color: #555;
+}
+.no-class {
+ background-color: #f9f9f9;
+}
+.week-navigation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 10px;
+}
+.week-navigation button {
+ padding: 10px 15px;
+ background-color: #370559;
+ color: white;
+ border: none;
+ border-radius: 5px;
+ cursor: pointer;
+}
+.week-navigation button:hover {
+ background-color: #2e0449;
+}
+.footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #370559;
+ color: white;
+}
+
+.dashboard-container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+}
+.header {
+ background-color: #370559;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
diff --git a/MaquetteWEB/css/index.css b/MaquetteWEB/css/index.css
new file mode 100644
index 0000000..f43716a
--- /dev/null
+++ b/MaquetteWEB/css/index.css
@@ -0,0 +1,118 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #bbd6fb; /* Fond bleu clair */
+ color: #333; /* Couleur du texte */
+ margin: 0;
+ padding: 0;
+}
+
+.w3-container {
+ margin-top: 50px;
+}
+
+h1 {
+ font-size: 36px;
+ color: #0f126b; /* Titre en bleu foncé */
+ text-align: center;
+ margin-bottom: 20px;
+}
+
+p.intro-text {
+ font-size: 20px;
+ color: #555; /* Texte d'intro en gris foncé */
+ text-align: center;
+ margin-bottom: 40px;
+}
+
+.profile-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 20px;
+ justify-items: center;
+ margin-top: 20px;
+ padding: 0 10px;
+}
+
+.profile-card {
+ background-color: #ffffff; /* Fond blanc pour les cartes */
+ border: 1px solid #ddd; /* Bordure grise légère */
+ border-radius: 8px;
+ width: 100%;
+ max-width: 300px;
+ padding: 25px;
+ text-align: center;
+ transition: box-shadow 0.3s;
+ cursor: pointer;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre pour les cartes */
+}
+
+.profile-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
+ opacity: 0.95; /* Légère transparence au survol */
+}
+
+.profile-card img {
+ width: 125px;
+ height: 125px;
+ border-radius: 50%;
+ margin-bottom: 15px;
+}
+
+.profile-card h3 {
+ font-size: 22px;
+ color: #0f126b; /* Couleur du texte des cartes en bleu foncé */
+ margin: 10px 0;
+ text-decoration: underline;
+}
+
+.profile-card p {
+ font-size: 17px;
+ color: #666; /* Couleur du texte en gris foncé */
+}
+
+footer {
+ text-align: center;
+ margin-top: 40px;
+ color: #888; /* Couleur du texte en gris clair */
+ font-size: 14px;
+}
+
+a {
+ text-decoration: none;
+ color: #0f126b; /* Couleur des liens en bleu foncé */
+}
+
+/* Mode sombre */
+body.dark-mode {
+ background-color: #0d1b2a; /* Fond bleu très foncé */
+ color: #ffffff; /* Couleur du texte en blanc */
+}
+
+body.dark-mode h1 {
+ color: #ffffff; /* Titre en blanc */
+}
+
+body.dark-mode p.intro-text {
+ color: #e0e0e0; /* Texte d'introduction en gris clair */
+}
+
+body.dark-mode .profile-card {
+ background-color: #1c2b4b; /* Cartes en bleu foncé */
+ border: 1px solid #2a4a69; /* Bordure plus sombre en bleu */
+}
+
+body.dark-mode .profile-card h3 {
+ color: #ffffff; /* Couleur des titres des cartes en blanc */
+}
+
+body.dark-mode .profile-card p {
+ color: #d1d1d1; /* Couleur du texte en gris clair */
+}
+
+body.dark-mode footer {
+ color: #cccccc; /* Texte du footer en gris clair */
+}
+
+body.dark-mode a {
+ color: #ffffff; /* Lien en blanc */
+}
diff --git a/MaquetteWEB/css/mentions_legales.css b/MaquetteWEB/css/mentions_legales.css
new file mode 100644
index 0000000..57e2e01
--- /dev/null
+++ b/MaquetteWEB/css/mentions_legales.css
@@ -0,0 +1,19 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #f9f9f9;
+ margin: 0;
+ padding: 20px;
+}
+
+h1, h2, h3 {
+ color: #0f1878; /* Bleu */
+}
+
+p {
+ line-height: 1.6;
+}
+
+.email {
+ font-weight: bold;
+ color: #1631c8;
+}
\ No newline at end of file
diff --git a/MaquetteWEB/html/CHEF/chef_departement.html b/MaquetteWEB/html/CHEF/chef_departement.html
new file mode 100644
index 0000000..15b8438
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/chef_departement.html
@@ -0,0 +1,768 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dashboard Chef de département</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
+ <style>
+ .status-correct {
+ color: green;
+ }
+
+ .status-incorrect {
+ color: orange;
+ }
+
+ .status-pending {
+ color: red;
+ }
+
+ .popup {
+ display: none;
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border: 2px solid #ccc;
+ background-color: #fff;
+ padding: 20px;
+ z-index: 10;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ }
+
+ .overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ z-index: 9;
+ }
+
+ .btn-validate {
+ background-color: #5e3a19; /* couleur par défaut */
+ color: white;
+ }
+
+ .btn-validate.validé {
+ background-color: #5e3a19; /* vert pour validé */
+ }
+
+ .btn-validate.correction-demandée {
+ background-color: #5e3a19; /* orange pour correction demandée */
+ }
+
+ .btn-validate.refusé {
+ background-color: #5e3a19; /* rouge pour refusé */
+ }
+
+ .sortable {
+ cursor: pointer;
+ }
+
+ .arrow {
+ margin-left: 5px;
+ font-size: 0.8em;
+ }
+
+ .up {
+ display: none;
+ }
+
+ .schedule-selection {
+ margin: 20px;
+ text-align: center;
+ }
+
+ .schedule-container {
+ margin: 0 auto;
+ max-width: 800px;
+ }
+
+ .schedule-table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .schedule-table th, .schedule-table td {
+ border: 1px solid #ccc;
+ padding: 10px;
+ text-align: center;
+ }
+
+ .time-slot {
+ background-color: #f4f4f4;
+ font-weight: bold;
+ }
+
+ .no-class {
+ background-color: #e0e0e0;
+ }
+
+ .class {
+ background-color: #dff0d8;
+ }
+
+ /* Dropdown menu */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+ }
+
+ .dropdown-content {
+ text-align:left;
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ }
+
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #ddd;
+ }
+
+ .dropdown:hover .dropdown-content {
+ display: block;
+ }
+
+ .dropdown:hover .dropbtn {
+ background-color: #4a2e13;
+ }
+
+ </style>
+</head>
+
+<body>
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <!-- Menu déroulant pour "Gestion des heures" -->
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+
+ <div class="dashboard-container">
+
+
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
+ </div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Correction d'heures en attente :</strong> Vous avez des demandes de correction d'heures à traiter. Merci de le faire au plus vite dans : <a href="mes-heures.html">Gestion des heures</a>.</p>
+ </div>
+ <div class="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Rapport mensuel :</strong> Le rapport mensuel des heures d'enseignement est disponible. <a href="#">Cliquez ici pour le télécharger</a>.</p>
+ </div>
+ </div>
+
+ <!-- Sélection du professeur ou de la classe -->
+ <div class="schedule-selection">
+ <label for="schedule-type">Choisir un emploi du temps :</label>
+ <select id="schedule-type" onchange="updateSchedule()">
+ <option value="professeur1">Professeur Denis MONNERAT</option>
+ <option value="professeur2">Professeur Maxime MENAULT</option>
+ <option value="classe1">Classe BUT1 Groupe 1</option>
+ <option value="classe2">Classe BUT1 Groupe 2</option>
+ </select>
+ </div>
+
+ <div id="schedule-container">
+ <!-- L'emploi du temps sera injecté ici -->
+ </div>
+
+
+ <!-- Suivi des Heures d'enseignement -->
+ <div class="section-header">
+ <h2>Suivi des Heures d'Enseignement</h2>
+ </div>
+ <div class="card">
+ <table class="w3-table-all" id="teaching-hours-table">
+ <thead>
+ <tr>
+ <th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="teaching-hours">
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>Novembre 2024</td>
+ <td>CDI</td>
+ <td>CM</td>
+ <td>25</td>
+ <td>23</td>
+ <td class="status-incorrect">Correction demandée</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>Décembre 2024</td>
+ <td>Vacation</td>
+ <td>TD</td>
+ <td>20</td>
+ <td>20</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Fréderic GERVAIS</td>
+ <td>Décembre 2024</td>
+ <td>CDI</td>
+ <td>TP</td>
+ <td>15</td>
+ <td>15</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ </tbody>
+ </table>
+
+ <!-- Bouton pour voir plus d'informations -->
+ <div style="text-align: center; margin-top: 20px;">
+ <a href="./gestion-heures-professeur.html" class="w3-button w3-brown">Voir plus d'heures</a>
+ </div>
+ </div>
+
+ <!-- Pilotage Budgétaire -->
+ <div class="section-header">
+ <h2>Pilotage Budgétaire</h2>
+ </div>
+ <div class="card budget-table">
+ <p>Voici un aperçu du budget disponible et des dépenses. Vous pouvez suivre vos budgets et dépenses ici.</p>
+ <table class="w3-table-all">
+ <thead>
+ <tr>
+ <th>Catégorie</th>
+ <th>Budget Prévu (€)</th>
+ <th>Dépenses Actuelles (€)</th>
+ <th>Solde (€)</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Formation</td>
+ <td>10,000</td>
+ <td>2,500</td>
+ <td>7,500</td>
+ </tr>
+ <tr>
+ <td>Matériel</td>
+ <td>5,000</td>
+ <td>3,000</td>
+ <td>2,000</td>
+ </tr>
+ <tr>
+ <td>Salaires</td>
+ <td>50,000</td>
+ <td>45,000</td>
+ <td>5,000</td>
+ </tr>
+ </tbody>
+ </table>
+
+ <div style="text-align: center; margin-top: 20px;">
+ <a href="./paiements.html" class="w3-button w3-brown">Accéder au Pilotage Budgétaire</a>
+ </div>
+ </div>
+ </div>
+
+ <!-- Pop-up pour modifier les heures -->
+ <div class="popup" id="popup-form">
+ <h3>Modifier les heures</h3>
+ <form id="form-popup">
+ <label for="validated-hours">Heures validées :</label>
+ <input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0">
+ <br>
+ <label for="status">Statut :</label>
+ <select id="status" class="w3-select" onchange="updateButtonColor()">
+ <option value="Validé" class="status-correct">Validé</option>
+ <option value="Correction demandée" class="status-incorrect">Correction demandée</option>
+ <option value="Refusé" class="status-pending">Refusé</option>
+ </select>
+ <br><br>
+ <button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button>
+ <button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button>
+ </form>
+ </div>
+
+
+ </div>
+
+
+ <!-- Pop-up pour modifier les heures -->
+ <div class="popup" id="popup-form">
+ <h3>Modifier les heures</h3>
+ <form id="form-popup">
+ <label for="validated-hours">Heures validées :</label>
+ <input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0">
+ <br>
+ <label for="status">Statut :</label>
+ <select id="status" class="w3-select" onchange="updateButtonColor()">
+ <option value="Validé" class="status-correct">Validé</option>
+ <option value="Correction demandée" class="status-incorrect">Correction demandée</option>
+ <option value="Refusé" class="status-pending">Refusé</option>
+ </select>
+ <br><br>
+ <button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button>
+ <button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button>
+ </form>
+ </div>
+
+
+
+ <!-- Overlay -->
+ <div class="overlay" id="overlay"></div>
+
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <script>
+ let currentRow; // Garde une trace de la ligne à modifier
+ let lastSortedColumnIndex = -1;
+ let lastSortDirection = 'asc';
+
+ // Fonction pour ouvrir la pop-up
+ function openPopup(button) {
+ currentRow = button.parentElement.parentElement;
+ document.getElementById("validated-hours").value = currentRow.cells[4].textContent;
+ document.getElementById("status").value = currentRow.cells[6].textContent; // Correction ici pour le statut
+ updateButtonColor(); // Mettre à jour la couleur du bouton
+ document.getElementById("popup-form").style.display = 'block';
+ document.getElementById("overlay").style.display = 'block';
+ }
+
+ // Fonction pour fermer la pop-up
+ function closePopup() {
+ document.getElementById("popup-form").style.display = 'none';
+ document.getElementById("overlay").style.display = 'none';
+ }
+
+ // Fonction pour changer la couleur du bouton en fonction du statut
+ function updateButtonColor() {
+ const status = document.getElementById("status").value;
+ const button = document.querySelector('.btn-validate');
+
+ button.classList.remove('validé', 'correction-demandée', 'refusé'); // Retirer toutes les classes
+
+ if (status === "Validé") {
+ button.classList.add('validé');
+ button.style.backgroundColor = 'green'; // Vert
+ } else if (status === "Correction demandée") {
+ button.classList.add('correction-demandée');
+ button.style.backgroundColor = 'orange'; // Orange
+ } else {
+ button.classList.add('refusé');
+ button.style.backgroundColor = 'red'; // Rouge
+ }
+ }
+
+ // Fonction pour valider et mettre à jour les heures et le statut
+ function validateHours() {
+ let validatedHours = document.getElementById("validated-hours").value;
+ let status = document.getElementById("status").value;
+
+ // Mettre à jour les valeurs dans le tableau
+ currentRow.cells[4].textContent = validatedHours;
+ currentRow.cells[6].textContent = status; // Correction ici pour le statut
+
+ // Appliquer les couleurs du statut
+ if (status === "Validé") {
+ currentRow.cells[6].className = "status-correct";
+ } else if (status === "Correction demandée") {
+ currentRow.cells[6].className = "status-incorrect";
+ } else {
+ currentRow.cells[6].className = "status-pending";
+ }
+
+ // Afficher un message de confirmation
+ alert("Heures validées et statut mis à jour!");
+
+ // Fermer la pop-up
+ closePopup();
+ }
+
+ // Fonction pour trier le tableau
+ function sortTable(columnIndex) {
+ const table = document.getElementById("teaching-hours-table");
+ const tbody = table.getElementsByTagName("tbody")[0];
+ const rows = Array.from(tbody.getElementsByTagName("tr"));
+
+ // Déterminer la direction du tri
+ let direction = 'asc';
+ if (lastSortedColumnIndex === columnIndex) {
+ direction = lastSortDirection === 'asc' ? 'desc' : 'asc';
+ }
+ lastSortedColumnIndex = columnIndex;
+ lastSortDirection = direction;
+
+ // Tri des lignes
+ rows.sort((a, b) => {
+ const aText = a.cells[columnIndex].textContent.trim();
+ const bText = b.cells[columnIndex].textContent.trim();
+
+ if (direction === 'asc') {
+ return aText > bText ? 1 : -1;
+ } else {
+ return aText < bText ? 1 : -1;
+ }
+ });
+
+ // Ajout des lignes triées au tableau
+ rows.forEach(row => tbody.appendChild(row));
+
+ // Mettre à jour les flèches
+ updateSortArrows(columnIndex, direction);
+ }
+
+ // Fonction pour mettre à jour les flèches de tri
+ function updateSortArrows(columnIndex, direction) {
+ const headers = document.querySelectorAll("th.sortable");
+ headers.forEach((header, index) => {
+ const arrows = header.querySelectorAll('.arrow');
+ arrows[0].style.display = (index === columnIndex && direction === 'asc') ? 'inline' : 'none'; // Flèche vers le haut
+ arrows[1].style.display = (index === columnIndex && direction === 'desc') ? 'inline' : 'none'; // Flèche vers le bas
+ });
+ }
+ </script>
+ <script>
+ function updateSchedule() {
+ const scheduleType = document.getElementById('schedule-type').value;
+ const scheduleContainer = document.getElementById('schedule-container');
+
+ let scheduleHTML = '';
+
+ if (scheduleType === 'professeur1') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TD - BD<br><span>Salle 101</span><br></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - Informatique<br><span>Salle 101</span><br></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'professeur2') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="class">TD - BD<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Informatique<br><span>Salle 305</span><br></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 305</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'classe1') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="class">TP - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TD - BD<br><span>Salle 101</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - Informatique<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'classe2') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="class">CM - SCR<br><span>Salle 224</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Informatique<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ }
+
+ // Inject the schedule into the container
+ scheduleContainer.innerHTML = scheduleHTML;
+ }
+
+ // Initial call to display the default schedule
+ updateSchedule();
+ </script>
+
+
+
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/CHEF/gestion-edt.html b/MaquetteWEB/html/CHEF/gestion-edt.html
new file mode 100644
index 0000000..b871bd5
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/gestion-edt.html
@@ -0,0 +1,842 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Emplois du Temps</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
+ <link rel="stylesheet" href="../../css/CHEF/chef_departement.css">
+ <style>
+ /* Styles pour le modal */
+ .modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0, 0, 0); /* Fallback color */
+ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+ padding-top: 60px;
+ }
+
+ .modal-content {
+ background-color: #fefefe;
+ margin: 5% auto; /* 15% from the top and centered */
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%; /* Could be more or less, depending on screen size */
+ }
+
+ .close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+ .action-btn {
+ margin: 5px;
+ }
+
+ .table-container {
+ margin: 20px 0;
+ width: 100%;
+ max-width: 1200px;
+ overflow-x: auto; /* Enable horizontal scroll if necessary */
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ th,
+ td {
+ border: 1px solid #ddd;
+ padding: 8px;
+ text-align: left;
+ }
+ /* Styles pour les boutons */
+button {
+ background-color: #5e3a19; /* Couleur marron */
+ color: white; /* Couleur du texte en blanc */
+ border: none; /* Pas de bordure */
+ padding: 10px 20px; /* Espacement interne */
+ text-align: center; /* Centrer le texte */
+ text-decoration: none; /* Pas de soulignement */
+ display: inline-block; /* Affichage en bloc en ligne */
+ font-size: 16px; /* Taille de la police */
+ margin: 4px 2px; /* Marges */
+ cursor: pointer; /* Changer le curseur au survol */
+ border-radius: 4px; /* Coins arrondis */
+ transition: background-color 0.3s; /* Transition douce pour le changement de couleur */
+}
+
+/* Effet au survol */
+button:hover {
+ background-color: #4e2b14; /* Couleur marron plus foncée au survol */
+}
+
+/* Styles pour les éléments de sélection */
+select {
+ background-color: #5e3a19; /* Couleur marron */
+ color: white; /* Couleur du texte en blanc */
+ border: 1px solid #888; /* Bordure */
+ padding: 10px; /* Espacement interne */
+ margin: 5px 0; /* Marges */
+ border-radius: 4px; /* Coins arrondis */
+ font-size: 16px; /* Taille de la police */
+}
+
+/* Styles pour les labels */
+label {
+ font-weight: bold; /* Texte en gras */
+ color: #5e3a19; /* Couleur marron pour le texte */
+}
+
+
+ th {
+ background-color: #f2f2f2;
+ }
+
+ /* Styles pour la barre de recherche */
+ #searchInput {
+ margin-bottom: 20px;
+ padding: 10px;
+ width: 100%;
+ }
+
+ /* Styles for the visual schedule */
+ .schedule-container {
+ margin-top: 40px;
+ }
+
+ .schedule-table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ .section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #5e3a19;
+ margin-bottom: 20px;
+ }
+
+ .schedule-table th,
+ .schedule-table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: center;
+ }
+
+ .course {
+ background-color: #d9edf7;
+ padding: 5px;
+ margin: 2px;
+ border-radius: 4px;
+ }
+
+
+ .dropdown {
+ text-align: left;
+ position: relative;
+ display: inline-block;
+ }
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ }
+
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #ddd;
+ }
+
+ .dropdown:hover .dropdown-content {
+ display: block;
+ }
+
+ .dropdown:hover .dropbtn {
+ background-color: #4a2e13;
+ }
+
+ .form-container {
+ display: flex;
+ flex-direction: column; /* Aligner les éléments en colonne */
+}
+
+.form-group {
+ display: flex; /* Utiliser flexbox pour chaque groupe */
+ justify-content: space-between; /* Espacer l'étiquette et le champ */
+ align-items: center; /* Centrer verticalement */
+ margin-bottom: 15px; /* Espacement entre les groupes */
+}
+
+.form-group label {
+ width: 150px; /* Largeur fixe pour les étiquettes */
+ margin-right: 10px; /* Espacement entre l'étiquette et le champ */
+}
+
+.form-group input {
+ flex: 1; /* Prendre toute la largeur restante */
+}
+
+
+ </style>
+</head>
+
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <div class="section-header">
+ <h2>Ajouts de cours</h2>
+ </div>
+ <!-- Barre de recherche -->
+ <input type="text" id="searchInput" onkeyup="searchCourses()" placeholder="Rechercher un cours, un prof ou une salle...">
+
+ <button onclick="openAddCourseModal()">Ajouter un Cours</button>
+ <button onclick="exportToCSV()">Exporter en CSV</button>
+
+ <div class="table-container">
+ <table id="scheduleTable">
+ <thead>
+ <tr>
+ <th>Type de Cours</th>
+ <th>Matière</th>
+ <th>Salle</th>
+ <th>Heure</th>
+ <th>Date</th>
+ <th>Professeur</th>
+ <th>Classe</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="scheduleBody">
+ <!-- Fake schedules for demonstration -->
+ <tr>
+ <td>CM</td>
+ <td>SCR</td>
+ <td>101</td>
+ <td>09:00</td>
+ <td>2024-10-15</td>
+ <td>Denis MONNERAT</td>
+ <td>BUT1</td>
+ <td>
+ <button class="action-btn" onclick="openEditCourseModal('CM', 'SCR', '101', '09:00', '2024-10-15', 'Denis MONNERAT', 'BUT1', this)">Modifier</button>
+ <button class="action-btn" onclick="deleteCourse(this)">Supprimer</button>
+ </td>
+ </tr>
+ <tr>
+ <td>TD</td>
+ <td>DEV</td>
+ <td>202</td>
+ <td>10:00</td>
+ <td>2024-10-16</td>
+ <td>Maxime MENAULT</td>
+ <td>BUT2</td>
+ <td>
+ <button class="action-btn" onclick="openEditCourseModal('TD', 'DEV', '202', '10:00', '2024-10-16', 'Maxime MENAULT', 'BUT2', this)">Modifier</button>
+ <button class="action-btn" onclick="deleteCourse(this)">Supprimer</button>
+ </td>
+ </tr>
+ <tr>
+ <td>TP</td>
+ <td>Mathématiques</td>
+ <td>303</td>
+ <td>11:00</td>
+ <td>2024-10-17</td>
+ <td>Denis MONNERAT</td>
+ <td>BUT2</td>
+ <td>
+ <button class="action-btn" onclick="openEditCourseModal('TP', 'Mathématiques', '303', '11:00', '2024-10-17', 'Denis MONNERAT', 'BUT2', this)">Modifier</button>
+ <button class="action-btn" onclick="deleteCourse(this)">Supprimer</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="section-header">
+ <h2>Emplois du temps</h2>
+ </div>
+
+ <!-- Sélection du professeur ou de la classe -->
+ <div class="schedule-selection">
+ <label for="schedule-type">Choisir un emploi du temps :</label>
+ <select id="schedule-type" onchange="updateSchedule()">
+ <option value="professeur1">Professeur Denis MONNERAT</option>
+ <option value="professeur2">Professeur Maxime MENAULT</option>
+ <option value="classe1">Classe BUT1 Groupe 1</option>
+ <option value="classe2">Classe BUT1 Groupe 2</option>
+ </select>
+ </div>
+
+ <div id="schedule-container">
+ <!-- L'emploi du temps sera injecté ici -->
+ </div>
+
+ </div>
+
+<!-- Modals -->
+<div id="addCourseModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeAddCourseModal()">×</span>
+ <h2>Ajouter un Cours</h2>
+ <form id="addCourseForm" class="form-container">
+ <div class="form-group">
+ <label for="courseType">Type de Cours :</label>
+ <input type="text" id="courseType" placeholder="ex: CM" required>
+ </div>
+ <div class="form-group">
+ <label for="subject">Matière :</label>
+ <input type="text" id="subject" placeholder="ex: Mathématiques" required>
+ </div>
+ <div class="form-group">
+ <label for="room">Salle :</label>
+ <input type="text" id="room" placeholder="ex: 224" required>
+ </div>
+ <div class="form-group">
+ <label for="time">Heure :</label>
+ <input type="time" id="time" required>
+ </div>
+ <div class="form-group">
+ <label for="date">Date :</label>
+ <input type="date" id="date" required>
+ </div>
+ <div class="form-group">
+ <label for="teacher">Professeur :</label>
+ <input type="text" id="teacher" placeholder="ex: Denis MONNERAT" required>
+ </div>
+ <div class="form-group">
+ <label for="class">Classe :</label>
+ <input type="text" id="class" placeholder="ex: BUT1" required>
+ </div>
+ <button type="submit">Ajouter</button>
+ </form>
+ </div>
+</div>
+
+
+<div id="editCourseModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeEditCourseModal()">×</span>
+ <h2>Modifier un Cours</h2>
+ <form id="editCourseForm" class="form-container">
+ <div class="form-group">
+ <label for="editCourseType">Type de Cours :</label>
+ <input type="text" id="editCourseType" placeholder="ex: TD" required>
+ </div>
+ <div class="form-group">
+ <label for="editSubject">Matière :</label>
+ <input type="text" id="editSubject" placeholder="ex: Physique" required>
+ </div>
+ <div class="form-group">
+ <label for="editRoom">Salle :</label>
+ <input type="text" id="editRoom" placeholder="ex: 101" required>
+ </div>
+ <div class="form-group">
+ <label for="editTime">Heure :</label>
+ <input type="time" id="editTime" required>
+ </div>
+ <div class="form-group">
+ <label for="editDate">Date :</label>
+ <input type="date" id="editDate" required>
+ </div>
+ <div class="form-group">
+ <label for="editTeacher">Professeur :</label>
+ <input type="text" id="editTeacher" placeholder="ex: Jean DUPONT" required>
+ </div>
+ <div class="form-group">
+ <label for="editClass">Classe :</label>
+ <input type="text" id="editClass" placeholder="ex: L2" required>
+ </div>
+ <button type="submit">Modifier</button>
+ </form>
+ </div>
+</div>
+
+
+ <script>
+
+
+ document.getElementById("addCourseForm").addEventListener("submit", function(event) {
+ event.preventDefault(); // Empêcher le rechargement de la page
+ addCourse(); // Appeler la fonction pour ajouter le cours
+ });
+
+ document.getElementById("editCourseForm").addEventListener("submit", function(event) {
+ event.preventDefault(); // Empêcher le rechargement de la page
+ editCourse(); // Appeler la fonction pour modifier le cours
+ });
+
+ // Fonction pour ajouter un cours
+ function addCourse() {
+ const type = document.getElementById("courseType").value;
+ const subject = document.getElementById("subject").value;
+ const room = document.getElementById("room").value;
+ const time = document.getElementById("time").value;
+ const date = document.getElementById("date").value;
+ const teacher = document.getElementById("teacher").value;
+ const className = document.getElementById("class").value;
+
+ const table = document.getElementById("scheduleBody");
+ const newRow = table.insertRow(); // Ajouter une nouvelle ligne
+
+ // Insérer les cellules
+ newRow.innerHTML = `
+ <td>${type}</td>
+ <td>${subject}</td>
+ <td>${room}</td>
+ <td>${time}</td>
+ <td>${date}</td>
+ <td>${teacher}</td>
+ <td>${className}</td>
+ <td>
+ <button class="action-btn" onclick="openEditCourseModal('${type}', '${subject}', '${room}', '${time}', '${date}', '${teacher}', '${className}', this)">Modifier</button>
+ <button class="action-btn" onclick="deleteCourse(this)">Supprimer</button>
+ </td>
+ `;
+
+ // Fermer le modal
+ closeAddCourseModal();
+ }
+
+ // Fonction pour modifier un cours
+ function editCourse() {
+ const type = document.getElementById("editCourseType").value;
+ const subject = document.getElementById("editSubject").value;
+ const room = document.getElementById("editRoom").value;
+ const time = document.getElementById("editTime").value;
+ const date = document.getElementById("editDate").value;
+ const teacher = document.getElementById("editTeacher").value;
+ const className = document.getElementById("editClass").value;
+
+ const button = event.target.closest('button'); // Trouver le bouton qui a ouvert le modal
+ const row = button.parentNode.parentNode; // Obtenir la ligne correspondante
+
+ // Mettre à jour les cellules de la ligne
+ row.cells[0].innerText = type;
+ row.cells[1].innerText = subject;
+ row.cells[2].innerText = room;
+ row.cells[3].innerText = time;
+ row.cells[4].innerText = date;
+ row.cells[5].innerText = teacher;
+ row.cells[6].innerText = className;
+
+ // Fermer le modal
+ closeEditCourseModal();
+ }
+
+ // Script JavaScript
+
+ const scheduleData = [
+ { day: 'Lundi', hour: '09:00', subject: 'SCR', teacher: 'Denis MONNERAT', class: 'BUT1' },
+ { day: 'Lundi', hour: '10:00', subject: 'DEV', teacher: 'Maxime MENAULT', class: 'BUT2' },
+ { day: 'Mardi', hour: '11:00', subject: 'Mathématiques', teacher: 'Denis MONNERAT', class: 'BUT2' },
+ // Ajoutez plus de données de cours ici...
+ ];
+
+ function openAddCourseModal() {
+ document.getElementById("addCourseModal").style.display = "block";
+ }
+
+ function closeAddCourseModal() {
+ document.getElementById("addCourseModal").style.display = "none";
+ }
+
+ function openEditCourseModal(type, subject, room, time, date, teacher, className, btn) {
+ // Ouvrir le modal de modification avec les données du cours
+ document.getElementById("editCourseModal").style.display = "block";
+ document.getElementById("editCourseType").value = type;
+ document.getElementById("editSubject").value = subject;
+ document.getElementById("editRoom").value = room;
+ document.getElementById("editTime").value = time;
+ document.getElementById("editDate").value = date;
+ document.getElementById("editTeacher").value = teacher;
+ document.getElementById("editClass").value = className;
+ }
+
+ function closeEditCourseModal() {
+ document.getElementById("editCourseModal").style.display = "none";
+ }
+
+ function deleteCourse(btn) {
+ const row = btn.parentNode.parentNode; // Récupérer la ligne du tableau
+ row.parentNode.removeChild(row); // Supprimer la ligne
+ }
+
+ function searchCourses() {
+ const input = document.getElementById('searchInput');
+ const filter = input.value.toLowerCase();
+ const rows = document.querySelectorAll('#scheduleBody tr');
+
+ rows.forEach(row => {
+ const cells = row.getElementsByTagName('td');
+ let found = false;
+
+ for (let i = 0; i < cells.length; i++) {
+ if (cells[i].textContent.toLowerCase().indexOf(filter) > -1) {
+ found = true;
+ break;
+ }
+ }
+
+ row.style.display = found ? '' : 'none'; // Afficher ou masquer la ligne
+ });
+ }
+
+ function exportToCSV() {
+ // Code pour exporter les données en CSV (à implémenter)
+ console.log("Exporter en CSV");
+ }
+
+ function previousWeek() {
+ // Code pour afficher la semaine précédente (à implémenter)
+ console.log("Semaine précédente");
+ }
+
+ function nextWeek() {
+ // Code pour afficher la semaine suivante (à implémenter)
+ console.log("Semaine suivante");
+ }
+
+ function updateSchedule() {
+ const scheduleType = document.getElementById('schedule-type').value;
+ const scheduleContainer = document.getElementById('schedule-container');
+
+ let scheduleHTML = '';
+
+ if (scheduleType === 'professeur1') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TD - BD<br><span>Salle 101</span><br></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - Informatique<br><span>Salle 101</span><br></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'professeur2') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="class">TD - BD<br><span>Salle 305</span><br></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Informatique<br><span>Salle 305</span><br></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 202</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 305</span><br></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'classe1') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="class">TP - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TD - BD<br><span>Salle 101</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - Informatique<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="class">CM - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ } else if (scheduleType === 'classe2') {
+ scheduleHTML = `
+ <div class="card">
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="class">CM - SCR<br><span>Salle 224</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="class">TD - DEV<br><span>Salle 305</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="class">TD - DEV<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TP - BD<br><span>Salle 305</span><br><strong>Prof: Alice DURAND</strong></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="no-class"></td>
+ <td class="class">CM - Informatique<br><span>Salle 202</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="class">TP - DEV<br><span>Salle 202</span><br><strong>Prof: Denis MONNERAT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">TD - DEV<br><span>Salle 225</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ <td class="no-class"></td>
+ <td class="class">CM - Mathématiques<br><span>Salle 101</span><br><strong>Prof: Maxime MENAULT</strong></td>
+ </tr>
+ <!-- Add more slots as needed -->
+ </tbody>
+ </table>
+ </div>
+ </div>`;
+ }
+
+ // Inject the schedule into the container
+ scheduleContainer.innerHTML = scheduleHTML;
+ }
+
+ // Initialiser l'emploi du temps au chargement
+ updateSchedule();
+ </script>
+
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-formation.html b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
new file mode 100644
index 0000000..370164f
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/gestion-heures-formation.html
@@ -0,0 +1,373 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Pilotage Budgétaire</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/CHEF/gestion-heures-formation.css">
+ <style>
+ /* Styles pour le modal */
+ .modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0, 0, 0); /* Fallback color */
+ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+ padding-top: 60px;
+ }
+
+
+ .modal-content {
+ background-color: #fefefe;
+ margin: 5% auto; /* 15% from the top and centered */
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%; /* Could be more or less, depending on screen size */
+ }
+
+ .close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+
+ .action-btn {
+ margin: 5px;
+ }
+
+ .chart-container {
+ position: relative;
+ margin: 20px 0;
+ width: 100%;
+ max-width: 1200px; /* Largeur max du graphique */
+ height: 400px; /* Hauteur du graphique */
+ }
+ </style>
+</head>
+
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+
+ <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher une formation..." onkeyup="searchFormation()">
+
+ <div class="info-card">
+ <h2>Détails des Formations</h2>
+ <table class="info-table" id="formationTable">
+ <thead>
+ <tr>
+ <th>Formation</th>
+ <th>Nombre total d'heures</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>BUT1 Informatique</td>
+ <td>400h</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'but1-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('BUT1 Informatique')">Ajouter des heures</button>
+ </td>
+ </tr>
+ <tr class="details" id="but1-details">
+ <td colspan="3">
+ <strong>Détails des heures :</strong>
+ <ul>
+ <li>Maxime MENAULT - Groupe 1 : 30h</li>
+ <li>Denis MONNERAT - Groupe 2 : 45h</li>
+ <li>Période : Semestre 1</li>
+ </ul>
+ <!-- Graphique pour BUT1 Informatique -->
+ <div class="chart-container">
+ <canvas id="but1Chart"></canvas>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>BUT2 Informatique FA</td>
+ <td>600h</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'master-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('BUT2 Informatique FA')">Ajouter des heures</button>
+ </td>
+ </tr>
+ <tr class="details" id="master-details">
+ <td colspan="3">
+ <strong>Détails des heures :</strong>
+ <ul>
+ <li>Maxime MENAULT - Groupe FA : 50h</li>
+ <li>Denis MONNERAT - Groupe FA : 90h</li>
+ <li>Période : Semestre 2</li>
+ </ul>
+ <!-- Graphique pour BUT2 Informatique FA -->
+ <div class="chart-container">
+ <canvas id="masterChart"></canvas>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <canvas id="totalHoursChart"></canvas>
+
+ </div>
+
+<!-- Modal pour ajouter des heures -->
+<div id="myModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Ajouter des heures</h2>
+ <form id="addHoursForm">
+ <label for="professor">Choisissez un professeur :</label>
+ <select id="professor" name="professor">
+ <option value="Denis MONNERAT">Denis MONNERAT (Permanent)</option>
+ <option value="Maxime MENAULT">Maxime MENAULT (Vacataire)</option>
+ </select>
+ <br><br>
+
+ <label for="subject">Choisissez une matière :</label>
+ <select id="subject" name="subject">
+ <option value="SCR">SCR</option>
+ <option value="Mathématiques">Mathématiques</option>
+ <option value="DEV">DEV</option>
+ <option value="EGOD">EGOD</option>
+ <option value="EC">EC</option>
+ <option value="BD">BD</option>
+ <option value="Anglais">Anglais</option>
+ </select>
+ <br><br>
+
+ <!-- Nouveau champ pour la date -->
+ <label for="date">Date :</label>
+ <input type="date" id="date" name="date" required>
+ <br><br>
+
+ <!-- Nouveau champ pour l'heure -->
+ <label for="time">Heure de début :</label>
+ <input type="time" id="time" name="time" required>
+ <br><br>
+
+ <!-- Nouveau champ pour l'heure -->
+ <label for="time">Heure de fin :</label>
+ <input type="time" id="time" name="time" required>
+ <br><br>
+
+ <!-- Nouveau champ pour la salle -->
+ <label for="classroom">Salle de classe :</label>
+ <input type="text" id="classroom" name="classroom" placeholder="Ex: 224" required>
+ <br><br>
+
+ <button type="button" onclick="submitHours()">Ajouter</button>
+ </form>
+ </div>
+</div>
+
+
+ <!-- Modal de confirmation -->
+ <div id="confirmationModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeConfirmationModal()">×</span>
+ <h2>Confirmation</h2>
+ <p>Les heures ont été ajoutées avec succès.</p>
+ <p>Un e-mail a été envoyé au professeur.</p>
+ </div>
+ </div>
+
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <script>
+ // Fonction pour afficher ou masquer les détails d'une formation et changer le texte du bouton
+ function toggleDetails(button, detailId) {
+ const detailsRow = document.getElementById(detailId);
+ if (detailsRow.style.display === "none" || detailsRow.style.display === "") {
+ detailsRow.style.display = "table-row";
+ button.textContent = "Fermer"; // Change le texte du bouton en "Fermer"
+ // Dessiner le graphique lorsque les détails sont affichés
+ if (detailId === 'but1-details') {
+ drawChart('but1Chart', 'BUT1 Informatique', [30, 45], ['Maxime MENAULT', 'Denis MONNERAT']);
+ } else if (detailId === 'master-details') {
+ drawChart('masterChart', 'BUT2 Informatique FA', [50, 90], ['Maxime MENAULT', 'Denis MONNERAT']);
+ }
+ } else {
+ detailsRow.style.display = "none";
+ button.textContent = "Voir"; // Remet le texte du bouton à "Voir"
+ }
+ }
+
+ // Fonction de recherche des formations
+ function searchFormation() {
+ const input = document.getElementById("searchBar").value.toLowerCase();
+ const table = document.getElementById("formationTable");
+ const rows = table.getElementsByTagName("tr");
+
+ for (let i = 1; i < rows.length; i++) {
+ const cells = rows[i].getElementsByTagName("td");
+ if (cells.length > 0) {
+ const formationName = cells[0].innerText.toLowerCase();
+ if (formationName.includes(input)) {
+ rows[i].style.display = "";
+ } else {
+ rows[i].style.display = "none";
+ }
+ }
+ }
+ }
+
+ // Fonction pour ouvrir le modal pour ajouter des heures
+ function openModal(formationName) {
+ document.getElementById("myModal").style.display = "block";
+ }
+
+ // Fonction pour fermer le modal
+ function closeModal() {
+ document.getElementById("myModal").style.display = "none";
+ document.getElementById("addHoursForm").reset(); // Réinitialiser le formulaire
+ }
+
+ // Fonction pour soumettre les heures ajoutées
+ function submitHours() {
+ const professor = document.getElementById("professor").value;
+ const subject = document.getElementById("subject").value;
+ const hours = document.getElementById("hours").value;
+
+ // Ici, vous pouvez ajouter la logique pour mettre à jour la table des formations
+ // Exemple : ajouter les heures à la table
+
+ // Ouvrir le modal de confirmation
+ document.getElementById("confirmationModal").style.display = "block";
+
+ // Fermer le modal d'ajout d'heures
+ closeModal();
+ }
+
+ // Fonction pour fermer le modal de confirmation
+ function closeConfirmationModal() {
+ document.getElementById("confirmationModal").style.display = "none";
+ }
+
+ // Fonction pour dessiner le graphique
+ function drawChart(chartId, label, data, labels) {
+ const ctx = document.getElementById(chartId).getContext('2d');
+ const myChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: labels,
+ datasets: [{
+ label: label,
+ data: data,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ }
+
+ // Fonction pour dessiner le graphique général
+ function drawTotalHoursChart() {
+ const ctx = document.getElementById('totalHoursChart').getContext('2d');
+ const totalHoursChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['BUT1 Informatique', 'BUT2 Informatique FA'],
+ datasets: [{
+ label: 'Total d\'heures',
+ data: [400, 600], // Remplacez ces valeurs par le total d'heures pour chaque formation
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ }
+
+ // Dessiner le graphique général après le chargement de la page
+ window.onload = function() {
+ drawTotalHoursChart();
+ };
+ </script>
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/CHEF/gestion-heures-professeur.html b/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
new file mode 100644
index 0000000..f83a49b
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/gestion-heures-professeur.html
@@ -0,0 +1,723 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Pilotage Budgétaire</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <style>
+ .chart-container {
+ position: relative;
+ margin: 20px 0;
+ width: 100%;
+ max-width: 1200px;
+ }
+
+ .sortable {
+ cursor: pointer;
+ }
+
+ .arrow {
+ margin-left: 5px;
+ font-size: 0.8em;
+ }
+
+ .up {
+ display: none;
+ }
+
+ .status-correct {
+ color: green;
+ }
+
+ .status-incorrect {
+ color: orange;
+ }
+
+ .status-pending {
+ color: red;
+ }
+
+ .popup2 {
+ display: none;
+ position: fixed;
+ left: 50%;
+ top: 50%;
+ transform: translate(-50%, -50%);
+ border: 2px solid #ccc;
+ background-color: #fff;
+ padding: 20px;
+ z-index: 10;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+ }
+
+ .modal {
+ display: none; /* Hidden by default */
+ position: fixed; /* Stay in place */
+ z-index: 1; /* Sit on top */
+ left: 0;
+ top: 0;
+ width: 100%; /* Full width */
+ height: 100%; /* Full height */
+ overflow: auto; /* Enable scroll if needed */
+ background-color: rgb(0, 0, 0); /* Fallback color */
+ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+ }
+
+ .modal-content {
+ background-color: #fefefe;
+ margin: 15% auto; /* 15% from the top and centered */
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%; /* Could be more or less, depending on screen size */
+ }
+
+ .close {
+ color: #aaa;
+ float: right;
+ font-size: 28px;
+ font-weight: bold;
+ }
+
+ .close:hover,
+ .close:focus {
+ color: black;
+ text-decoration: none;
+ cursor: pointer;
+ }
+ </style>
+</head>
+
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+
+
+ <div class="container">
+
+ <input type="text" id="searchBar" class="search-bar" placeholder="Rechercher un professeur..." onkeyup="searchProfessor()">
+
+ <div class="info-card">
+ <div class="section-header">
+ <h2>Suivi des demandes de modification d'heures</h2>
+ </div>
+ <div class="card">
+ <table class="w3-table-all" id="teaching-hours-table">
+ <thead>
+ <tr>
+ <th class="sortable" onclick="sortTable(0)">Nom de l'enseignant <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(1)">Période <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(2)">Contrat <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(3)">Type d'heure <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(4)">Heures déclarées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(5)">Heures validées <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th class="sortable" onclick="sortTable(6)">Statut <span class="arrow">▲</span><span class="arrow up">▼</span></th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="teaching-hours">
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>Novembre 2024</td>
+ <td>CDI</td>
+ <td>CM</td>
+ <td>25</td>
+ <td>23</td>
+ <td class="status-incorrect">Correction demandée</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>Décembre 2024</td>
+ <td>Vacation</td>
+ <td>TD</td>
+ <td>20</td>
+ <td>20</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ <tr>
+ <td>Fréderic GERVAIS</td>
+ <td>Décembre 2024</td>
+ <td>CDI</td>
+ <td>TP</td>
+ <td>15</td>
+ <td>15</td>
+ <td class="status-correct">Validé</td>
+ <td><button class="w3-button w3-brown" onclick="openPopup(this)">Modifier</button></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+
+ <h2>Heures des Professeurs</h2>
+ <table class="info-table" id="professorTable">
+ <thead>
+ <tr>
+ <th>Professeur</th>
+ <th>Nombre d'heures</th>
+ <th>Statut</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Denis MONNERAT</td>
+ <td>120h</td>
+ <td>Permanents</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'denis-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('Denis MONNERAT')">Modifier</button>
+ </td>
+ </tr>
+ <tr class="details" id="denis-details">
+ <td colspan="4">
+ <strong>Historique des heures :</strong>
+ <ul>
+ <li>BUT1 Groupe 1 : 30h</li>
+ <li>BUT2 Groupe 2 : 40h</li>
+ <li>BUT3 Groupe 1 : 50h</li>
+ </ul>
+ <div class="chart-container">
+ <canvas id="denisChart"></canvas>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>Maxime MENAULT</td>
+ <td>90h</td>
+ <td>Vacataire</td>
+ <td>
+ <button class="action-btn" onclick="toggleDetails(this, 'menault-details')">Voir</button>
+ <button class="action-btn" onclick="openModal('Maxime MENAULT')">Modifier</button>
+ </td>
+ </tr>
+ <tr class="details" id="menault-details">
+ <td colspan="4">
+ <strong>Historique des heures :</strong>
+ <ul>
+ <li>BUT1 Groupe 1 : 45h</li>
+ <li>BUT2 Groupe 3 : 45h</li>
+ </ul>
+ <div class="chart-container">
+ <canvas id="menaultChart"></canvas>
+ </div>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <div class="section-header">
+ <h2>Gestion des Offres de Vacation</h2>
+ </div>
+ <div class="card">
+ <button class="w3-button w3-brown" onclick="openVacationModal()">Ajouter une Offre</button>
+ <table class="w3-table-all" id="vacation-offers-table">
+ <thead>
+ <tr>
+ <th>Nom de l'Offre</th>
+ <th>Date</th>
+ <th>Type</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="vacation-offers">
+ <!-- Les lignes d'offres de vacation seront ajoutées ici -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+
+ <!-- Graphique Principal -->
+ <div class="chart-container">
+ <canvas id="mainChart"></canvas>
+ </div>
+ </div>
+
+ <div id="myModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Ajouter des heures</h2>
+ <p id="professorName"></p>
+
+ <label for="hours">Type de cours :</label>
+ <input type="text" id="hours" placeholder="Ex: CM"><br><br>
+
+ <label for="startTime">Heure de début :</label>
+ <input type="time" id="startTime"><br><br>
+
+ <label for="endTime">Heure de fin :</label>
+ <input type="time" id="endTime"><br><br>
+
+ <label for="subject">Choisissez une formation :</label>
+ <select id="subject" name="subject">
+ <option value="but1fi">BUT1 Informatique FI</option>
+ <option value="but2fi">BUT2 Informatique FI</option>
+ <option value="but2fa">BUT2 Informatique FA</option>
+ </select>
+ <br><br>
+
+ <label for="matiere">Choisissez une matière :</label>
+ <select id="matiere" name="matiere">
+ <option value="SCR">SCR</option>
+ <option value="Mathématiques">Mathématiques</option>
+ <option value="DEV">DEV</option>
+ <option value="EGOD">EGOD</option>
+ <option value="EC">EC</option>
+ <option value="BD">BD</option>
+ <option value="Anglais">Anglais</option>
+ </select>
+ <br><br>
+
+ <button class="action-btn" onclick="addHours()">Ajouter</button>
+ </div>
+ </div>
+
+ <div id="vacationModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeVacationModal()">×</span>
+ <h2 id="modal-title">Ajouter une Offre de Vacation</h2>
+
+ <label for="offerName">Nom de l'Offre :</label>
+ <input type="text" id="offerName" placeholder="Ex: Cours de Maths"><br><br>
+
+ <label for="offerDescription">Description :</label>
+ <textarea id="offerDescription" placeholder="Décrivez l'offre ici..." rows="3"></textarea><br><br>
+
+ <label for="offerDate">Date :</label>
+ <input type="date" id="offerDate"><br><br>
+
+ <label for="offerHours">Heures :</label>
+ <input type="number" id="offerHours" placeholder="Ex: 3" min="1"><br><br>
+
+ <label>Type :</label><br>
+ <input type="checkbox" id="cm" name="offerType" value="CM">
+ <label for="cm">CM</label><br>
+
+ <input type="checkbox" id="td" name="offerType" value="TD">
+ <label for="td">TD</label><br>
+
+ <input type="checkbox" id="tp" name="offerType" value="TP">
+ <label for="tp">TP</label><br>
+
+ <input type="checkbox" id="suivi" name="offerType" value="Suivi">
+ <label for="suivi">Suivi</label><br><br>
+
+ <button class="action-btn" onclick="addVacationOffer()">Ajouter</button>
+ <button class="action-btn" id="update-btn" onclick="updateVacationOffer()" style="display:none;">Modifier</button>
+ </div>
+ </div>
+
+
+
+
+ <div id="confirmModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeConfirmModal()">×</span>
+ <h2>Confirmation</h2>
+ <p>La demande de modification d'heures a été envoyée au service RH avec succès.</p>
+ </div>
+ </div>
+
+ <!-- Pop-up pour modifier les heures -->
+ <!-- Pop-up pour modifier les heures -->
+<div class="popup2" id="popup-form">
+ <h3>Modifier les heures</h3>
+ <form id="form-popup">
+ <label for="validated-hours">Heures validées :</label>
+ <input type="number" id="validated-hours" class="w3-input" min="0" max="100" value="0">
+ <br>
+ <label for="status">Statut :</label>
+ <select id="status" class="w3-select" onchange="updateButtonColor()">
+ <option value="Validé" class="status-correct">Validé</option>
+ <option value="Correction demandée" class="status-incorrect">Correction demandée</option>
+ <option value="Refusé" class="status-pending">Refusé</option>
+ </select>
+ <br><br>
+
+ <!-- Ajout du champ commentaire -->
+ <label for="comment">Commentaire :</label>
+ <textarea id="comment" class="w3-input" rows="4" placeholder="Ajouter un commentaire..."></textarea>
+ <br><br>
+
+ <button type="button" class="w3-button w3-green btn-validate" onclick="validateHours()">Valider</button>
+ <button type="button" class="w3-button w3-red" onclick="closePopup()">Annuler</button>
+ </form>
+</div>
+
+
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <script>
+ // Données pour le graphique principal
+ const categories = ['Vacataires', 'Permanents', 'Chercheurs'];
+ const heuresParCategorie = [90, 120, 80]; // Exemple de données
+
+ // Fonction pour initialiser le graphique principal
+ function initMainChart() {
+ const ctx = document.getElementById('mainChart').getContext('2d');
+ new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: categories,
+ datasets: [{
+ label: 'Heures des Professeurs par Catégorie',
+ data: heuresParCategorie,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+ }
+
+ // Fonction pour initialiser le graphique d'un professeur
+ function initProfessorChart(professor, heures) {
+ const ctx = document.getElementById(professor + 'Chart').getContext('2d');
+ new Chart(ctx, {
+ type: 'pie',
+ data: {
+ labels: ['BUT1', 'BUT2', 'BUT3'], // Exemple de matières
+ datasets: [{
+ label: 'Répartition des heures',
+ data: heures,
+ backgroundColor: [
+ 'rgba(255, 99, 132, 0.2)',
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(255, 99, 132, 1)',
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ plugins: {
+ legend: {
+ position: 'top',
+ },
+ title: {
+ display: true,
+ text: 'Heures de ' + professor
+ }
+ }
+ }
+ });
+ }
+
+ function openModal(professor) {
+ document.getElementById('professorName').textContent = "Ajouter des heures pour " + professor;
+ document.getElementById('myModal').style.display = 'block';
+ }
+
+ function closeModal() {
+ document.getElementById('myModal').style.display = 'none';
+ }
+
+ function addHours() {
+ const hours = document.getElementById('hours').value;
+ const formation = document.getElementById('subject').value;
+ const matiere = document.getElementById('matiere').value;
+
+ if (hours && formation && matiere) {
+ closeModal();
+ openConfirmModal();
+ } else {
+ alert("Veuillez remplir toutes les informations.");
+ }
+ }
+
+ function openConfirmModal() {
+ document.getElementById('confirmModal').style.display = 'block';
+ }
+
+ function closeConfirmModal() {
+ document.getElementById('confirmModal').style.display = 'none';
+ }
+
+ // Fonction de recherche des professeurs
+ function searchProfessor() {
+ const input = document.getElementById("searchBar").value.toLowerCase();
+ const table = document.getElementById("professorTable");
+ const rows = table.getElementsByTagName("tr");
+
+ for (let i = 1; i < rows.length; i++) {
+ const cells = rows[i].getElementsByTagName("td");
+ if (cells.length > 0) {
+ const professorName = cells[0].innerText.toLowerCase();
+ if (professorName.includes(input)) {
+ rows[i].style.display = "";
+ } else {
+ rows[i].style.display = "none";
+ }
+ }
+ }
+ }
+
+ // Toggle details and change button text
+ function toggleDetails(button, detailId) {
+ const detailsRow = document.getElementById(detailId);
+ if (detailsRow.style.display === "none" || detailsRow.style.display === "") {
+ detailsRow.style.display = "table-row";
+ button.textContent = "Fermer"; // Change the button text to "Fermer"
+
+ // Initialiser le graphique du professeur
+ if (button.parentElement.parentElement.cells[0].innerText === "Denis MONNERAT") {
+ initProfessorChart('denis', [10, 40, 70]); // Exemples d'heures
+ } else if (button.parentElement.parentElement.cells[0].innerText === "Maxime MENAULT") {
+ initProfessorChart('menault', [45, 45, 0]); // Exemples d'heures
+ }
+ } else {
+ detailsRow.style.display = "none";
+ button.textContent = "Voir"; // Change the button text back to "Voir"
+ }
+ }
+
+ // Initialiser le graphique principal au chargement de la page
+ window.onload = initMainChart;
+ </script>
+
+<script>
+ let currentRow; // Garde une trace de la ligne à modifier
+ let lastSortedColumnIndex = -1;
+ let lastSortDirection = 'asc';
+
+ // Fonction pour ouvrir la pop-up
+ function openPopup(button) {
+ currentRow = button.parentElement.parentElement;
+ document.getElementById("validated-hours").value = currentRow.cells[4].textContent;
+ document.getElementById("status").value = currentRow.cells[6].textContent; // Correction ici pour le statut
+ updateButtonColor(); // Mettre à jour la couleur du bouton
+ document.getElementById("popup-form").style.display = 'block';
+ document.getElementById("overlay").style.display = 'block';
+ }
+
+ // Fonction pour fermer la pop-up
+ function closePopup() {
+ document.getElementById("popup-form").style.display = 'none';
+ document.getElementById("overlay").style.display = 'none';
+ }
+
+ // Fonction pour changer la couleur du bouton en fonction du statut
+ function updateButtonColor() {
+ const status = document.getElementById("status").value;
+ const button = document.querySelector('.btn-validate');
+
+ button.classList.remove('validé', 'correction-demandée', 'refusé'); // Retirer toutes les classes
+
+ if (status === "Validé") {
+ button.classList.add('validé');
+ button.style.backgroundColor = 'green'; // Vert
+ } else if (status === "Correction demandée") {
+ button.classList.add('correction-demandée');
+ button.style.backgroundColor = 'orange'; // Orange
+ } else {
+ button.classList.add('refusé');
+ button.style.backgroundColor = 'red'; // Rouge
+ }
+ }
+
+ // Fonction pour valider et mettre à jour les heures et le statut
+ function validateHours() {
+ let validatedHours = document.getElementById("validated-hours").value;
+ let status = document.getElementById("status").value;
+
+ // Mettre à jour les valeurs dans le tableau
+ currentRow.cells[4].textContent = validatedHours;
+ currentRow.cells[6].textContent = status; // Correction ici pour le statut
+
+ // Appliquer les couleurs du statut
+ if (status === "Validé") {
+ currentRow.cells[6].className = "status-correct";
+ } else if (status === "Correction demandée") {
+ currentRow.cells[6].className = "status-incorrect";
+ } else {
+ currentRow.cells[6].className = "status-pending";
+ }
+
+ // Afficher un message de confirmation
+ alert("Heures validées et statut mis à jour!");
+
+ // Fermer la pop-up
+ closePopup();
+ }
+
+ // Fonction pour trier le tableau
+ function sortTable(columnIndex) {
+ const table = document.getElementById("teaching-hours-table");
+ const tbody = table.getElementsByTagName("tbody")[0];
+ const rows = Array.from(tbody.getElementsByTagName("tr"));
+
+ // Déterminer la direction du tri
+ let direction = 'asc';
+ if (lastSortedColumnIndex === columnIndex) {
+ direction = lastSortDirection === 'asc' ? 'desc' : 'asc';
+ }
+ lastSortedColumnIndex = columnIndex;
+ lastSortDirection = direction;
+
+ // Tri des lignes
+ rows.sort((a, b) => {
+ const aText = a.cells[columnIndex].textContent.trim();
+ const bText = b.cells[columnIndex].textContent.trim();
+
+ if (direction === 'asc') {
+ return aText > bText ? 1 : -1;
+ } else {
+ return aText < bText ? 1 : -1;
+ }
+ });
+
+ // Ajout des lignes triées au tableau
+ rows.forEach(row => tbody.appendChild(row));
+
+ // Mettre à jour les flèches
+ updateSortArrows(columnIndex, direction);
+ }
+
+ // Fonction pour mettre à jour les flèches de tri
+ function updateSortArrows(columnIndex, direction) {
+ const headers = document.querySelectorAll("th.sortable");
+ headers.forEach((header, index) => {
+ const arrows = header.querySelectorAll('.arrow');
+ arrows[0].style.display = (index === columnIndex && direction === 'asc') ? 'inline' : 'none'; // Flèche vers le haut
+ arrows[1].style.display = (index === columnIndex && direction === 'desc') ? 'inline' : 'none'; // Flèche vers le bas
+ });
+ }
+
+ let currentVacationRow = null;
+
+// Ouvrir la modal pour ajouter une nouvelle offre de vacation
+function openVacationModal() {
+ document.getElementById('vacationModal').style.display = 'block';
+ document.getElementById('modal-title').textContent = "Ajouter une Offre de Vacation";
+ document.getElementById('offerName').value = '';
+ document.getElementById('offerDate').value = '';
+ document.getElementById('offerType').value = '';
+ document.getElementById('update-btn').style.display = 'none';
+}
+
+// Fermer la modal
+function closeVacationModal() {
+ document.getElementById('vacationModal').style.display = 'none';
+}
+
+// Ajouter une nouvelle offre de vacation
+function addVacationOffer() {
+ const offerName = document.getElementById('offerName').value;
+ const offerDescription = document.getElementById('offerDescription').value;
+ const offerDate = document.getElementById('offerDate').value;
+ const offerHours = document.getElementById('offerHours').value;
+
+ const offerTypes = [];
+ if (document.getElementById('cm').checked) offerTypes.push('CM');
+ if (document.getElementById('td').checked) offerTypes.push('TD');
+ if (document.getElementById('tp').checked) offerTypes.push('TP');
+ if (document.getElementById('suivi').checked) offerTypes.push('Suivi');
+
+ // Here you would add the logic to store or process the vacation offer.
+ console.log('Offer Name:', offerName);
+ console.log('Description:', offerDescription);
+ console.log('Date:', offerDate);
+ console.log('Hours:', offerHours);
+ console.log('Types:', offerTypes.join(', '));
+
+ // Close the modal after adding
+ closeVacationModal();
+}
+
+// Éditer une offre de vacation
+function editVacationOffer(button) {
+ currentVacationRow = button.parentElement.parentElement;
+ document.getElementById('offerName').value = currentVacationRow.cells[0].textContent;
+ document.getElementById('offerDate').value = currentVacationRow.cells[1].textContent;
+ document.getElementById('offerType').value = currentVacationRow.cells[2].textContent;
+
+ document.getElementById('modal-title').textContent = "Modifier l'Offre de Vacation";
+ document.getElementById('update-btn').style.display = 'block';
+ document.getElementById('vacationModal').style.display = 'block';
+}
+
+// Mettre à jour une offre de vacation
+function updateVacationOffer() {
+ if (currentVacationRow) {
+ currentVacationRow.cells[0].textContent = document.getElementById('offerName').value;
+ currentVacationRow.cells[1].textContent = document.getElementById('offerDate').value;
+ currentVacationRow.cells[2].textContent = document.getElementById('offerType').value;
+ closeVacationModal();
+ }
+}
+
+// Supprimer une offre de vacation
+function deleteVacationOffer(button) {
+ const row = button.parentElement.parentElement;
+ row.parentElement.removeChild(row);
+}
+
+</script>
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/CHEF/mes-informations.html b/MaquetteWEB/html/CHEF/mes-informations.html
new file mode 100644
index 0000000..da8aaa2
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/mes-informations.html
@@ -0,0 +1,582 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mes Informations</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #5e3a19;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #5e3a19;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #5f490b;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #5e3a19;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ .header {
+ background-color: #5e3a19;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+ .categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+ }
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .categories a:hover {
+ text-decoration: underline;
+ }
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .logout-container {
+ display: flex;
+ align-items: center;
+ }
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #5e3a19;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #5e3a19;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #4a2e13;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #5e3a19;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #5e3a19; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #5e3a19; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #5e3a19;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #5f490b;
+ }
+
+ /* Sablier de chargement */
+ .loading-text {
+ font-size: 1.2em;
+ color: #555;
+ }
+ .loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+
+ .file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+ }
+
+ .file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+ }
+
+ .file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+ }
+
+ .document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+ }
+
+ /* Dropdown menu */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+ }
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ }
+
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #ddd;
+ }
+
+ .dropdown:hover .dropdown-content {
+ display: block;
+ }
+
+ .dropdown:hover .dropbtn {
+ background-color: #4a2e13;
+ }
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <!-- Menu déroulant pour "Gestion des heures" -->
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="container">
+ <!-- Section Informations Personnelles -->
+ <div class="info-card">
+ <h2>Informations Personnelles</h2>
+ <table class="info-table">
+ <tr>
+ <th>Nom Complet</th>
+ <td><input type="text" id="nom" value="Florent MADELAINE" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Date de Naissance</th>
+ <td><input type="text" id="date_naissance" value="15 Mars 1985" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Ville de Naissance</th>
+ <td><input type="text" id="ville_naissance" value="Paris" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Adresse</th>
+ <td><input type="text" id="adresse" value="12 Rue de la République, 75000 Paris"></td>
+ </tr>
+ <tr>
+ <th>E-mail (professionnel)</th>
+ <td><input type="email" id="email-pro" value="florent.madelaine@u-pec.fr"></td>
+ </tr>
+ <tr>
+ <th>Téléphone</th>
+ <td><input type="tel" id="telephone" value="07 69 55 14 55"></td>
+ </tr>
+ <tr>
+ <th>Numéro de Sécurité Sociale</th>
+ <td><input type="text" id="numero_securite" value="1 85 03 75 123 456 78" class="non-editable" readonly></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveInfo()">Sauvegarder les modifications</button>
+ </div>
+
+ <!-- Section Informations Bancaires -->
+ <div class="info-card">
+ <h2>Informations Bancaires</h2>
+ <table class="info-table">
+ <tr>
+ <th>Banque</th>
+ <td><input type="text" id="banque" value="BNP Paribas"></td>
+ </tr>
+ <tr>
+ <th>IBAN</th>
+ <td><input type="text" id="iban" value="FR76 3000 6000 0112 9876 7890 172"></td>
+ </tr>
+ <tr>
+ <th>BIC</th>
+ <td><input type="text" id="bic" value="BNPAFRPPXXX"></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveBankInfo()">Sauvegarder les informations bancaires</button>
+ </div>
+
+ <!-- Section Documents -->
+ <div class="info-card">
+ <h2>Documents Officiels</h2>
+ <table class="info-table">
+ <tr>
+ <th>Pièce d'identité</th>
+ <td><a href="../../media/documents/VACATAIRE/CarteIdentite.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Contrat de Travail</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Justificatif de Domicile</th>
+ <td><a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">Télécharger</a></td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <h2>Envoyer un Document</h2>
+ <form id="uploadForm" onsubmit="return false;">
+ <label for="documentType">Type de document :</label>
+ <select id="documentType" class="document-select">
+ <option value="" disabled selected>Sélectionnez un type de document</option>
+ <option value="carte_identite">Carte d'Identité</option>
+ <option value="contrat_travail">Contrat de Travail</option>
+ <option value="justificatif_domicile">Justificatif de Domicile</option>
+ <option value="releve_bancaire">Relevé Bancaire</option>
+ <option value="certificat_medical">Certificat Médical</option>
+ <option value="avis_imposition">Avis d'Imposition</option>
+ <option value="permis_conduire">Permis de Conduire</option>
+ <option value="passeport">Passeport</option>
+ <option value="facture">Facture</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="newDocument" class="file-upload-label">
+ Choisir un fichier
+ </label>
+ <input type="file" id="newDocument" accept=".pdf,.doc,.docx" style="display: none;" onchange="updateFileName()">
+ <span id="fileName" class="file-name">Aucun fichier choisi</span>
+ <button class="action-btn" onclick="uploadDocument()">Envoyer le document</button>
+ </form>
+ </div>
+
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Footer -->
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+<script>
+ // Sauvegarder les informations personnelles dans le localStorage
+ function saveInfo() {
+ const ville_naissance = document.getElementById('ville_naissance').value;
+ const adresse = document.getElementById('adresse').value;
+ const email_pro = document.getElementById('email-pro').value;
+ const telephone = document.getElementById('telephone').value;
+ const numero_securite = document.getElementById('numero_securite').value;
+ const statut = document.getElementById('statut').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('ville_naissance', ville_naissance);
+ localStorage.setItem('adresse', adresse);
+ localStorage.setItem('email-pro', email_pro);
+ localStorage.setItem('telephone', telephone);
+ localStorage.setItem('numero_securite', numero_securite);
+ localStorage.setItem('statut', statut);
+
+ alert('Informations personnelles sauvegardées !');
+ }
+
+ // Sauvegarder les informations bancaires dans le localStorage
+ function saveBankInfo() {
+ const banque = document.getElementById('banque').value;
+ const iban = document.getElementById('iban').value;
+ const bic = document.getElementById('bic').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('banque', banque);
+ localStorage.setItem('iban', iban);
+ localStorage.setItem('bic', bic);
+
+ alert('Informations bancaires sauvegardées !');
+ }
+
+ // Récupérer les informations depuis le localStorage (si elles existent)
+ function loadInfo() {
+ if(localStorage.getItem('ville_naissance')) {
+ document.getElementById('ville_naissance').value = localStorage.getItem('ville_naissance');
+ }
+ if(localStorage.getItem('adresse')) {
+ document.getElementById('adresse').value = localStorage.getItem('adresse');
+ }
+
+ if(localStorage.getItem('email-pro')) {
+ document.getElementById('email-pro').value = localStorage.getItem('email-pro');
+ }
+ if(localStorage.getItem('telephone')) {
+ document.getElementById('telephone').value = localStorage.getItem('telephone');
+ }
+ if(localStorage.getItem('numero_securite')) {
+ document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
+ }
+ if(localStorage.getItem('statut')) {
+ document.getElementById('statut').value = localStorage.getItem('statut');
+ }
+
+ // Informations bancaires
+ if(localStorage.getItem('banque')) {
+ document.getElementById('banque').value = localStorage.getItem('banque');
+ }
+ if(localStorage.getItem('iban')) {
+ document.getElementById('iban').value = localStorage.getItem('iban');
+ }
+ if(localStorage.getItem('bic')) {
+ document.getElementById('bic').value = localStorage.getItem('bic');
+ }
+ }
+
+ // Charger les informations quand la page est chargée
+ window.onload = loadInfo;
+
+ function uploadDocument() {
+ const documentType = document.getElementById('documentType').value;
+ const fileInput = document.getElementById('newDocument').files[0];
+
+ if (!documentType) {
+ alert("Veuillez sélectionner un type de document.");
+ return;
+ }
+
+ if (!fileInput) {
+ alert("Veuillez choisir un fichier à envoyer.");
+ return;
+ }
+
+ // Simulation d'un envoi réussi (ajoutez votre logique d'envoi ici)
+ document.getElementById('fileName').textContent = "Aucun fichier choisi"; // Réinitialiser le nom de fichier
+
+ // Afficher le document en attente de traitement
+ const documentsTable = document.querySelector('.info-table'); // La table où afficher les documents
+ const newRow = documentsTable.insertRow(-1); // Insérer une nouvelle ligne à la fin
+
+ // Ajouter des cellules pour le type de document et le statut
+ newRow.innerHTML = `<th>${documentType.replace(/_/g, ' ').toUpperCase()}</th><td>En attente de traitement</td>`;
+
+ // Ouvrir le pop-up de confirmation
+ document.getElementById('popup').style.display = 'block'; // Ouvrir le pop-up
+ }
+
+
+ function updateFileName() {
+ const fileInput = document.getElementById('newDocument');
+ const fileNameDisplay = document.getElementById('fileName');
+ if (fileInput.files.length > 0) {
+ fileNameDisplay.textContent = fileInput.files[0].name;
+ } else {
+ fileNameDisplay.textContent = 'Aucun fichier choisi';
+ }
+}
+
+
+ // Fermer la pop-up
+ function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/CHEF/paiements.html b/MaquetteWEB/html/CHEF/paiements.html
new file mode 100644
index 0000000..03de28a
--- /dev/null
+++ b/MaquetteWEB/html/CHEF/paiements.html
@@ -0,0 +1,296 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Pilotage Budgétaire</title>
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="stylesheet" href="../../css/CHEF/gestion-heures-professeur.css">
+ <style>
+ .container {
+ display: flex;
+ justify-content: space-between;
+ flex-wrap: wrap;
+ }
+
+
+
+ .section {
+ flex: 1;
+ min-width: 300px;
+ margin: 20px;
+ padding: 20px;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+ }
+
+ .section h2 {
+ text-align: center;
+ color: #333;
+ }
+
+ canvas {
+ max-width: 100%;
+ height: 300px;
+ }
+
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ }
+
+ table th, table td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: left;
+ }
+
+ table th {
+ background-color: #f2f2f2;
+ }
+
+ .filters {
+ margin-bottom: 20px;
+ }
+
+ .filters select {
+ padding: 8px;
+ font-size: 16px;
+ margin-right: 10px;
+ }
+
+ .filters input {
+ padding: 8px;
+ font-size: 16px;
+ }
+
+ .button-container {
+ margin: 20px 0;
+ text-align: center;
+ }
+
+ .button-container button {
+ padding: 10px 20px;
+ font-size: 16px;
+ margin: 0 10px;
+ cursor: pointer;
+ }
+ </style>
+</head>
+<body>
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./chef_departement.html">Accueil</a>
+
+ <div class="dropdown">
+ <a href="javascript:void(0)" class="dropbtn">Gestion des heures</a>
+ <div class="dropdown-content">
+ <a href="./gestion-heures-professeur.html">Professeur</a>
+ <a href="./gestion-heures-formation.html">Formation</a>
+ <a href="./gestion-edt.html">EDT</a>
+ </div>
+ </div>
+
+ <a href="./paiements.html">Pilotage budgétaire</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">
+ Florent MADELAINE
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="container">
+ <!-- Résumé des finances globales -->
+ <div class="section">
+ <h2>Résumé des Finances</h2>
+ <canvas id="budgetOverview"></canvas>
+ </div>
+
+ <!-- Répartition des heures -->
+ <div class="section">
+ <h2>Répartition des Heures</h2>
+ <canvas id="hoursDistribution"></canvas>
+ </div>
+
+ <!-- Bilan des formations -->
+ <div class="section">
+ <h2>Bilan des dépenses mensuels</h2>
+ <canvas id="formationBalance"></canvas>
+ </div>
+
+ <!-- Bilan comptable détaillé -->
+ <div class="section">
+ <h2>Bilan Comptable</h2>
+ <table>
+ <thead>
+ <tr>
+ <th>Formation</th>
+ <th>Budget Alloué</th>
+ <th>Budget Utilisé</th>
+ <th>Bénéfices</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>BUT Informatique</td>
+ <td>500 000 €</td>
+ <td>420 000 €</td>
+ <td>80 000 €</td>
+ </tr>
+ <tr>
+ <td>BUT Génie Mécanique</td>
+ <td>600 000 €</td>
+ <td>580 000 €</td>
+ <td>20 000 €</td>
+ </tr>
+ <tr>
+ <td>Licence Mathématiques</td>
+ <td>300 000 €</td>
+ <td>250 000 €</td>
+ <td>50 000 €</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <!-- Button Container -->
+ <div class="button-container">
+ <button id="downloadCharts">Télécharger les Graphiques</button>
+ <button id="downloadCSV">Télécharger en CSV</button>
+ <button id="importCSV">Importer des données CSV</button>
+ </div>
+
+ <!-- Script Chart.js pour les graphiques -->
+ <script>
+ // Résumé des finances globales
+ const ctx1 = document.getElementById('budgetOverview').getContext('2d');
+ const budgetOverview = new Chart(ctx1, {
+ type: 'bar',
+ data: {
+ labels: ['Informatique', 'Génie Mécanique', 'Mathématiques', 'Chimie'],
+ datasets: [{
+ label: 'Budget Alloué (€)',
+ data: [500000, 600000, 300000, 450000],
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+ borderWidth: 1
+ }, {
+ label: 'Budget Utilisé (€)',
+ data: [420000, 580000, 250000, 430000],
+ backgroundColor: 'rgba(255, 99, 132, 0.2)',
+ borderColor: 'rgba(255, 99, 132, 1)',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+
+ // Répartition des heures
+ const ctx2 = document.getElementById('hoursDistribution').getContext('2d');
+ const hoursDistribution = new Chart(ctx2, {
+ type: 'pie',
+ data: {
+ labels: ['Permanents', 'Heures Complémentaires', 'Vacataires'],
+ datasets: [{
+ label: 'Heures de travail',
+ data: [60, 25, 15],
+ backgroundColor: [
+ 'rgba(54, 162, 235, 0.2)',
+ 'rgba(255, 206, 86, 0.2)',
+ 'rgba(75, 192, 192, 0.2)'
+ ],
+ borderColor: [
+ 'rgba(54, 162, 235, 1)',
+ 'rgba(255, 206, 86, 1)',
+ 'rgba(75, 192, 192, 1)'
+ ],
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true
+ }
+ });
+
+ // Bilan des formations
+ const ctx3 = document.getElementById('formationBalance').getContext('2d');
+ const formationBalance = new Chart(ctx3, {
+ type: 'line',
+ data: {
+ labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Juin'],
+ datasets: [{
+ label: 'BUT Informatique',
+ data: [70000, 90000, 80000, 85000, 90000, 95000],
+ borderColor: 'rgba(75, 192, 192, 1)',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ fill: true
+ }, {
+ label: 'BUT Génie Mécanique',
+ data: [80000, 82000, 81000, 78000, 84000, 86000],
+ borderColor: 'rgba(153, 102, 255, 1)',
+ backgroundColor: 'rgba(153, 102, 255, 0.2)',
+ fill: true
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+
+ // Function to download charts as images
+ document.getElementById('downloadCharts').addEventListener('click', function () {
+ const chartIds = ['budgetOverview', 'hoursDistribution', 'formationBalance'];
+ chartIds.forEach(id => {
+ const chart = document.getElementById(id);
+ const link = document.createElement('a');
+ link.href = chart.toDataURL('image/png');
+ link.download = `${id}.png`;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ });
+ });
+
+ // Function to download table data as CSV
+ document.getElementById('downloadCSV').addEventListener('click', function () {
+ const table = document.querySelector('table');
+ const rows = Array.from(table.rows);
+ const csvContent = rows.map(row => Array.from(row.cells).map(cell => cell.textContent).join(",")).join("\n");
+
+ const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = 'bilan_comptable.csv';
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+ });
+ </script>
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/finance.html b/MaquetteWEB/html/FINANCE/finance.html
new file mode 100644
index 0000000..692d58e
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/finance.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dashboard Financier</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/FINANCE/finance.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./finance.html">Accueil</a>
+ <a href="./paiements_en_attente.html">Paiements en attente</a>
+ <a href="./rapports_financiers.html">Rapports Financiers</a>
+ <a href="./historique_paiements.html">Historique des transactions</a>
+ <a href="./mes_informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Jean DUPONT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
+ </div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>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="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</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>
+
+ <!-- Script pour gérer l'affichage des notifications -->
+ <script>
+ const notificationsContainer = document.getElementById('notifications-container');
+ const notificationsSection = document.getElementById('notifications-section');
+
+ // Vérifiez si le conteneur des notifications est vide
+ if (notificationsContainer.childElementCount === 0) {
+ notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
+ }
+ </script>
+
+ <!-- Paiements en attente -->
+ <div class="section-header">
+ <h2>Paiements en Attente</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>ID Transaction</th>
+ <th>Période</th>
+ <th>Montant en Attente (€)</th>
+ <th>Date prévue de paiement</th>
+ <th>Statut</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>002</td>
+ <td>Octobre 2024</td>
+ <td>1200,00</td>
+ <td>15/10/2024</td>
+ <td>En attente</td>
+ </tr>
+ <tr>
+ <td>003</td>
+ <td>Novembre 2024</td>
+ <td>1800,00</td>
+ <td>15/11/2024</td>
+ <td>En attente</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <div class="button-container" style="text-align: center; margin-top: 20px;">
+ <a href="./paiements_en_attente.html">
+ <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
+ Voir plus
+ </button>
+ </a>
+ </div>
+ </div>
+
+
+ <!-- Rapports Financiers -->
+ <div class="section-header">
+ <h2>Rapports Financiers</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Rapport</th>
+ <th>Date de création</th>
+ <th>Statut</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Rapport d'Octobre 2024</td>
+ <td>01/10/2024</td>
+ <td>Validé</td>
+ <td><a href="rapports_financiers.html#octobre2024" class="btn">Voir Rapport</a></td>
+ </tr>
+ <tr>
+ <td>Rapport de Novembre 2024</td>
+ <td>01/11/2024</td>
+ <td>En cours</td>
+ <td><a href="#" class="btn">Préparer Rapport</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="button-container" style="text-align: center; margin-top: 20px;">
+ <a href="./rapports_financiers.html">
+ <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
+ Voir plus
+ </button>
+ </a>
+ </div>
+ </div>
+
+ <!-- Historique des paiements du personnel -->
+ <div class="section-header">
+ <h2>Historique des Paiements du Personnel</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Personnel</th>
+ <th>Montant (€)</th>
+ <th>Date de Paiement</th>
+ <th>Bulletin de paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>Denis MONNERAT (permanent)</td>
+ <td>1800,00</td>
+ <td>01/10/2024</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Août 2024</td>
+ <td>Maxime MENAULT (vacataire)</td>
+ <td>870,00</td>
+ <td>01/09/2024</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="button-container" style="text-align: center; margin-top: 20px;">
+ <a href="./historique_paiements.html">
+ <button class="button see-more" style="padding: 10px 20px; background-color: #20195e; color: white; border: none; border-radius: 4px; cursor: pointer;">
+ Voir plus
+ </button>
+ </a>
+ </div>
+ </div>
+
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/historique_paiements.html b/MaquetteWEB/html/FINANCE/historique_paiements.html
new file mode 100644
index 0000000..ffb7802
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/historique_paiements.html
@@ -0,0 +1,202 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Historique des Transactions</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/FINANCE/style.css">
+ <style>
+ .dashboard-container {
+ margin-top: 20px;
+ }
+ .card {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ margin-bottom: 20px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ th, td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: left;
+ }
+ th {
+ background-color: #f2f2f2;
+ }
+ .button {
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ margin-right: 5px;
+ }
+ .block { background-color: #f44336; }
+ .cancel { background-color: #ff9800; }
+ .unblock { background-color: #4caf50; }
+ .send { background-color: #2196F3; }
+ .status-en-attente { background-color: #ffeb3b; color: black; }
+ .status-bloque { background-color: #f44336; color: white; }
+ .status-annule { background-color: #ff9800; color: white; }
+ .status-debloque { background-color: #4caf50; color: white; }
+ .status-envoye { background-color: #2196F3; color: white; }
+ .filter-section {
+ margin-bottom: 20px;
+ }
+ .filter-input {
+ padding: 10px;
+ width: 300px;
+ margin-right: 10px;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+ }
+ .filter-button {
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ margin-right: 5px;
+ }
+ .filter-all { background-color: #888; }
+ .filter-waiting { background-color: #ffeb3b; color: black; }
+ .filter-blocked { background-color: #f44336; }
+ .filter-canceled { background-color: #ff9800; }
+ .filter-paid { background-color: #2196F3; }
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+ <div class="categories">
+ <a href="./finance.html">Accueil</a>
+ <a href="./paiements_en_attente.html">Paiements en attente</a>
+ <a href="./rapports_financiers.html">Rapports Financiers</a>
+ <a href="./historique_paiements.html">Historique des transactions</a>
+ <a href="./mes_informations.html">Mes informations et documents</a>
+ </div>
+ <div class="user-section">
+ <div class="user-name">Jean DUPONT</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+ <div class="card">
+ <h2>Historique des Transactions</h2>
+
+ <!-- Section de filtre -->
+ <div class="filter-section">
+ <input type="text" id="nameFilter" class="filter-input" placeholder="Rechercher par nom..." oninput="filterTable()">
+ <button class="filter-button filter-all" onclick="filterByStatus('')">Tous</button>
+ <button class="filter-button filter-waiting" onclick="filterByStatus('En attente')">En attente</button>
+ <button class="filter-button filter-blocked" onclick="filterByStatus('Bloqué')">Bloqué</button>
+ <button class="filter-button filter-canceled" onclick="filterByStatus('Annulé')">Annulé</button>
+ <button class="filter-button filter-paid" onclick="filterByStatus('Salaire payer')">Payé</button>
+ </div>
+
+ <!-- Tableau des transactions -->
+ <table>
+ <thead>
+ <tr>
+ <th>ID Paiement</th>
+ <th>Nom du Bénéficiaire</th>
+ <th>Montant (€)</th>
+ <th>Status</th>
+ </tr>
+ </thead>
+ <tbody id="paymentTableBody">
+ <tr>
+ <td>002</td>
+ <td>Maxime Menault</td>
+ <td>1200,00</td>
+ <td class="status-bloque">Bloqué</td>
+ </tr>
+ <tr>
+ <td>003</td>
+ <td>Denis Monnerat</td>
+ <td>1800,00</td>
+ <td class="status-envoye">Salaire payer</td>
+ </tr>
+ <tr>
+ <td>004</td>
+ <td>Sophie Bernard</td>
+ <td>1350,00</td>
+ <td class="status-annule">Annulé</td>
+ </tr>
+ <tr>
+ <td>005</td>
+ <td>Lucas Leroy</td>
+ <td>2000,00</td>
+ <td class="status-bloque">Bloqué</td>
+ </tr>
+ <tr>
+ <td>006</td>
+ <td>Julie Robert</td>
+ <td>1600,00</td>
+ <td class="status-envoye">Salaire payer</td>
+ </tr>
+ <tr>
+ <td>007</td>
+ <td>Emilie Caron</td>
+ <td>1750,00</td>
+ <td class="status-envoye">Salaire payer</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <script>
+ // Filtre par nom
+ function filterTable() {
+ const filter = document.getElementById("nameFilter").value.toLowerCase();
+ const rows = document.querySelectorAll("#paymentTableBody tr");
+ rows.forEach(row => {
+ const nameCell = row.cells[1].textContent.toLowerCase();
+ if (nameCell.includes(filter)) {
+ row.style.display = "";
+ } else {
+ row.style.display = "none";
+ }
+ });
+ }
+
+ // Filtre par statut
+ function filterByStatus(status) {
+ const rows = document.querySelectorAll("#paymentTableBody tr");
+ rows.forEach(row => {
+ const statusCell = row.cells[3].textContent;
+ if (status === "" || statusCell === status) {
+ row.style.display = "";
+ } else {
+ row.style.display = "none";
+ }
+ });
+ }
+ </script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/mes_informations.html b/MaquetteWEB/html/FINANCE/mes_informations.html
new file mode 100644
index 0000000..8b5309e
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/mes_informations.html
@@ -0,0 +1,576 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mes Informations</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #20195e;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #20195e;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #18124b;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #20195e;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ .header {
+ background-color: #20195e;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+ .categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+ }
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .categories a:hover {
+ text-decoration: underline;
+ }
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .logout-container {
+ display: flex;
+ align-items: center;
+ }
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #20195e;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #20195e;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #140f42;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #20195e;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #20195e; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #20195e; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #20195e;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #161045;
+ }
+
+ /* Sablier de chargement */
+ .loading-text {
+ font-size: 1.2em;
+ color: #555;
+ }
+ .loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+
+ .file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+ }
+
+ .file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+ }
+
+ .file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+ }
+
+ .document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+ }
+
+ /* Dropdown menu */
+ .dropdown {
+ position: relative;
+ display: inline-block;
+ }
+
+ .dropdown-content {
+ display: none;
+ position: absolute;
+ background-color: white;
+ min-width: 200px;
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+ z-index: 1;
+ }
+
+ .dropdown-content a {
+ color: black;
+ padding: 12px 16px;
+ text-decoration: none;
+ display: block;
+ }
+
+ .dropdown-content a:hover {
+ background-color: #ddd;
+ }
+
+ .dropdown:hover .dropdown-content {
+ display: block;
+ }
+
+ .dropdown:hover .dropbtn {
+ background-color: #1a154e;
+ }
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./finance.html">Accueil</a>
+ <a href="./paiements_en_attente.html">Paiements en attente</a>
+ <a href="./rapports_financiers.html">Rapports Financiers</a>
+ <a href="./historique_paiements.html">Historique des transactions</a>
+ <a href="./mes_informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Jean DUPONT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="container">
+ <!-- Section Informations Personnelles -->
+ <div class="info-card">
+ <h2>Informations Personnelles</h2>
+ <table class="info-table">
+ <tr>
+ <th>Nom Complet</th>
+ <td><input type="text" id="nom" value="Jean DUPONT" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Date de Naissance</th>
+ <td><input type="text" id="date_naissance" value="15 Mars 1985" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Ville de Naissance</th>
+ <td><input type="text" id="ville_naissance" value="Paris" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Adresse</th>
+ <td><input type="text" id="adresse" value="12 Rue de la République, 75000 Paris"></td>
+ </tr>
+ <tr>
+ <th>E-mail (professionnel)</th>
+ <td><input type="email" id="email-pro" value="jean.dupont@u-pec.fr"></td>
+ </tr>
+ <tr>
+ <th>Téléphone</th>
+ <td><input type="tel" id="telephone" value="07 69 55 14 55"></td>
+ </tr>
+ <tr>
+ <th>Numéro de Sécurité Sociale</th>
+ <td><input type="text" id="numero_securite" value="1 85 03 75 123 456 78" class="non-editable" readonly></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveInfo()">Sauvegarder les modifications</button>
+ </div>
+
+ <!-- Section Informations Bancaires -->
+ <div class="info-card">
+ <h2>Informations Bancaires</h2>
+ <table class="info-table">
+ <tr>
+ <th>Banque</th>
+ <td><input type="text" id="banque" value="BNP Paribas"></td>
+ </tr>
+ <tr>
+ <th>IBAN</th>
+ <td><input type="text" id="iban" value="FR76 3000 6000 0112 9876 7890 172"></td>
+ </tr>
+ <tr>
+ <th>BIC</th>
+ <td><input type="text" id="bic" value="BNPAFRPPXXX"></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveBankInfo()">Sauvegarder les informations bancaires</button>
+ </div>
+
+ <!-- Section Documents -->
+ <div class="info-card">
+ <h2>Documents Officiels</h2>
+ <table class="info-table">
+ <tr>
+ <th>Pièce d'identité</th>
+ <td><a href="../../media/documents/VACATAIRE/CarteIdentite.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Contrat de Travail</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Justificatif de Domicile</th>
+ <td><a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">Télécharger</a></td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <h2>Envoyer un Document</h2>
+ <form id="uploadForm" onsubmit="return false;">
+ <label for="documentType">Type de document :</label>
+ <select id="documentType" class="document-select">
+ <option value="" disabled selected>Sélectionnez un type de document</option>
+ <option value="carte_identite">Carte d'Identité</option>
+ <option value="contrat_travail">Contrat de Travail</option>
+ <option value="justificatif_domicile">Justificatif de Domicile</option>
+ <option value="releve_bancaire">Relevé Bancaire</option>
+ <option value="certificat_medical">Certificat Médical</option>
+ <option value="avis_imposition">Avis d'Imposition</option>
+ <option value="permis_conduire">Permis de Conduire</option>
+ <option value="passeport">Passeport</option>
+ <option value="facture">Facture</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="newDocument" class="file-upload-label">
+ Choisir un fichier
+ </label>
+ <input type="file" id="newDocument" accept=".pdf,.doc,.docx" style="display: none;" onchange="updateFileName()">
+ <span id="fileName" class="file-name">Aucun fichier choisi</span>
+ <button class="action-btn" onclick="uploadDocument()">Envoyer le document</button>
+ </form>
+ </div>
+
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Footer -->
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+<script>
+ // Sauvegarder les informations personnelles dans le localStorage
+ function saveInfo() {
+ const ville_naissance = document.getElementById('ville_naissance').value;
+ const adresse = document.getElementById('adresse').value;
+ const email_pro = document.getElementById('email-pro').value;
+ const telephone = document.getElementById('telephone').value;
+ const numero_securite = document.getElementById('numero_securite').value;
+ const statut = document.getElementById('statut').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('ville_naissance', ville_naissance);
+ localStorage.setItem('adresse', adresse);
+ localStorage.setItem('email-pro', email_pro);
+ localStorage.setItem('telephone', telephone);
+ localStorage.setItem('numero_securite', numero_securite);
+ localStorage.setItem('statut', statut);
+
+ alert('Informations personnelles sauvegardées !');
+ }
+
+ // Sauvegarder les informations bancaires dans le localStorage
+ function saveBankInfo() {
+ const banque = document.getElementById('banque').value;
+ const iban = document.getElementById('iban').value;
+ const bic = document.getElementById('bic').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('banque', banque);
+ localStorage.setItem('iban', iban);
+ localStorage.setItem('bic', bic);
+
+ alert('Informations bancaires sauvegardées !');
+ }
+
+ // Récupérer les informations depuis le localStorage (si elles existent)
+ function loadInfo() {
+ if(localStorage.getItem('ville_naissance')) {
+ document.getElementById('ville_naissance').value = localStorage.getItem('ville_naissance');
+ }
+ if(localStorage.getItem('adresse')) {
+ document.getElementById('adresse').value = localStorage.getItem('adresse');
+ }
+
+ if(localStorage.getItem('email-pro')) {
+ document.getElementById('email-pro').value = localStorage.getItem('email-pro');
+ }
+ if(localStorage.getItem('telephone')) {
+ document.getElementById('telephone').value = localStorage.getItem('telephone');
+ }
+ if(localStorage.getItem('numero_securite')) {
+ document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
+ }
+ if(localStorage.getItem('statut')) {
+ document.getElementById('statut').value = localStorage.getItem('statut');
+ }
+
+ // Informations bancaires
+ if(localStorage.getItem('banque')) {
+ document.getElementById('banque').value = localStorage.getItem('banque');
+ }
+ if(localStorage.getItem('iban')) {
+ document.getElementById('iban').value = localStorage.getItem('iban');
+ }
+ if(localStorage.getItem('bic')) {
+ document.getElementById('bic').value = localStorage.getItem('bic');
+ }
+ }
+
+ // Charger les informations quand la page est chargée
+ window.onload = loadInfo;
+
+ function uploadDocument() {
+ const documentType = document.getElementById('documentType').value;
+ const fileInput = document.getElementById('newDocument').files[0];
+
+ if (!documentType) {
+ alert("Veuillez sélectionner un type de document.");
+ return;
+ }
+
+ if (!fileInput) {
+ alert("Veuillez choisir un fichier à envoyer.");
+ return;
+ }
+
+ // Simulation d'un envoi réussi (ajoutez votre logique d'envoi ici)
+ document.getElementById('fileName').textContent = "Aucun fichier choisi"; // Réinitialiser le nom de fichier
+
+ // Afficher le document en attente de traitement
+ const documentsTable = document.querySelector('.info-table'); // La table où afficher les documents
+ const newRow = documentsTable.insertRow(-1); // Insérer une nouvelle ligne à la fin
+
+ // Ajouter des cellules pour le type de document et le statut
+ newRow.innerHTML = `<th>${documentType.replace(/_/g, ' ').toUpperCase()}</th><td>En attente de traitement</td>`;
+
+ // Ouvrir le pop-up de confirmation
+ document.getElementById('popup').style.display = 'block'; // Ouvrir le pop-up
+ }
+
+
+ function updateFileName() {
+ const fileInput = document.getElementById('newDocument');
+ const fileNameDisplay = document.getElementById('fileName');
+ if (fileInput.files.length > 0) {
+ fileNameDisplay.textContent = fileInput.files[0].name;
+ } else {
+ fileNameDisplay.textContent = 'Aucun fichier choisi';
+ }
+}
+
+
+ // Fermer la pop-up
+ function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/paiements_en_attente.html b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
new file mode 100644
index 0000000..81fdc12
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/paiements_en_attente.html
@@ -0,0 +1,303 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Paiements en Attente</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/FINANCE/style.css">
+ <style>
+
+ .dashboard-container {
+ margin-top: 20px;
+ }
+ .card {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+ margin-bottom: 20px;
+ }
+ table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ th, td {
+ border: 1px solid #ddd;
+ padding: 10px;
+ text-align: left;
+ }
+ th {
+ background-color: #f2f2f2;
+ }
+ .button {
+ padding: 10px 15px;
+ border: none;
+ border-radius: 4px;
+ color: white;
+ font-weight: bold;
+ cursor: pointer;
+ margin-right: 5px;
+ }
+ .block { background-color: #f44336; } /* Red */
+ .cancel { background-color: #ff9800; } /* Orange */
+ .unblock { background-color: #4caf50; } /* Green */
+ .send { background-color: #2196F3; } /* Blue */
+ .popup {
+ display: none;
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0,0,0,0.7);
+ justify-content: center;
+ align-items: center;
+ }
+ .popup-content {
+ background-color: white;
+ padding: 20px;
+ border-radius: 8px;
+ width: 300px;
+ text-align: center;
+ }
+ .close {
+ background-color: #f44336;
+ border: none;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ }
+ .confirm {
+ background-color: #4caf50;
+ border: none;
+ color: white;
+ padding: 5px 10px;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-left: 10px;
+ }
+
+ /* Classes pour les différents statuts */
+ .status-en-attente {
+ background-color: #ffeb3b; /* Jaune pour "En attente" */
+ color: black;
+ }
+ .status-bloque {
+ background-color: #f44336; /* Rouge pour "Bloqué" */
+ color: white;
+ }
+ .status-annule {
+ background-color: #ff9800; /* Orange pour "Annulé" */
+ color: white;
+ }
+ .status-debloque {
+ background-color: #4caf50; /* Vert pour "Débloqué" */
+ color: white;
+ }
+ .status-envoye {
+ background-color: #2196F3; /* Bleu pour "Envoyé" */
+ color: white;
+ }
+
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./finance.html">Accueil</a>
+ <a href="./paiements_en_attente.html">Paiements en attente</a>
+ <a href="./rapports_financiers.html">Rapports Financiers</a>
+ <a href="./historique_paiements.html">Historique des transactions</a>
+ <a href="./mes_informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Jean DUPONT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+ <div class="card">
+ <h2>Liste des paiements en attente de traitement</h2>
+ <table>
+ <thead>
+ <tr>
+ <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="button block" onclick="openPopup('bloquer', 2)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 2)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 2)">Débloquer</button>
+ <button class="button send" 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="button block" onclick="openPopup('bloquer', 3)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 3)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 3)">Débloquer</button>
+ <button class="button send" 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="button block" onclick="openPopup('bloquer', 4)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 4)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 4)">Débloquer</button>
+ <button class="button send" onclick="openPopup('envoyer', 4)">Payer</button>
+ </td>
+ </tr>
+ <tr>
+ <td>005</td>
+ <td>Lucas Leroy (permanent)</td>
+ <td>2000,00</td>
+ <td id="status-5">En attente</td>
+ <td>
+ <button class="button block" onclick="openPopup('bloquer', 5)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 5)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 5)">Débloquer</button>
+ <button class="button send" onclick="openPopup('envoyer', 5)">Payer</button>
+ </td>
+ </tr>
+ <tr>
+ <td>006</td>
+ <td>Julie Robert (permanent)</td>
+ <td>1600,00</td>
+ <td id="status-6">En attente</td>
+ <td>
+ <button class="button block" onclick="openPopup('bloquer', 6)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 6)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 6)">Débloquer</button>
+ <button class="button send" onclick="openPopup('envoyer', 6)">Payer</button>
+ </td>
+ </tr>
+ <tr>
+ <td>007</td>
+ <td>Emilie Caron (permanent)</td>
+ <td>1750,00</td>
+ <td id="status-7">En attente</td>
+ <td>
+ <button class="button block" onclick="openPopup('bloquer', 7)">Bloquer</button>
+ <button class="button cancel" onclick="openPopup('annuler', 7)">Annuler</button>
+ <button class="button unblock" onclick="openPopup('débloquer', 7)">Débloquer</button>
+ <button class="button send" onclick="openPopup('envoyer', 7)">Payer</button>
+ </td>
+ </tr>
+
+ <!-- Ajouter plus de lignes ici -->
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <!-- Pop-up pour les actions -->
+ <div id="popup" class="popup">
+ <div class="popup-content">
+ <h3 id="popupTitle">Action</h3>
+ <p id="popupMessage"></p>
+ <button class="close" onclick="closePopup()">Fermer</button>
+ <button class="confirm" onclick="confirmAction()">Confirmer</button>
+ </div>
+ </div>
+
+ <script>
+ let currentAction = '';
+ let currentPaymentId = '';
+
+ function openPopup(action, paymentId) {
+ const popup = document.getElementById('popup');
+ const title = document.getElementById('popupTitle');
+ const message = document.getElementById('popupMessage');
+
+ currentAction = action;
+ currentPaymentId = paymentId;
+
+ title.textContent = action.charAt(0).toUpperCase() + action.slice(1) + ' Paiement';
+ message.textContent = `Êtes-vous sûr de vouloir ${action} le paiement ID ${paymentId} ?`;
+
+ popup.style.display = 'flex';
+ }
+
+ function closePopup() {
+ const popup = document.getElementById('popup');
+ popup.style.display = 'none';
+ }
+
+ function confirmAction() {
+ const statusElement = document.getElementById(`status-${currentPaymentId}`);
+
+ // Réinitialise toutes les classes de statut avant d'ajouter la nouvelle
+ statusElement.classList.remove('status-en-attente', 'status-bloque', 'status-annule', 'status-debloque', 'status-envoye');
+
+ switch(currentAction) {
+ case 'bloquer':
+ statusElement.textContent = 'Bloqué';
+ statusElement.classList.add('status-bloque');
+ break;
+ case 'annuler':
+ statusElement.textContent = 'Annulé';
+ statusElement.classList.add('status-annule');
+ break;
+ case 'débloquer':
+ statusElement.textContent = 'Débloqué';
+ statusElement.classList.add('status-debloque');
+ break;
+ case 'envoyer':
+ statusElement.textContent = 'Salaire payer';
+ statusElement.classList.add('status-envoye');
+ break;
+ default:
+ statusElement.textContent = 'En attente';
+ statusElement.classList.add('status-en-attente');
+ }
+
+ closePopup();
+}
+
+ </script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/FINANCE/rapports_financiers.html b/MaquetteWEB/html/FINANCE/rapports_financiers.html
new file mode 100644
index 0000000..de39346
--- /dev/null
+++ b/MaquetteWEB/html/FINANCE/rapports_financiers.html
@@ -0,0 +1,158 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Index des Rapports Financiers</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/FINANCE/style.css">
+ <style>
+ .dashboard-container {
+ padding: 20px;
+ }
+
+ .section-header {
+ margin-bottom: 20px;
+ }
+
+ .index-container {
+ padding: 20px;
+ margin: 20px 0;
+ background-color: white;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ .report-item {
+ padding: 15px;
+ background-color: #e9ecef;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ }
+
+ .report-item a {
+ color: #20195e;
+ text-decoration: none;
+ font-weight: bold;
+ }
+
+ .generate-report-section {
+ margin: 20px 0;
+ padding: 15px;
+ background-color: #f1f1f1;
+ border-radius: 8px;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ }
+
+ button {
+ background-color: #20195e;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ padding: 10px 15px;
+ cursor: pointer;
+ }
+
+ button:hover {
+ background-color: #1a1451;
+ }
+
+ label {
+ margin-right: 10px;
+ }
+ </style>
+</head>
+
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+ <div class="categories">
+ <a href="./finance.html">Accueil</a>
+ <a href="./paiements_en_attente.html">Paiements en attente</a>
+ <a href="./rapports_financiers.html">Rapports Financiers</a>
+ <a href="./historique_paiements.html">Historique des transactions</a>
+ <a href="./mes_informations.html">Mes informations et documents</a>
+ </div>
+ <div class="user-section">
+ <div class="user-name">Jean DUPONT</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+ <div class="section-header">
+ <h2>Historique des rapports financiers</h2>
+ </div>
+
+ <!-- Index des rapports financiers -->
+ <div class="index-container">
+ <div class="report-item">
+ <span>Rapport financier : BUT Informatique - Octobre 2024</span>
+ <a href="chemin/vers/rapport_but_informatique_sem1_2024.pdf" download>Télécharger</a>
+ </div>
+ <div class="report-item">
+ <span>Rapport financier : BUT GEA - Octobre 2024</span>
+ <a href="chemin/vers/rapport_but_gea_sem1_2024.pdf" download>Télécharger</a>
+ </div>
+ <div class="report-item">
+ <span>Rapport financier : BUT Informatique - Septembre 2024</span>
+ <a href="chemin/vers/rapport_but_informatique_sem2_2024.pdf" download>Télécharger</a>
+ </div>
+ <div class="report-item">
+ <span>Rapport financier : BUT GEA - Septembre 2024</span>
+ <a href="chemin/vers/rapport_but_gea_sem2_2024.pdf" download>Télécharger</a>
+ </div>
+ <!-- Ajoutez d'autres rapports ici -->
+ </div>
+
+ <!-- Section pour générer un faux rapport -->
+ <div class="generate-report-section">
+ <h3>Générer un rapport financier</h3>
+ <form id="generateReportForm">
+ <label for="formationSelect">Sélectionnez une formation:</label>
+ <select id="formationSelect" name="formation">
+ <option value="informatique">BUT Informatique</option>
+ <option value="gea">BUT GEA</option>
+ </select><br>
+ <label for="semesterSelect">Sélectionnez un semestre:</label>
+ <select id="semesterSelect" name="semester">
+ <option value="semestre1">Octobre 2024</option>
+ <option value="semestre2">Septembre 2024</option>
+ </select><br><br>
+ <button type="submit">Générer le Rapport</button>
+ </form>
+ </div>
+
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html" style="color: white;">Mentions légales</a>
+ </p>
+ </div>
+
+ <script>
+ document.getElementById('generateReportForm').addEventListener('submit', function (event) {
+ event.preventDefault();
+ const formation = document.getElementById('formationSelect').value;
+ const semester = document.getElementById('semesterSelect').value;
+ alert(`Génération d'un rapport financier pour la formation BUT ${formation} - ${semester}`);
+ // Ici, vous pouvez ajouter votre logique pour générer le rapport
+ });
+ </script>
+
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/PROF/enseignant_permanent.html b/MaquetteWEB/html/PROF/enseignant_permanent.html
new file mode 100644
index 0000000..010aa9b
--- /dev/null
+++ b/MaquetteWEB/html/PROF/enseignant_permanent.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dashboard enseignant permanent</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/PROF/enseignant_permanent.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./enseignant_permanent.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Denis MONNERAT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="dashboard-container">
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
+ </div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
+ </div>
+ <div class="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
+ </div>
+ </div>
+
+
+ <!-- Script pour gérer l'affichage des notifications -->
+ <script>
+ const notificationsContainer = document.getElementById('notifications-container');
+ const notificationsSection = document.getElementById('notifications-section');
+
+ // Vérifiez si le conteneur des notifications est vide
+ if (notificationsContainer.childElementCount === 0) {
+ notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
+ }
+ </script>
+
+ <!-- Emploi du Temps avec navigation de semaines -->
+ <div class="section-header">
+ <h2>Mon Emploi du Temps</h2>
+ </div>
+
+ <div class="card">
+ <!-- Navigation entre semaines -->
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TP - SCR<br><span>Salle 224 - BUT1 Groupe 3</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101 - BUT2 Groupe 1</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TD - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ <td class="class">TP - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:30 - 11:00</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 4</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">11:00 - 11:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">13:00 - 13:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 1</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">13:30 - 14:00</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 2</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">14:00 - 14:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 3</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">14:30 - 15:00</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 4</span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <!-- Suivi des Paiements -->
+ <div class="section-header">
+ <h2>Suivi des Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Heures Payées</th>
+ <th>Montant Brut (€)</th>
+ <th>Date de Paiement</th>
+ <th>Bulletin de paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>01/10/2024</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Octobre 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>En attente</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
+
+ <div class="more-payments">
+ <p><a href="./paiements.html" class="btn">Voir tous les paiements</a></p>
+ </div>
+ </div>
+
+</div>
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/PROF/mes-heures.html b/MaquetteWEB/html/PROF/mes-heures.html
new file mode 100644
index 0000000..434f5b6
--- /dev/null
+++ b/MaquetteWEB/html/PROF/mes-heures.html
@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Suivi des Heures</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="stylesheet" href="../../css/PROF/mes-heures.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./enseignant_permanent.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Denis MONNERAT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+
+ <div class="section-header">
+ <h2>Propositions d'Heures</h2>
+ </div>
+ <div class="proposition-container">
+ <table class="proposition-table" id="proposalTable">
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Formation</th>
+ <th>Nom du Cours</th>
+ <th>Semestre</th>
+ <th>Type d'intervention</th>
+ <th>Volume Prévisionnel</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Décembre 2024</td>
+ <td>BUT1</td>
+ <td>Développement Web</td>
+ <td>1</td>
+ <td>CM, TD</td>
+ <td>8h</td>
+ <td>
+ <button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
+ <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ </td>
+ </tr>
+ <tr>
+ <td>Janvier 2025</td>
+ <td>BUT2</td>
+ <td>SCR</td>
+ <td>3</td>
+ <td>TD, TP</td>
+ <td>6h</td>
+ <td>
+ <button class="accept-button" onclick="acceptProposal(this)">Accepter</button>
+ <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <!-- Popup pour pièces justificatives -->
+ <div id="justificatifForm" class="justificatif-form popup">
+ <h3>Téléchargez vos pièces justificatives</h3>
+ <p>Veuillez télécharger le document suivant :</p>
+ <ul>
+ <li>Contrat de travail actuel</li>
+ </ul>
+ <input type="file" id="justificatif" name="justificatif" required>
+ <button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button>
+ <button onclick="closeJustificatifPopup()">Annuler</button>
+ </div>
+
+ <div class="section-header">
+ <h2>Prochaines heures</h2>
+ </div>
+ <div class="validated-hours-container card">
+ <table class="validated-hours-table" id="validatedTable">
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Formation</th>
+ <th>Nom du Cours</th>
+ <th>Semestre</th>
+ <th>Type d'intervention</th>
+ <th>Volume Prévisionnel</th>
+ <th>Statut</th> <!-- Nouvelle colonne pour le statut -->
+ </tr>
+ </thead>
+ <tbody id="validatedTableBody">
+ <tr>
+ <td>Décembre 2024</td>
+ <td>BUT1</td>
+ <td>Développement Web</td>
+ <td>1</td>
+ <td>CM, TD</td>
+ <td>8h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Janvier 2025</td>
+ <td>BUT2</td>
+ <td>SCR</td>
+ <td>3</td>
+ <td>TD, TP</td>
+ <td>6h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Février 2025</td>
+ <td>BUT3</td>
+ <td>Base de données</td>
+ <td>5</td>
+ <td>CM</td>
+ <td>10h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Mars 2025</td>
+ <td>BUT3</td>
+ <td>IA et Machine Learning</td>
+ <td>6</td>
+ <td>TD, TP</td>
+ <td>12h</td>
+ <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
+ </tr>
+ <tr>
+ <td>Avril 2025</td>
+ <td>BUT2</td>
+ <td>Réseaux</td>
+ <td>4</td>
+ <td>CM, TD</td>
+ <td>4h</td>
+ <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="section-header">
+ <h2>Historique des Heures Travaillées</h2>
+ </div>
+
+ <div class="card">
+ <div class="table-container">
+ <table id="hoursTable">
+ <thead>
+ <tr>
+ <th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
+ <th>Matière</th>
+ <th>Type d'Intervention</th>
+ <th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
+ <th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="hoursTableBody">
+ <!-- Rows will be generated dynamically with JavaScript -->
+ </tbody>
+ </table>
+ </div>
+
+
+ <!-- Pagination Buttons -->
+ <div id="pagination">
+ <button onclick="prevPage()">Précédent</button>
+ <span id="pageNumber"></span>
+ <button onclick="nextPage()">Suivant</button>
+ </div>
+ </div>
+
+ <div class="section-header">
+ <h2>Graphique des Heures Travaillées</h2>
+ </div>
+ <div class="chart-container">
+ <canvas id="hoursChart"></canvas>
+ </div>
+
+
+ <div class="section-header">
+ <h2>Signalement de problèmes d'heures</h2>
+ </div>
+ <div class="contact-form">
+ <form id="contactForm">
+ <label for="probleme">Type de problème :</label>
+ <select id="probleme" name="probleme" required>
+ <option value="" disabled selected>Choisir un problème</option>
+ <option value="non_paye">Il manque des heures dans mon historique</option>
+ <option value="montant_incorrect">Il y a des heures en trop</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="commentaire">Commentaires :</label>
+ <input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
+
+ <button type="submit">Soumettre</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Popup pour les détails du cours -->
+ <div id="infoPopup" class="popup">
+ <h4>Détails du la journée</h4>
+ <p><strong>Promotion :</strong> <span id="promotion"></span></p>
+ <p><strong>Groupe(s) :</strong> <span id="groupe"></span></p>
+ <p><strong>Salle :</strong> <span id="salle"></span></p>
+ <button onclick="closeInfoPopup()">Fermer</button>
+ </div>
+
+ <!-- Popup pour succès de l'envoi du formulaire -->
+ <div id="popup" class="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Success Icon">
+ <h4>Signalement Envoyé !</h4>
+ <p>Merci pour votre signalement. Nous allons traiter votre demande dans les plus brefs délais.</p>
+ <button onclick="closePopup()">Fermer</button>
+ </div>
+
+ <!-- Popup de confirmation de refus -->
+ <div id="confirmationPopup" class="confirmation-popup">
+ <div class="confirmation-content">
+ <h4>Confirmer le Refus</h4>
+ <p>Êtes-vous sûr de vouloir refuser cette proposition d'heure ?</p>
+ <button id="confirmRefusalButton" onclick="confirmRefusalAction()">Confirmer</button>
+ <button onclick="closeConfirmationPopup()">Annuler</button>
+ </div>
+ </div>
+
+ <div id="infoPopup" class="popup">
+ <h4>Détails de l'intervention</h4>
+ <p><strong>Promotion :</strong> <span id="popupPromotion"></span></p>
+ <p><strong>Type de Cours :</strong> <span id="popupTypeCours"></span></p>
+ <p><strong>ETD :</strong> <span id="popupETD"></span></p>
+ <p><strong>Montant :</strong> <span id="popupMontant"></span></p>
+ <p><strong>Matière :</strong> <span id="popupMatiere"></span></p>
+ <button onclick="closeInfoPopup()">Fermer</button>
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
+ </div>
+
+ <script>
+ // Données du graphique
+ const ctx = document.getElementById('hoursChart').getContext('2d');
+ const hoursChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
+ datasets: [{
+ label: 'Heures Travaillées',
+ data: [5, 10, 7, 8],
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Heures'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Semaines'
+ }
+ }
+ }
+ }
+ });
+
+ let proposalToRemove; // Variable pour stocker la proposition à supprimer
+
+ // Fonctions pour gérer l'acceptation et le refus
+ function acceptProposal(button) {
+ document.getElementById("justificatifForm").style.display = "block";
+ proposalToRemove = button.closest('tr'); // Stocker la proposition à supprimer
+ }
+
+ function confirmRefusal(button) {
+ proposalToRemove = button.closest('tr');
+ document.getElementById("confirmationPopup").style.display = "flex";
+ }
+
+ function confirmRefusalAction() {
+ proposalToRemove.remove();
+ closeConfirmationPopup();
+ }
+
+ function closeConfirmationPopup() {
+ document.getElementById("confirmationPopup").style.display = "none";
+ }
+
+ function submitJustificatif() {
+ alert("Vos pièces justificatives ont été soumises avec succès.");
+ closeJustificatifPopup(); // Cacher le formulaire
+
+ // Ajouter l'heure validée à la section des heures validées
+ const validatedTableBody = document.getElementById("validatedTableBody");
+ const newRow = document.createElement("tr");
+ const periode = proposalToRemove.cells[0].innerText; // Récupérer la période
+ const formation = proposalToRemove.cells[1].innerText; // Récupérer la formation
+ const nomCours = proposalToRemove.cells[2].innerText; // Récupérer le nom du cours
+ const semestre = proposalToRemove.cells[3].innerText; // Récupérer le semestre
+ const typeIntervention = proposalToRemove.cells[4].innerText; // Récupérer le type d'intervention
+ const volumePrevisionnel = proposalToRemove.cells[5].innerText; // Récupérer le volume prévisionnel
+
+ newRow.innerHTML = `<td>${periode}</td><td>${formation}</td><td>${nomCours}</td><td>${semestre}</td><td>${typeIntervention}</td><td>${volumePrevisionnel}</td><td class="status-attente">En attente de traitement</td> `;
+ validatedTableBody.appendChild(newRow);
+ proposalToRemove.remove(); // Supprimer la proposition de l'affichage
+ }
+
+ function closeJustificatifPopup() {
+ document.getElementById("justificatifForm").style.display = "none";
+ }
+
+ function getRandomBUT() {
+ return "BUT" + Math.floor(Math.random() * 3 + 1); // Génère un nombre aléatoire entre 1 et 3
+ }
+
+ // Gestion des popups
+ function showDetails(promotion, groupes, salle) {
+ document.getElementById("promotion").innerText = promotion;
+ document.getElementById("groupe").innerText = groupes;
+ document.getElementById("salle").innerText = salle;
+ document.getElementById("infoPopup").style.display = "block";
+ }
+
+ function closeInfoPopup() {
+ document.getElementById("infoPopup").style.display = "none";
+ }
+
+ function closePopup() {
+ document.getElementById("popup").style.display = "none";
+ }
+
+ // Gestion de l'envoi du formulaire de contact
+ document.getElementById('contactForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ document.getElementById("popup").style.display = "block";
+ });
+ </script>
+ <script>
+ // Exemple d'un grand nombre d'heures pour l'historique
+ const hoursData = [
+ { date: '01/02/2024', matiere: 'SCR', type: 'CM', volume: '3 ETD', worked: '4h' },
+ { date: '05/02/2024', matiere: 'Web Dev', type: 'TP', volume: '2 ETD', worked: '3h' },
+ { date: '10/02/2024', matiere: 'Mathématiques', type: 'TD', volume: '4 ETD', worked: '5h' },
+ { date: '15/02/2024', matiere: 'IA', type: 'CM', volume: '2 ETD', worked: '2h' },
+ { date: '20/02/2024', matiere: 'Python', type: 'TP', volume: '5 ETD', worked: '7h' },
+ // Ajoutez ici un grand nombre de données...
+ { date: '01/03/2024', matiere: 'Réseaux', type: 'TD', volume: '3 ETD', worked: '4h' },
+ { date: '10/03/2024', matiere: 'Big Data', type: 'CM', volume: '5 ETD', worked: '6h' },
+ // Plusieurs lignes (simulons jusqu'à 50 lignes ou plus)...
+ { date: '01/04/2024', matiere: 'Dev Mobile', type: 'TP', volume: '2 ETD', worked: '3h' },
+ { date: '10/04/2024', matiere: 'Sécurité', type: 'CM', volume: '3 ETD', worked: '5h' },
+ ];
+
+ // Variables pour la pagination
+ const rowsPerPage = 5;
+ let currentPage = 1;
+ const totalRows = hoursData.length;
+ const totalPages = Math.ceil(totalRows / rowsPerPage);
+
+ // Fonction pour afficher la table avec pagination
+ function displayTable(page) {
+ const start = (page - 1) * rowsPerPage;
+ const end = start + rowsPerPage;
+ const tableBody = document.getElementById('hoursTableBody');
+ tableBody.innerHTML = ''; // Clear existing rows
+
+ const pageData = hoursData.slice(start, end);
+ pageData.forEach(row => {
+ const tr = document.createElement('tr');
+ tr.innerHTML = `<td>${row.date}</td>
+ <td>${row.matiere}</td>
+ <td>${row.type}</td>
+ <td>${row.volume}</td>
+ <td>${row.worked}</td>
+ <td><span class="details-button" onclick="showDetails('BUT2', '1,2,3', '140')">Plus d'infos</span></td>`;
+ tableBody.appendChild(tr);
+ });
+
+ document.getElementById('pageNumber').innerText = `Page ${page} sur ${totalPages}`;
+ }
+
+ // Fonctions pour naviguer dans la pagination
+ function nextPage() {
+ if (currentPage < totalPages) {
+ currentPage++;
+ displayTable(currentPage);
+ }
+ }
+
+ function prevPage() {
+ if (currentPage > 1) {
+ currentPage--;
+ displayTable(currentPage);
+ }
+ }
+
+ // Fonction de tri pour les colonnes
+ function sortTable(n) {
+ const table = document.getElementById('hoursTable');
+ let rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+ switching = true;
+ dir = "asc"; // Set the sorting direction to ascending
+ while (switching) {
+ switching = false;
+ rows = table.rows;
+ for (i = 1; i < (rows.length - 1); i++) {
+ shouldSwitch = false;
+ x = rows[i].getElementsByTagName("TD")[n];
+ y = rows[i + 1].getElementsByTagName("TD")[n];
+ if (dir === "asc") {
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ } else if (dir === "desc") {
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ }
+ }
+ if (shouldSwitch) {
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ switchcount++;
+ } else {
+ if (switchcount === 0 && dir === "asc") {
+ dir = "desc";
+ switching = true;
+ }
+ }
+ }
+ }
+
+ // Initial load
+ displayTable(currentPage);
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/MaquetteWEB/html/PROF/mes-informations.html b/MaquetteWEB/html/PROF/mes-informations.html
new file mode 100644
index 0000000..64c7ee8
--- /dev/null
+++ b/MaquetteWEB/html/PROF/mes-informations.html
@@ -0,0 +1,541 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mes Informations</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #a17b12;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #a17b12;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #5f490b;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #a17b12;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ .header {
+ background-color: #a17b12;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+ }
+
+ .logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+ }
+ .categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+ }
+ .categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+ }
+ .categories a:hover {
+ text-decoration: underline;
+ }
+ .user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ }
+ .user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+ }
+ .logout-container {
+ display: flex;
+ align-items: center;
+ }
+ .logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+ }
+
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #a17b12;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #a17b12;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #5f490b;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #a17b12;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #a17b12; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #a17b12; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #a17b12;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #5f490b;
+ }
+
+ /* Sablier de chargement */
+ .loading-text {
+ font-size: 1.2em;
+ color: #555;
+ }
+ .loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+
+ .file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+ }
+
+ .file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+ }
+
+ .file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+ }
+
+ .document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+ }
+
+
+
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./enseignant_permanent.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Denis MONNERAT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="container">
+ <!-- Section Informations Personnelles -->
+ <div class="info-card">
+ <h2>Informations Personnelles</h2>
+ <table class="info-table">
+ <tr>
+ <th>Nom Complet</th>
+ <td><input type="text" id="nom" value="Denis MONNERAT" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Date de Naissance</th>
+ <td><input type="text" id="date_naissance" value="15 Mars 1985" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Ville de Naissance</th>
+ <td><input type="text" id="ville_naissance" value="Paris" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Adresse</th>
+ <td><input type="text" id="adresse" value="12 Rue de la République, 75000 Paris"></td>
+ </tr>
+ <tr>
+ <th>E-mail (professionnel)</th>
+ <td><input type="email" id="email-pro" value="denis.monnerat@u-pec.fr"></td>
+ </tr>
+ <tr>
+ <th>Téléphone</th>
+ <td><input type="tel" id="telephone" value="07 69 55 14 55"></td>
+ </tr>
+ <tr>
+ <th>Numéro de Sécurité Sociale</th>
+ <td><input type="text" id="numero_securite" value="1 85 03 75 123 456 78" class="non-editable" readonly></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveInfo()">Sauvegarder les modifications</button>
+ </div>
+
+ <!-- Section Informations Bancaires -->
+ <div class="info-card">
+ <h2>Informations Bancaires</h2>
+ <table class="info-table">
+ <tr>
+ <th>Banque</th>
+ <td><input type="text" id="banque" value="BNP Paribas"></td>
+ </tr>
+ <tr>
+ <th>IBAN</th>
+ <td><input type="text" id="iban" value="FR76 3000 6000 0112 3456 7890 189"></td>
+ </tr>
+ <tr>
+ <th>BIC</th>
+ <td><input type="text" id="bic" value="BNPAFRPPXXX"></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveBankInfo()">Sauvegarder les informations bancaires</button>
+ </div>
+
+ <!-- Section Documents -->
+ <div class="info-card">
+ <h2>Documents Officiels</h2>
+ <table class="info-table">
+ <tr>
+ <th>Pièce d'identité</th>
+ <td><a href="../../media/documents/VACATAIRE/CarteIdentite.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Contrat de Travail</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Justificatif de Domicile</th>
+ <td><a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">Télécharger</a></td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <h2>Envoyer un Document</h2>
+ <form id="uploadForm" onsubmit="return false;">
+ <label for="documentType">Type de document :</label>
+ <select id="documentType" class="document-select">
+ <option value="" disabled selected>Sélectionnez un type de document</option>
+ <option value="carte_identite">Carte d'Identité</option>
+ <option value="contrat_travail">Contrat de Travail</option>
+ <option value="justificatif_domicile">Justificatif de Domicile</option>
+ <option value="releve_bancaire">Relevé Bancaire</option>
+ <option value="certificat_medical">Certificat Médical</option>
+ <option value="avis_imposition">Avis d'Imposition</option>
+ <option value="permis_conduire">Permis de Conduire</option>
+ <option value="passeport">Passeport</option>
+ <option value="facture">Facture</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="newDocument" class="file-upload-label">
+ Choisir un fichier
+ </label>
+ <input type="file" id="newDocument" accept=".pdf,.doc,.docx" style="display: none;" onchange="updateFileName()">
+ <span id="fileName" class="file-name">Aucun fichier choisi</span>
+ <button class="action-btn" onclick="uploadDocument()">Envoyer le document</button>
+ </form>
+ </div>
+
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Footer -->
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
+</div>
+
+<script>
+ // Sauvegarder les informations personnelles dans le localStorage
+ function saveInfo() {
+ const ville_naissance = document.getElementById('ville_naissance').value;
+ const adresse = document.getElementById('adresse').value;
+ const email_pro = document.getElementById('email-pro').value;
+ const telephone = document.getElementById('telephone').value;
+ const numero_securite = document.getElementById('numero_securite').value;
+ const statut = document.getElementById('statut').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('ville_naissance', ville_naissance);
+ localStorage.setItem('adresse', adresse);
+ localStorage.setItem('email-pro', email_pro);
+ localStorage.setItem('telephone', telephone);
+ localStorage.setItem('numero_securite', numero_securite);
+ localStorage.setItem('statut', statut);
+
+ alert('Informations personnelles sauvegardées !');
+ }
+
+ // Sauvegarder les informations bancaires dans le localStorage
+ function saveBankInfo() {
+ const banque = document.getElementById('banque').value;
+ const iban = document.getElementById('iban').value;
+ const bic = document.getElementById('bic').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('banque', banque);
+ localStorage.setItem('iban', iban);
+ localStorage.setItem('bic', bic);
+
+ alert('Informations bancaires sauvegardées !');
+ }
+
+ // Récupérer les informations depuis le localStorage (si elles existent)
+ function loadInfo() {
+ if(localStorage.getItem('ville_naissance')) {
+ document.getElementById('ville_naissance').value = localStorage.getItem('ville_naissance');
+ }
+ if(localStorage.getItem('adresse')) {
+ document.getElementById('adresse').value = localStorage.getItem('adresse');
+ }
+
+ if(localStorage.getItem('email-pro')) {
+ document.getElementById('email-pro').value = localStorage.getItem('email-pro');
+ }
+ if(localStorage.getItem('telephone')) {
+ document.getElementById('telephone').value = localStorage.getItem('telephone');
+ }
+ if(localStorage.getItem('numero_securite')) {
+ document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
+ }
+ if(localStorage.getItem('statut')) {
+ document.getElementById('statut').value = localStorage.getItem('statut');
+ }
+
+ // Informations bancaires
+ if(localStorage.getItem('banque')) {
+ document.getElementById('banque').value = localStorage.getItem('banque');
+ }
+ if(localStorage.getItem('iban')) {
+ document.getElementById('iban').value = localStorage.getItem('iban');
+ }
+ if(localStorage.getItem('bic')) {
+ document.getElementById('bic').value = localStorage.getItem('bic');
+ }
+ }
+
+ // Charger les informations quand la page est chargée
+ window.onload = loadInfo;
+
+ function uploadDocument() {
+ const documentType = document.getElementById('documentType').value;
+ const fileInput = document.getElementById('newDocument').files[0];
+
+ if (!documentType) {
+ alert("Veuillez sélectionner un type de document.");
+ return;
+ }
+
+ if (!fileInput) {
+ alert("Veuillez choisir un fichier à envoyer.");
+ return;
+ }
+
+ // Simulation d'un envoi réussi (ajoutez votre logique d'envoi ici)
+ document.getElementById('fileName').textContent = "Aucun fichier choisi"; // Réinitialiser le nom de fichier
+
+ // Afficher le document en attente de traitement
+ const documentsTable = document.querySelector('.info-table'); // La table où afficher les documents
+ const newRow = documentsTable.insertRow(-1); // Insérer une nouvelle ligne à la fin
+
+ // Ajouter des cellules pour le type de document et le statut
+ newRow.innerHTML = `<th>${documentType.replace(/_/g, ' ').toUpperCase()}</th><td>En attente de traitement</td>`;
+
+ // Ouvrir le pop-up de confirmation
+ document.getElementById('popup').style.display = 'block'; // Ouvrir le pop-up
+ }
+
+
+ function updateFileName() {
+ const fileInput = document.getElementById('newDocument');
+ const fileNameDisplay = document.getElementById('fileName');
+ if (fileInput.files.length > 0) {
+ fileNameDisplay.textContent = fileInput.files[0].name;
+ } else {
+ fileNameDisplay.textContent = 'Aucun fichier choisi';
+ }
+}
+
+
+ // Fermer la pop-up
+ function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/PROF/paiements.html b/MaquetteWEB/html/PROF/paiements.html
new file mode 100644
index 0000000..6a98ef2
--- /dev/null
+++ b/MaquetteWEB/html/PROF/paiements.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Suivi des Paiements</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="stylesheet" href="../../css/PROF/paiements.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./enseignant_permanent.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Denis MONNERAT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="dashboard-container">
+ <!-- Historique des paiements -->
+ <div class="section-header">
+ <h2>Historique des Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th data-sort="periode">Période</th>
+ <th data-sort="heuresPayees">Heures Payées</th>
+ <th data-sort="montantBrut">Montant Brut (€)</th>
+ <th data-sort="montantNet">Montant Net (€)</th>
+ <th data-sort="datePaiement">Date de Paiement</th>
+ <th data-sort="modePaiement">Mode de Paiement</th>
+ <th data-sort="compteBancaire">Compte Bancaire</th>
+ <th data-sort="statut">Statut</th>
+ <th>Bulletin de Paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Février 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/03/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Mars 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/04/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Avril 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/05/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Mai 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/06/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Juin 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/07/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/10/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Octobre 2024</td>
+ <td>35h</td>
+ <td>3500,00</td>
+ <td>2722,00</td>
+ <td>01/11/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-attente">En attente</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p><strong>Prochain paiement prévu :</strong> Novembre 2024 (35h restantes)</p>
+ </div>
+
+ <!-- Graphique des paiements (brut) -->
+ <div class="section-header">
+ <h2>Évolution de vos Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="chart-container">
+ <canvas id="paymentChart"></canvas>
+ </div>
+ </div>
+
+ <!-- Formulaire pour signaler un problème -->
+<!-- Formulaire pour signaler un problème -->
+<div class="section-header">
+ <h2>Signaler un problème de paye</h2>
+</div>
+<div class="card contact-form">
+ <h3>Formulaire de signalement</h3>
+ <form id="contactForm">
+ <label for="probleme">Sélectionnez un problème :</label>
+ <select id="probleme" required>
+ <option value="">-- Sélectionner un problème --</option>
+ <option value="noPayment">Je n'ai pas reçu de paiement</option>
+ <option value="wrongAmount">Le montant de mon salaire est inférieur à ce qui était prévu.</option>
+ <option value="duplicatePayment">J'ai reçu un paiement en double</option>
+ <option value="latePayment">Mon paiement est en retard</option>
+ <option value="unjustifiedWithholding">Il y a une retenue sur mon paiement que je ne comprends pas</option>
+ <option value="technicalIssue">J'ai des difficultés à accéder à mes bulletins de salaire en ligne</option>
+ </select>
+
+ <!-- Champs supplémentaires qui s'affichent selon le problème -->
+ <div id="detailsSupplementaires" style="display: none;">
+ <!-- Champ pour sélectionner le mois -->
+ <div id="moisEnQuestion" style="display:none;">
+ <label for="mois">Sélectionner le mois :</label>
+ <select id="mois">
+ <option value="">-- Sélectionner le mois --</option>
+ <option value="fevrier">Février 2024</option>
+ <option value="mars">Mars 2024</option>
+ <option value="avril">Avril 2024</option>
+ <option value="mai">Mai 2024</option>
+ <option value="juin">Juin 2024</option>
+ <option value="septembre">Septembre 2024</option>
+ <option value="octobre">Octobre 2024</option>
+ </select>
+ </div>
+
+ <!-- Champ pour indiquer le montant reçu -->
+ <div id="montantRecuSupplementaire" style="display:none;">
+ <label for="montantRecu">Montant reçu (€) :</label>
+ <input type="number" id="montantRecu" placeholder="Montant reçu" />
+ </div>
+
+ <!-- Champ pour indiquer le montant attendu -->
+ <div id="montantAttendu" style="display:none;">
+ <label for="montantAttenduInput">Montant attendu (€) :</label>
+ <input type="number" id="montantAttenduInput" placeholder="Montant attendu" />
+ </div>
+ </div>
+ <button type="submit">Envoyer</button>
+ </form>
+</div>
+
+
+</div>
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="html/mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre message a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Script pour gérer le formulaire et le popup -->
+<script>
+document.getElementById('probleme').addEventListener('change', function() {
+ var detailsSupplementaires = document.getElementById('detailsSupplementaires');
+ var montantRecuSupplementaire = document.getElementById('montantRecuSupplementaire');
+ var moisEnQuestion = document.getElementById('moisEnQuestion'); // Champ pour sélectionner le mois
+ var montantAttendu = document.getElementById('montantAttendu'); // Champ pour indiquer le montant attendu
+
+ // Masquer tous les champs au départ
+ detailsSupplementaires.style.display = 'none';
+ montantRecuSupplementaire.style.display = 'none';
+ moisEnQuestion.style.display = 'none';
+ montantAttendu.style.display = 'none';
+
+ // Afficher les champs en fonction du problème sélectionné
+ switch (this.value) {
+ case 'noPayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'wrongAmount':
+ detailsSupplementaires.style.display = 'block';
+ montantRecuSupplementaire.style.display = 'block'; // Afficher le montant
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'duplicatePayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ montantAttendu.style.display = 'block'; // Afficher le champ pour le montant attendu
+ break;
+ case 'latePayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'unjustifiedWithholding':
+ detailsSupplementaires.style.display = 'block';
+ break;
+ case 'technicalIssue':
+ detailsSupplementaires.style.display = 'block';
+ break;
+ default:
+ // Aucune action si aucune valeur valide n'est sélectionnée
+ break;
+ }
+});
+
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ // Afficher le popup de confirmation
+ document.getElementById('popup').style.display = 'block';
+});
+
+function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ // Réinitialiser le formulaire après soumission
+ document.getElementById('contactForm').reset();
+ document.getElementById('detailsSupplementaires').style.display = 'none';
+}
+
+// Configuration du graphique Chart.js
+const ctx = document.getElementById('paymentChart').getContext('2d');
+const paymentChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Septembre', 'Octobre'],
+ datasets: [{
+ label: 'Montant Brut (€)',
+ data: [3500, 3500, 3500, 3500, 3500, 3500, 3500],
+ borderColor: 'rgba(75, 192, 192, 1)',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ fill: true,
+ tension: 0.3,
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ },
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top',
+ }
+ }
+ }
+});
+
+document.querySelectorAll('th[data-sort]').forEach(function (header) {
+ header.addEventListener('click', function () {
+ const table = header.closest('table');
+ const tbody = table.querySelector('tbody');
+ const rowsArray = Array.from(tbody.querySelectorAll('tr'));
+ const index = Array.from(header.parentElement.children).indexOf(header);
+ let order = header.dataset.order || 1;
+
+ // Retirer les classes de tri des autres colonnes
+ document.querySelectorAll('th[data-sort]').forEach(function (th) {
+ th.classList.remove('ascending', 'descending');
+ });
+
+ // Appliquer la classe de tri
+ if (order == 1) {
+ header.classList.add('ascending');
+ header.dataset.order = -1; // Inverser l'ordre pour la prochaine fois
+ } else {
+ header.classList.add('descending');
+ header.dataset.order = 1; // Réinitialiser pour la prochaine fois
+ }
+
+ // Trier les lignes du tableau
+ rowsArray.sort(function (rowA, rowB) {
+ let cellA = rowA.children[index].innerText.trim();
+ let cellB = rowB.children[index].innerText.trim();
+
+ // Gérer les périodes (mois)
+ if (header.dataset.sort === 'periode') {
+ cellA = moisToNumero(cellA);
+ cellB = moisToNumero(cellB);
+ }
+
+ // Gérer les montants numériques avec des virgules
+ else if (!isNaN(cellA.replace(',', '.')) && !isNaN(cellB.replace(',', '.'))) {
+ return (parseFloat(cellA.replace(',', '.')) - parseFloat(cellB.replace(',', '.'))) * order;
+ }
+
+ // Gérer les dates
+ else if (isDate(cellA) && isDate(cellB)) {
+ return (new Date(cellA) - new Date(cellB)) * order;
+ }
+
+ // Gérer les textes (par défaut)
+ else {
+ return cellA.localeCompare(cellB) * order;
+ }
+
+ return (cellA - cellB) * order;
+ });
+
+ // Réorganiser les lignes dans le tableau
+ rowsArray.forEach(function (row) {
+ tbody.appendChild(row);
+ });
+ });
+});
+
+// Fonction pour convertir les mois en numéros pour faciliter le tri
+function moisToNumero(mois) {
+ const moisIndex = {
+ "Janvier": 1,
+ "Février": 2,
+ "Mars": 3,
+ "Avril": 4,
+ "Mai": 5,
+ "Juin": 6,
+ "Juillet": 7,
+ "Août": 8,
+ "Septembre": 9,
+ "Octobre": 10,
+ "Novembre": 11,
+ "Décembre": 12
+ };
+
+ // Extraire le mois et l'année du texte (ex: "Février 2024")
+ const [moisNom, annee] = mois.split(' ');
+ return new Date(annee, moisIndex[moisNom] - 1); // Créer un objet Date
+}
+
+// Fonction pour vérifier si un texte est une date valide
+function isDate(dateString) {
+ return !isNaN(Date.parse(dateString));
+}
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/RH/candidature.html b/MaquetteWEB/html/RH/candidature.html
new file mode 100644
index 0000000..80a3e49
--- /dev/null
+++ b/MaquetteWEB/html/RH/candidature.html
@@ -0,0 +1,279 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../../css/RH/style.css">
+ <link rel="stylesheet" href="../../css/RH/rh.css">
+ <title>Gestion des Candidatures</title>
+ <style>
+ /* Ajout de styles pour la barre de recherche et le tri */
+ .search-container {
+ margin-bottom: 20px;
+ }
+
+ .sort-container {
+ margin-bottom: 20px;
+ }
+
+ .sort-button {
+ margin-right: 5px;
+ }
+
+ .modal-content {
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .comment-container {
+ margin-top: 20px;
+ }
+
+ /* Styles pour la pop-up d'ajout d'offre de vacation */
+ .vacation-modal {
+ display: none; /* Masquer par défaut */
+ position: fixed;
+ z-index: 1;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0,0,0);
+ background-color: rgba(0,0,0,0.4);
+ padding-top: 60px;
+ }
+
+ .vacation-modal-content {
+ background-color: #fefefe;
+ margin: 5% auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+ }
+
+ .validationDossier{
+ margin-top: 25px;
+ background-color: green;
+ }
+
+ .refusDossier{
+ background-color: rgb(128, 0, 0);
+ }
+
+ .commentairee{
+ width: 100%;
+ height: 100%;
+ box-sizing: border-box;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./rh.html">Accueil</a>
+ <a href="./gestion_personnel.html">Gestion du personnel</a>
+ <a href="./candidature.html">Candidatures</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">Alice BERGER</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <main>
+ <section>
+ <h2>Candidatures en Attente de Validation</h2>
+
+ <!-- Barre de recherche -->
+ <div class="search-container">
+ <input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
+ </div>
+
+ <!-- Conteneur de tri -->
+ <div class="sort-container">
+ <button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
+ <button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
+ <button class="sort-button" onclick="sortTable(2)">Trier par Formation</button>
+ <button class="sort-button" onclick="openVacationModal()">Ajouter une Offre de Vacation</button>
+ </div>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Nom</th>
+ <th>Prénom</th>
+ <th>Formation Demandée</th>
+ <th>Action</th>
+ </tr>
+ </thead>
+ <tbody id="candidatures-table">
+ <tr>
+ <td>Mike</td>
+ <td>Michel</td>
+ <td>Informatique - BUT1</td>
+ <td>
+ <button onclick="consulterDossier('Mike', 'Michel')">Consulter Dossier</button>
+ </td>
+ </tr>
+ <tr>
+ <td>John</td>
+ <td>Williams</td>
+ <td>Mathématiques - BUT GEA</td>
+ <td>
+ <button onclick="consulterDossier('John', 'Williams')">Consulter Dossier</button>
+ </td>
+ </tr>
+ <!-- Ajoutez d'autres lignes ici -->
+ </tbody>
+ </table>
+ </section>
+ </main>
+
+ <!-- Modal pour consulter le dossier de candidature -->
+ <div id="dossierModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeDossierModal()">×</span>
+ <h2>Dossier de Candidature : <span id="dossier-nom"></span> <span id="dossier-prenom"></span></h2>
+ <h3>Pièces Justificatives :</h3>
+ <ul id="pieces-list"></ul>
+ <div class="comment-container">
+ <h3>Commentaire :</h3>
+ <textarea class="commentairee" rows="4" placeholder="Ajouter un commentaire sur ce dossier..."></textarea><br>
+ <button onclick="ajouterCommentaire()">Ajouter Commentaire</button>
+ </div>
+ <div>
+ <button class="validationDossier" onclick="validerDossier()">Valider Dossier</button>
+ <button class="refusDossier" onclick="refuserDossier()">Refuser Dossier</button>
+ </div>
+ </div>
+ </div>
+
+ <!-- Modal pour ajouter une offre de vacation -->
+ <div id="vacationModal" class="vacation-modal">
+ <div class="vacation-modal-content">
+ <span class="close" onclick="closeVacationModal()">×</span>
+ <h2>Ajouter une Offre de Vacation</h2>
+ <form id="vacation-form">
+ <label for="diplome">Diplôme requis :</label><br>
+ <input type="text" id="diplome" name="diplome" required><br><br>
+
+ <label for="description">Description :</label><br>
+ <textarea id="description" name="description" rows="4" required></textarea><br><br>
+
+
+ <label for="duree">Durée (en jours) :</label><br>
+ <input type="number" id="duree" name="duree" min="1" required><br><br>
+
+ <button type="submit">Soumettre l'Offre</button>
+ </form>
+ </div>
+ </div>
+
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+ <script>
+ const sortOrder = [true, true, true]; // État du tri pour chaque colonne
+
+ function sortTable(columnIndex) {
+ const table = document.getElementById("candidatures-table");
+ const rows = Array.from(table.rows);
+ const direction = sortOrder[columnIndex] ? 1 : -1; // Déterminer la direction du tri
+ sortOrder[columnIndex] = !sortOrder[columnIndex]; // Basculer l'ordre de tri pour le prochain clic
+
+ rows.sort((a, b) => {
+ const aText = a.cells[columnIndex].textContent.trim();
+ const bText = b.cells[columnIndex].textContent.trim();
+ return direction * aText.localeCompare(bText);
+ });
+
+ // Réattacher les lignes triées au tableau
+ rows.forEach(row => table.appendChild(row));
+ }
+
+ function filterTable() {
+ const input = document.getElementById("search-input").value.toLowerCase();
+ const table = document.getElementById("candidatures-table");
+ const rows = Array.from(table.rows);
+
+ rows.forEach(row => {
+ const cells = Array.from(row.cells);
+ const match = cells[0].textContent.toLowerCase().includes(input) ||
+ cells[1].textContent.toLowerCase().includes(input);
+ row.style.display = match ? "" : "none";
+ });
+ }
+
+ function consulterDossier(nom, prenom) {
+ document.getElementById("dossier-nom").textContent = nom;
+ document.getElementById("dossier-prenom").textContent = prenom;
+ const piecesList = document.getElementById("pieces-list");
+ piecesList.innerHTML = `
+ <li><a href="">CV - ${prenom} ${nom}.pdf</a></li>
+ <li><a href="">Diplôme - Licence Informatique.pdf</a></li>
+ <li><a href="">Lettre de motivation.pdf</a></li>
+ <li><a href="">Justificatif d'expérience.pdf</a></li>
+ `; // Remplacer par les vraies données
+ document.getElementById("dossierModal").style.display = "block";
+ }
+
+ function closeDossierModal() {
+ document.getElementById("dossierModal").style.display = "none";
+ document.getElementById("commentaire").value = ""; // Réinitialiser le champ de commentaire
+ }
+
+ function ajouterCommentaire() {
+ const commentaire = document.getElementById("commentaire").value;
+ alert(`Commentaire ajouté : ${commentaire}`);
+ // Logic to handle the comment addition can be implemented here
+ }
+
+ function validerDossier() {
+ alert("Dossier validé !");
+ closeDossierModal();
+ // Logic to handle the validation of the dossier can be implemented here
+ }
+
+ function refuserDossier() {
+ alert("Dossier refusé !");
+ closeDossierModal();
+ // Logic to handle the refusal of the dossier can be implemented here
+ }
+
+ function openVacationModal() {
+ document.getElementById("vacationModal").style.display = "block";
+ }
+
+ function closeVacationModal() {
+ document.getElementById("vacationModal").style.display = "none";
+ document.getElementById("vacation-form").reset(); // Réinitialiser le formulaire
+ }
+
+ // Gestion de la soumission du formulaire d'offre de vacation
+ document.getElementById("vacation-form").addEventListener("submit", function(event) {
+ event.preventDefault(); // Empêcher le rechargement de la page
+ alert("Offre de vacation soumise !");
+ closeVacationModal(); // Fermer la pop-up après soumission
+ // Ici, vous pouvez ajouter le code pour traiter l'envoi du formulaire, comme envoyer les données à un serveur.
+ });
+ </script>
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/RH/gestion_personnel.html b/MaquetteWEB/html/RH/gestion_personnel.html
new file mode 100644
index 0000000..c63a3c8
--- /dev/null
+++ b/MaquetteWEB/html/RH/gestion_personnel.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="stylesheet" href="../../css/RH/style.css">
+ <link rel="stylesheet" href="../../css/RH/rh.css">
+ <title>Gestion du Personnel</title>
+ <style>
+ /* Ajout de styles pour la barre de recherche et le tri */
+ .search-container {
+ margin-bottom: 20px;
+ }
+
+ .sort-container {
+ margin-bottom: 20px;
+ }
+
+ .sort-button {
+ margin-right: 5px;
+ }
+
+ .modal-content {
+ max-height: 80vh;
+ overflow-y: auto;
+ }
+
+ .supprimerBouton{
+ background-color: rgb(128, 0, 0);
+ }
+
+ .voirDetailBouton{
+ background-color: rgb(255, 140, 0);
+ }
+
+ .modifierBouton{
+ background-color: #28A745;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./rh.html">Accueil</a>
+ <a href="./gestion_personnel.html">Gestion du personnel</a>
+ <a href="./candidature.html">Candidatures</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">Alice BERGER</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <main>
+ <section>
+ <h2>Gestion du personnel</h2>
+ <!-- Barre de recherche -->
+ <div class="search-container">
+ <input type="text" id="search-input" placeholder="Rechercher par nom" oninput="filterTable()">
+ </div>
+
+ <!-- Conteneur de tri -->
+ <div class="sort-container">
+ <button class="sort-button" onclick="sortTable(0)">Trier par Nom</button>
+ <button class="sort-button" onclick="sortTable(1)">Trier par Prénom</button>
+ <button class="sort-button" onclick="sortTable(2)">Trier par Statut</button>
+ <button class="sort-button" onclick="sortTable(3)">Trier par Dernière Intervention</button>
+ </div>
+
+ <table>
+ <thead>
+ <tr>
+ <th>Nom</th>
+ <th>Prénom</th>
+ <th>Statut</th>
+ <th>Dernière Intervention</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="personnel-table">
+ <tr>
+ <td>Dupont</td>
+ <td>Jean</td>
+ <td>Professeur Vacataire</td>
+ <td>01/10/2024</td>
+ <td>
+ <button class="modifierBouton" onclick="openModal('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Modifier</button>
+ <button class="supprimerBouton" onclick="supprimerPersonnel('Dupont', 'Jean')">Supprimer</button>
+ <button class="voirDetailBouton" onclick="voirDetails('Dupont', 'Jean', 'Professeur Vacataire', '01/10/2024')">Voir Détails</button>
+ </td>
+ </tr>
+ <tr>
+ <td>Martin</td>
+ <td>Sophie</td>
+ <td>Professeur Vacataire</td>
+ <td>15/09/2024</td>
+ <td>
+ <button class="modifierBouton" onclick="openModal('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Modifier</button>
+ <button class="supprimerBouton" onclick="supprimerPersonnel('Martin', 'Sophie')">Supprimer</button>
+ <button class="voirDetailBouton" onclick="voirDetails('Martin', 'Sophie', 'Professeur Vacataire', '15/09/2024')">Voir Détails</button>
+ </td>
+ </tr>
+ <!-- Ajoutez d'autres lignes ici -->
+ </tbody>
+ </table>
+ <button onclick="ajouterPersonnel()">Ajouter un Personnel</button>
+ </section>
+ </main>
+
+ <!-- Modal pour modifier le personnel -->
+ <div id="myModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeModal()">×</span>
+ <h2>Modifier le Personnel</h2>
+ <form id="edit-form">
+ <label for="nom">Nom:</label>
+ <input type="text" id="nom" required><br>
+ <label for="prenom">Prénom:</label>
+ <input type="text" id="prenom" required><br>
+ <label for="statut">Statut:</label>
+ <input type="text" id="statut" required><br>
+ <label for="intervention">Dernière Intervention:</label>
+ <input type="date" id="intervention" required><br>
+ <button type="submit">Enregistrer</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Modal pour voir les détails du personnel -->
+ <div id="detailModal" class="modal">
+ <div class="modal-content">
+ <span class="close" onclick="closeDetailModal()">×</span>
+ <h2>Détails de Personnel</h2>
+ <p id="detail-info"></p>
+ <h3>Heures à Payer</h3>
+ <p id="heures-a-payer"></p>
+ <h3>Demandes de Corrections d'Heures</h3>
+ <ul id="corrections-list"></ul>
+ <h3>Documents</h3>
+ <ul id="documents-list"></ul>
+ <h3>Statut</h3>
+ <p id="statut-detail"></p>
+ <h3>Historique des Heures</h3>
+ <ul id="historique-list"></ul>
+ <h3>Coordonnées</h3>
+ <p id="coordonnees"></p>
+ <button onclick="lancerProcedurePaiement()">Lancer la Procédure de Paiement</button>
+ <button onclick="modifierHeures()">Modifier les Heures</button>
+
+ </div>
+ </div>
+
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+ <script>
+ let sortOrder = [true, true, true, true]; // Array to keep track of sort order for each column
+
+ function sortTable(columnIndex) {
+ const table = document.getElementById("personnel-table");
+ const rows = Array.from(table.rows);
+ const direction = sortOrder[columnIndex] ? 1 : -1; // Determine sorting direction
+ sortOrder[columnIndex] = !sortOrder[columnIndex]; // Toggle sort order for the next click
+
+ rows.sort((a, b) => {
+ const aText = a.cells[columnIndex].textContent.trim();
+ const bText = b.cells[columnIndex].textContent.trim();
+
+ if (columnIndex === 3) { // Date column
+ return direction * (new Date(aText) - new Date(bText));
+ } else {
+ return direction * aText.localeCompare(bText);
+ }
+ });
+
+ // Reattach sorted rows to the table
+ rows.forEach(row => table.appendChild(row));
+ }
+
+ function filterTable() {
+ const input = document.getElementById("search-input").value.toLowerCase();
+ const table = document.getElementById("personnel-table");
+ const rows = Array.from(table.rows);
+
+ rows.forEach(row => {
+ const cells = Array.from(row.cells);
+ const match = cells[0].textContent.toLowerCase().includes(input) ||
+ cells[1].textContent.toLowerCase().includes(input);
+ row.style.display = match ? "" : "none";
+ });
+ }
+
+ function openModal(nom, prenom, statut, intervention) {
+ document.getElementById("nom").value = nom;
+ document.getElementById("prenom").value = prenom;
+ document.getElementById("statut").value = statut;
+ document.getElementById("intervention").value = intervention;
+ document.getElementById("myModal").style.display = "block";
+ }
+
+ function closeModal() {
+ document.getElementById("myModal").style.display = "none";
+ }
+
+ function supprimerPersonnel(nom, prenom) {
+ if (confirm(`Êtes-vous sûr de vouloir supprimer ${prenom} ${nom} ?`)) {
+ const row = event.target.closest("tr");
+ row.parentNode.removeChild(row);
+ }
+ }
+
+ function voirDetails(nom, prenom, statut, intervention) {
+ // Remplir les détails du personnel ici
+ document.getElementById("detail-info").textContent = `Nom: ${nom}, Prénom: ${prenom}, Statut: ${statut}, Dernière Intervention: ${intervention}`;
+ document.getElementById("heures-a-payer").textContent = "10 heures"; // Remplacer par les vraies données
+ document.getElementById("corrections-list").innerHTML = "<li><a href=\"#\">Pas assez d'heures</a> : 19/10/2024</li>"; // Remplacer par les vraies données
+ document.getElementById("documents-list").innerHTML = "<li><a href=\"#\">Contrat de travail</a></li><li><a href=\"#\">CV</a></li><li><a href=\"#\">Diplôme</a></li><li><a href=\"#\">Justificatif d'expérience</a></li>"; // Remplacer par les vraies données
+ document.getElementById("statut-detail").textContent = statut;
+ document.getElementById("historique-list").innerHTML = "<li>CM - SCR - 19/10/2024 - 12h30</li><li>TP - DEV - 19/10/2024 - 15h30</li>"; // Remplacer par les vraies données
+ document.getElementById("coordonnees").textContent = `${prenom}.${nom}@u-pec.fr`;
+ document.getElementById("detailModal").style.display = "block";
+ }
+
+ function closeDetailModal() {
+ document.getElementById("detailModal").style.display = "none";
+ }
+
+ function ajouterPersonnel() {
+ // Logic to add personnel goes here
+ alert("Fonctionnalité à venir !");
+ }
+
+ function lancerProcedurePaiement() {
+ alert("Lancement de la procédure de paiement...");
+ // Logic to launch payment process goes here
+ }
+
+ function modifierHeures() {
+ alert("Modification des heures...");
+ // Logic to modify hours goes here
+ }
+ </script>
+</body>
+
+</html>
diff --git a/MaquetteWEB/html/RH/mes-informations.html b/MaquetteWEB/html/RH/mes-informations.html
new file mode 100644
index 0000000..6beb171
--- /dev/null
+++ b/MaquetteWEB/html/RH/mes-informations.html
@@ -0,0 +1,518 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mes Informations</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/RH/rh.css">
+ <link rel="stylesheet" href="../../css/RH/style.css">
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #0f431f;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #0f431f;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #0a2f15;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #0f431f;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #0f431f;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #0f431f;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #4a0777; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #4a0777; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #0f431f;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #0f431f;
+ }
+
+ /* Sablier de chargement */
+ .loading-text {
+ font-size: 1.2em;
+ color: #555;
+ }
+ .loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+
+ .file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+ }
+
+ .file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+ }
+
+ .file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+ }
+
+ .document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+ }
+
+
+
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./rh.html">Accueil</a>
+ <a href="./gestion_personnel.html">Gestion du personnel</a>
+ <a href="./candidature.html">Candidatures</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">Alice BERGER</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="container">
+ <!-- Section Informations Personnelles -->
+ <div class="info-card">
+ <h2>Informations Personnelles</h2>
+ <table class="info-table">
+ <tr>
+ <th>Nom Complet</th>
+ <td><input type="text" id="nom" value="Alice BERGER" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Date de Naissance</th>
+ <td><input type="text" id="date_naissance" value="15 Mars 1985" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Ville de Naissance</th>
+ <td><input type="text" id="ville_naissance" value="Paris" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Adresse</th>
+ <td><input type="text" id="adresse" value="12 Rue de la République, 75000 Paris"></td>
+ </tr>
+ <tr>
+ <th>E-mail</th>
+ <td><input type="email" id="email" value="alice.berger@u-pec.fr"></td>
+ </tr>
+ <tr>
+ <th>Téléphone</th>
+ <td><input type="tel" id="telephone" value="07 69 55 14 55"></td>
+ </tr>
+ <tr>
+ <th>Numéro de Sécurité Sociale</th>
+ <td><input type="text" id="numero_securite" value="2 85 03 75 123 456 78" class="non-editable" readonly></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveInfo()">Sauvegarder les modifications</button>
+ </div>
+
+ <!-- Section Informations Bancaires -->
+ <div class="info-card">
+ <h2>Informations Bancaires</h2>
+ <table class="info-table">
+ <tr>
+ <th>Banque</th>
+ <td><input type="text" id="banque" value="BNP Paribas"></td>
+ </tr>
+ <tr>
+ <th>IBAN</th>
+ <td><input type="text" id="iban" value="FR76 3000 6000 0112 3456 7890 189"></td>
+ </tr>
+ <tr>
+ <th>BIC</th>
+ <td><input type="text" id="bic" value="BNPAFRPPXXX"></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveBankInfo()">Sauvegarder les informations bancaires</button>
+ </div>
+
+ <!-- Section Documents -->
+ <div class="info-card">
+ <h2>Documents Officiels</h2>
+ <table class="info-table">
+ <tr>
+ <th>Pièce d'identité</th>
+ <td><a href="../../media/documents/VACATAIRE/CarteIdentite.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Contrat de Travail</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Justificatif de Domicile</th>
+ <td><a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">Télécharger</a></td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <h2>Envoyer un Document</h2>
+ <form id="uploadForm" onsubmit="return false;">
+ <label for="documentType">Type de document :</label>
+ <select id="documentType" class="document-select">
+ <option value="" disabled selected>Sélectionnez un type de document</option>
+ <option value="carte_identite">Carte d'Identité</option>
+ <option value="contrat_travail">Contrat de Travail</option>
+ <option value="justificatif_domicile">Justificatif de Domicile</option>
+ <option value="releve_bancaire">Relevé Bancaire</option>
+ <option value="certificat_medical">Certificat Médical</option>
+ <option value="avis_imposition">Avis d'Imposition</option>
+ <option value="permis_conduire">Permis de Conduire</option>
+ <option value="passeport">Passeport</option>
+ <option value="facture">Facture</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="newDocument" class="file-upload-label">
+ Choisir un fichier
+ </label>
+ <input type="file" id="newDocument" accept=".pdf,.doc,.docx" style="display: none;" onchange="updateFileName()">
+ <span id="fileName" class="file-name">Aucun fichier choisi</span>
+ <button class="action-btn" onclick="uploadDocument()">Envoyer le document</button>
+ </form>
+ </div>
+
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Footer -->
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="../mentions_legales.html" style="color: white;">Mentions légales</a></p>
+</div>
+
+<script>
+ // Sauvegarder les informations personnelles dans le localStorage
+ function saveInfo() {
+ const ville_naissance = document.getElementById('ville_naissance').value;
+ const adresse = document.getElementById('adresse').value;
+ const email = document.getElementById('email').value;
+ const email_pro = document.getElementById('email-pro').value;
+ const telephone = document.getElementById('telephone').value;
+ const numero_securite = document.getElementById('numero_securite').value;
+ const statut = document.getElementById('statut').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('ville_naissance', ville_naissance);
+ localStorage.setItem('adresse', adresse);
+ localStorage.setItem('email', email);
+ localStorage.setItem('email-pro', email_pro);
+ localStorage.setItem('telephone', telephone);
+ localStorage.setItem('numero_securite', numero_securite);
+ localStorage.setItem('statut', statut);
+
+ alert('Informations personnelles sauvegardées !');
+ }
+
+ // Sauvegarder les informations bancaires dans le localStorage
+ function saveBankInfo() {
+ const banque = document.getElementById('banque').value;
+ const iban = document.getElementById('iban').value;
+ const bic = document.getElementById('bic').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('banque', banque);
+ localStorage.setItem('iban', iban);
+ localStorage.setItem('bic', bic);
+
+ alert('Informations bancaires sauvegardées !');
+ }
+
+ // Récupérer les informations depuis le localStorage (si elles existent)
+ function loadInfo() {
+ if(localStorage.getItem('ville_naissance')) {
+ document.getElementById('ville_naissance').value = localStorage.getItem('ville_naissance');
+ }
+ if(localStorage.getItem('adresse')) {
+ document.getElementById('adresse').value = localStorage.getItem('adresse');
+ }
+ if(localStorage.getItem('email')) {
+ document.getElementById('email').value = localStorage.getItem('email');
+ }
+ if(localStorage.getItem('email-pro')) {
+ document.getElementById('email-pro').value = localStorage.getItem('email-pro');
+ }
+ if(localStorage.getItem('telephone')) {
+ document.getElementById('telephone').value = localStorage.getItem('telephone');
+ }
+ if(localStorage.getItem('numero_securite')) {
+ document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
+ }
+ if(localStorage.getItem('statut')) {
+ document.getElementById('statut').value = localStorage.getItem('statut');
+ }
+
+ // Informations bancaires
+ if(localStorage.getItem('banque')) {
+ document.getElementById('banque').value = localStorage.getItem('banque');
+ }
+ if(localStorage.getItem('iban')) {
+ document.getElementById('iban').value = localStorage.getItem('iban');
+ }
+ if(localStorage.getItem('bic')) {
+ document.getElementById('bic').value = localStorage.getItem('bic');
+ }
+ }
+
+ // Charger les informations quand la page est chargée
+ window.onload = loadInfo;
+
+ function uploadDocument() {
+ const documentType = document.getElementById('documentType').value;
+ const fileInput = document.getElementById('newDocument').files[0];
+
+ if (!documentType) {
+ alert("Veuillez sélectionner un type de document.");
+ return;
+ }
+
+ if (!fileInput) {
+ alert("Veuillez choisir un fichier à envoyer.");
+ return;
+ }
+
+ // Simulation d'un envoi réussi (ajoutez votre logique d'envoi ici)
+ document.getElementById('fileName').textContent = "Aucun fichier choisi"; // Réinitialiser le nom de fichier
+
+ // Afficher le document en attente de traitement
+ const documentsTable = document.querySelector('.info-table'); // La table où afficher les documents
+ const newRow = documentsTable.insertRow(-1); // Insérer une nouvelle ligne à la fin
+
+ // Ajouter des cellules pour le type de document et le statut
+ newRow.innerHTML = `<th>${documentType.replace(/_/g, ' ').toUpperCase()}</th><td>En attente de traitement</td>`;
+
+ // Ouvrir le pop-up de confirmation
+ document.getElementById('popup').style.display = 'block'; // Ouvrir le pop-up
+ }
+
+
+ function updateFileName() {
+ const fileInput = document.getElementById('newDocument');
+ const fileNameDisplay = document.getElementById('fileName');
+ if (fileInput.files.length > 0) {
+ fileNameDisplay.textContent = fileInput.files[0].name;
+ } else {
+ fileNameDisplay.textContent = 'Aucun fichier choisi';
+ }
+}
+
+
+ // Fermer la pop-up
+ function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/RH/rh.html b/MaquetteWEB/html/RH/rh.html
new file mode 100644
index 0000000..f468967
--- /dev/null
+++ b/MaquetteWEB/html/RH/rh.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dashboard Vacataire</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
+ <style>
+ .header {
+ background-color: #0f431f;
+ color: white;
+ padding: 10px 0;
+ text-align: center;
+ }
+ .section-header {
+ background-color: #f8f8f8;
+ padding: 10px;
+ border-left: 5px solid #0f431f;
+ margin-bottom: 20px;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ margin-top: 20px;
+ background-color: #0f431f;
+ color: white;
+ }
+ .btn {
+ padding: 10px 15px;
+ background-color: #0f431f;
+ color: white;
+ text-decoration: none;
+ border-radius: 5px;
+ display: inline-block;
+ }
+ .btn:hover {
+ background-color: #0b3116;
+ }
+ .summary, .upcoming-sessions, .important-documents, .feedback, .events {
+ margin-bottom: 20px;
+ padding: 15px;
+ border: 1px solid #ccc;
+ }
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <div class="categories">
+ <a href="./rh.html">Accueil</a>
+ <a href="./gestion_personnel.html">Gestion du personnel</a>
+ <a href="./candidature.html">Candidatures</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <div class="user-section">
+ <div class="user-name">Alice BERGER</div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
+ </div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Validation de Candidature :</strong> Une nouvelle candidature a été soumise pour l'offre de vacation n°383. Veuillez la consulter et valider dans les plus brefs délais dans (la candidature expire dans 26 jours) : <a href="./candidature.html">Candidatures</a>.</p>
+ </div>
+ <div class="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Demande de paiement :</strong> Le service financier a procédé au paiement de Jean DUPONT. Vous pouvez consulter les détails : <a href="gestion_personnel.html">Gestion du personnel</a>.</p>
+ </div>
+ </div>
+
+ <!-- Résumé des Heures -->
+ <div class="section-header">
+ <h2>Résumé des Heures</h2>
+ </div>
+ <div class="summary">
+ <p><strong>Heures Travaillées :</strong> 120 heures</p>
+ <p><strong>Heures à Payer :</strong> 30 heures</p>
+ <p><a href="./gestion_personnel.html" class="btn">Voir Détails</a></p>
+ </div>
+
+
+ <!-- Événements à Venir -->
+ <div class="section-header">
+ <h2>Événements à Venir</h2>
+ </div>
+ <div class="events">
+ <ul>
+ <li>Réunion des RH : 30 Octobre 2024</li>
+ <li>Formation sur l'Utilisation des Outils Numériques : 5 Novembre 2024</li>
+ </ul>
+ </div>
+
+
+ <!-- Script pour gérer l'affichage des notifications -->
+ <script>
+ const notificationsContainer = document.getElementById('notifications-container');
+ const notificationsSection = document.getElementById('notifications-section');
+
+ // Vérifiez si le conteneur des notifications est vide
+ if (notificationsContainer.childElementCount === 0) {
+ notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
+ }
+ </script>
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+ </div>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/VACATAIRE/mes-heures.html b/MaquetteWEB/html/VACATAIRE/mes-heures.html
new file mode 100644
index 0000000..9b9ec78
--- /dev/null
+++ b/MaquetteWEB/html/VACATAIRE/mes-heures.html
@@ -0,0 +1,474 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Suivi des Heures</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="stylesheet" href="../../css/VACATAIRE/mes-heures.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./vacataire.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Maxime MENAULT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+ <div class="dashboard-container">
+
+ <div class="section-header">
+ <h2>Offres de vacation</h2>
+ </div>
+ <div class="proposition-container">
+ <table class="proposition-table" id="proposalTable">
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Formation</th>
+ <th>Nom du Cours</th>
+ <th>Semestre</th>
+ <th>Type d'intervention</th>
+ <th>Volume Prévisionnel</th>
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Décembre 2024</td>
+ <td>BUT1</td>
+ <td>Développement Web</td>
+ <td>1</td>
+ <td>CM, TD</td>
+ <td>8h</td>
+ <td>
+ <button class="accept-button" onclick="acceptProposal(this)">Postuler</button>
+ <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ </td>
+ </tr>
+ <tr>
+ <td>Janvier 2025</td>
+ <td>BUT2</td>
+ <td>SCR</td>
+ <td>3</td>
+ <td>TD, TP</td>
+ <td>6h</td>
+ <td>
+ <button class="accept-button" onclick="acceptProposal(this)">Postuler</button>
+ <button class="refuse-button" onclick="confirmRefusal(this)">Refuser</button>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+
+ <!-- Popup pour pièces justificatives -->
+ <div id="justificatifForm" class="justificatif-form popup">
+ <h3>Téléchargez vos pièces justificatives</h3>
+ <p>Veuillez télécharger le document suivant :</p>
+ <ul>
+ <li>Contrat de travail actuel</li>
+ </ul>
+ <input type="file" id="justificatif" name="justificatif" required>
+ <button id="submitJustificatif" onclick="submitJustificatif()">Soumettre</button>
+ <button onclick="closeJustificatifPopup()">Annuler</button>
+ </div>
+
+ <div class="section-header">
+ <h2>Prochaines heures</h2>
+ </div>
+ <div class="validated-hours-container card">
+ <table class="validated-hours-table" id="validatedTable">
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Formation</th>
+ <th>Nom du Cours</th>
+ <th>Semestre</th>
+ <th>Type d'intervention</th>
+ <th>Volume Prévisionnel</th>
+ <th>Statut</th> <!-- Nouvelle colonne pour le statut -->
+ </tr>
+ </thead>
+ <tbody id="validatedTableBody">
+ <tr>
+ <td>Décembre 2024</td>
+ <td>BUT1</td>
+ <td>Développement Web</td>
+ <td>1</td>
+ <td>CM, TD</td>
+ <td>8h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Janvier 2025</td>
+ <td>BUT2</td>
+ <td>SCR</td>
+ <td>3</td>
+ <td>TD, TP</td>
+ <td>6h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Février 2025</td>
+ <td>BUT3</td>
+ <td>Base de données</td>
+ <td>5</td>
+ <td>CM</td>
+ <td>10h</td>
+ <td class="status-valide">Validé</td> <!-- Statut -->
+ </tr>
+ <tr>
+ <td>Mars 2025</td>
+ <td>BUT3</td>
+ <td>IA et Machine Learning</td>
+ <td>6</td>
+ <td>TD, TP</td>
+ <td>12h</td>
+ <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
+ </tr>
+ <tr>
+ <td>Avril 2025</td>
+ <td>BUT2</td>
+ <td>Réseaux</td>
+ <td>4</td>
+ <td>CM, TD</td>
+ <td>4h</td>
+ <td class="status-attente">En attente de traitement</td> <!-- Statut en attente -->
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="section-header">
+ <h2>Historique des Heures Travaillées</h2>
+ </div>
+
+ <div class="card">
+ <div class="table-container">
+ <table id="hoursTable">
+ <thead>
+ <tr>
+ <th onclick="sortTable(0)">Date ▲</th> <!-- Triable -->
+ <th>Matière</th>
+ <th>Type d'Intervention</th>
+ <th onclick="sortTable(3)">Volume Horaire ▲</th> <!-- Triable -->
+ <th onclick="sortTable(4)">Heures Travaillées ▲</th> <!-- Triable -->
+ <th>Actions</th>
+ </tr>
+ </thead>
+ <tbody id="hoursTableBody">
+ <!-- Rows will be generated dynamically with JavaScript -->
+ </tbody>
+ </table>
+ </div>
+
+
+ <!-- Pagination Buttons -->
+ <div id="pagination">
+ <button onclick="prevPage()">Précédent</button>
+ <span id="pageNumber"></span>
+ <button onclick="nextPage()">Suivant</button>
+ </div>
+ </div>
+
+ <div class="section-header">
+ <h2>Graphique des Heures Travaillées</h2>
+ </div>
+ <div class="chart-container">
+ <canvas id="hoursChart"></canvas>
+ </div>
+
+
+ <div class="section-header">
+ <h2>Signalement de problèmes d'heures</h2>
+ </div>
+ <div class="contact-form">
+ <form id="contactForm">
+ <label for="probleme">Type de problème :</label>
+ <select id="probleme" name="probleme" required>
+ <option value="" disabled selected>Choisir un problème</option>
+ <option value="non_paye">Il manque des heures dans mon historique</option>
+ <option value="montant_incorrect">Il y a des heures en trop</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="commentaire">Commentaires :</label>
+ <input type="text" id="commentaire" name="commentaire" placeholder="Décrivez votre problème" required>
+
+ <button type="submit">Soumettre</button>
+ </form>
+ </div>
+ </div>
+
+ <!-- Popup pour les détails du cours -->
+ <div id="infoPopup" class="popup">
+ <h4>Détails du la journée</h4>
+ <p><strong>Promotion :</strong> <span id="promotion"></span></p>
+ <p><strong>Groupe(s) :</strong> <span id="groupe"></span></p>
+ <p><strong>Salle :</strong> <span id="salle"></span></p>
+ <button onclick="closeInfoPopup()">Fermer</button>
+ </div>
+
+ <!-- Popup pour succès de l'envoi du formulaire -->
+ <div id="popup" class="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Success Icon">
+ <h4>Signalement Envoyé !</h4>
+ <p>Merci pour votre signalement. Nous allons traiter votre demande dans les plus brefs délais.</p>
+ <button onclick="closePopup()">Fermer</button>
+ </div>
+
+ <!-- Popup de confirmation de refus -->
+ <div id="confirmationPopup" class="confirmation-popup">
+ <div class="confirmation-content">
+ <h4>Confirmer le Refus</h4>
+ <p>Êtes-vous sûr de vouloir refuser cette proposition d'heure ?</p>
+ <button id="confirmRefusalButton" onclick="confirmRefusalAction()">Confirmer</button>
+ <button onclick="closeConfirmationPopup()">Annuler</button>
+ </div>
+ </div>
+
+ <div id="infoPopup" class="popup">
+ <h4>Détails de l'intervention</h4>
+ <p><strong>Promotion :</strong> <span id="popupPromotion"></span></p>
+ <p><strong>Type de Cours :</strong> <span id="popupTypeCours"></span></p>
+ <p><strong>ETD :</strong> <span id="popupETD"></span></p>
+ <p><strong>Montant :</strong> <span id="popupMontant"></span></p>
+ <p><strong>Matière :</strong> <span id="popupMatiere"></span></p>
+ <button onclick="closeInfoPopup()">Fermer</button>
+ </div>
+
+ <div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
+ </div>
+
+ <script>
+ // Données du graphique
+ const ctx = document.getElementById('hoursChart').getContext('2d');
+ const hoursChart = new Chart(ctx, {
+ type: 'bar',
+ data: {
+ labels: ['Semaine 1', 'Semaine 2', 'Semaine 3', 'Semaine 4'],
+ datasets: [{
+ label: 'Heures Travaillées',
+ data: [5, 10, 7, 8],
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ borderColor: 'rgba(75, 192, 192, 1)',
+ borderWidth: 1
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true,
+ title: {
+ display: true,
+ text: 'Heures'
+ }
+ },
+ x: {
+ title: {
+ display: true,
+ text: 'Semaines'
+ }
+ }
+ }
+ }
+ });
+
+ let proposalToRemove; // Variable pour stocker la proposition à supprimer
+
+ // Fonctions pour gérer l'acceptation et le refus
+ function acceptProposal(button) {
+ document.getElementById("justificatifForm").style.display = "block";
+ proposalToRemove = button.closest('tr'); // Stocker la proposition à supprimer
+ }
+
+ function confirmRefusal(button) {
+ proposalToRemove = button.closest('tr');
+ document.getElementById("confirmationPopup").style.display = "flex";
+ }
+
+ function confirmRefusalAction() {
+ proposalToRemove.remove();
+ closeConfirmationPopup();
+ }
+
+ function closeConfirmationPopup() {
+ document.getElementById("confirmationPopup").style.display = "none";
+ }
+
+ function submitJustificatif() {
+ alert("Vos pièces justificatives ont été soumises avec succès.");
+ closeJustificatifPopup(); // Cacher le formulaire
+
+ // Ajouter l'heure validée à la section des heures validées
+ const validatedTableBody = document.getElementById("validatedTableBody");
+ const newRow = document.createElement("tr");
+ const periode = proposalToRemove.cells[0].innerText; // Récupérer la période
+ const formation = proposalToRemove.cells[1].innerText; // Récupérer la formation
+ const nomCours = proposalToRemove.cells[2].innerText; // Récupérer le nom du cours
+ const semestre = proposalToRemove.cells[3].innerText; // Récupérer le semestre
+ const typeIntervention = proposalToRemove.cells[4].innerText; // Récupérer le type d'intervention
+ const volumePrevisionnel = proposalToRemove.cells[5].innerText; // Récupérer le volume prévisionnel
+
+ newRow.innerHTML = `<td>${periode}</td><td>${formation}</td><td>${nomCours}</td><td>${semestre}</td><td>${typeIntervention}</td><td>${volumePrevisionnel}</td><td class="status-attente">En attente de traitement</td> `;
+ validatedTableBody.appendChild(newRow);
+ proposalToRemove.remove(); // Supprimer la proposition de l'affichage
+ }
+
+ function closeJustificatifPopup() {
+ document.getElementById("justificatifForm").style.display = "none";
+ }
+
+ function getRandomBUT() {
+ return "BUT" + Math.floor(Math.random() * 3 + 1); // Génère un nombre aléatoire entre 1 et 3
+ }
+
+ // Gestion des popups
+ function showDetails(promotion, groupes, salle) {
+ document.getElementById("promotion").innerText = promotion;
+ document.getElementById("groupe").innerText = groupes;
+ document.getElementById("salle").innerText = salle;
+ document.getElementById("infoPopup").style.display = "block";
+ }
+
+ function closeInfoPopup() {
+ document.getElementById("infoPopup").style.display = "none";
+ }
+
+ function closePopup() {
+ document.getElementById("popup").style.display = "none";
+ }
+
+ // Gestion de l'envoi du formulaire de contact
+ document.getElementById('contactForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ document.getElementById("popup").style.display = "block";
+ });
+ </script>
+ <script>
+ // Exemple d'un grand nombre d'heures pour l'historique
+ const hoursData = [
+ { date: '01/02/2024', matiere: 'SCR', type: 'CM', volume: '3 ETD', worked: '4h' },
+ { date: '05/02/2024', matiere: 'Web Dev', type: 'TP', volume: '2 ETD', worked: '3h' },
+ { date: '10/02/2024', matiere: 'Mathématiques', type: 'TD', volume: '4 ETD', worked: '5h' },
+ { date: '15/02/2024', matiere: 'IA', type: 'CM', volume: '2 ETD', worked: '2h' },
+ { date: '20/02/2024', matiere: 'Python', type: 'TP', volume: '5 ETD', worked: '7h' },
+ // Ajoutez ici un grand nombre de données...
+ { date: '01/03/2024', matiere: 'Réseaux', type: 'TD', volume: '3 ETD', worked: '4h' },
+ { date: '10/03/2024', matiere: 'Big Data', type: 'CM', volume: '5 ETD', worked: '6h' },
+ // Plusieurs lignes (simulons jusqu'à 50 lignes ou plus)...
+ { date: '01/04/2024', matiere: 'Dev Mobile', type: 'TP', volume: '2 ETD', worked: '3h' },
+ { date: '10/04/2024', matiere: 'Sécurité', type: 'CM', volume: '3 ETD', worked: '5h' },
+ ];
+
+ // Variables pour la pagination
+ const rowsPerPage = 5;
+ let currentPage = 1;
+ const totalRows = hoursData.length;
+ const totalPages = Math.ceil(totalRows / rowsPerPage);
+
+ // Fonction pour afficher la table avec pagination
+ function displayTable(page) {
+ const start = (page - 1) * rowsPerPage;
+ const end = start + rowsPerPage;
+ const tableBody = document.getElementById('hoursTableBody');
+ tableBody.innerHTML = ''; // Clear existing rows
+
+ const pageData = hoursData.slice(start, end);
+ pageData.forEach(row => {
+ const tr = document.createElement('tr');
+ tr.innerHTML = `<td>${row.date}</td>
+ <td>${row.matiere}</td>
+ <td>${row.type}</td>
+ <td>${row.volume}</td>
+ <td>${row.worked}</td>
+ <td><span class="details-button" onclick="showDetails('BUT2', '1,2,3', '140')">Plus d'infos</span></td>`;
+ tableBody.appendChild(tr);
+ });
+
+ document.getElementById('pageNumber').innerText = `Page ${page} sur ${totalPages}`;
+ }
+
+ // Fonctions pour naviguer dans la pagination
+ function nextPage() {
+ if (currentPage < totalPages) {
+ currentPage++;
+ displayTable(currentPage);
+ }
+ }
+
+ function prevPage() {
+ if (currentPage > 1) {
+ currentPage--;
+ displayTable(currentPage);
+ }
+ }
+
+ // Fonction de tri pour les colonnes
+ function sortTable(n) {
+ const table = document.getElementById('hoursTable');
+ let rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
+ switching = true;
+ dir = "asc"; // Set the sorting direction to ascending
+ while (switching) {
+ switching = false;
+ rows = table.rows;
+ for (i = 1; i < (rows.length - 1); i++) {
+ shouldSwitch = false;
+ x = rows[i].getElementsByTagName("TD")[n];
+ y = rows[i + 1].getElementsByTagName("TD")[n];
+ if (dir === "asc") {
+ if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ } else if (dir === "desc") {
+ if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
+ shouldSwitch = true;
+ break;
+ }
+ }
+ }
+ if (shouldSwitch) {
+ rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
+ switching = true;
+ switchcount++;
+ } else {
+ if (switchcount === 0 && dir === "asc") {
+ dir = "desc";
+ switching = true;
+ }
+ }
+ }
+ }
+
+ // Initial load
+ displayTable(currentPage);
+
+ </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/MaquetteWEB/html/VACATAIRE/mes-informations.html b/MaquetteWEB/html/VACATAIRE/mes-informations.html
new file mode 100644
index 0000000..a0fe0de
--- /dev/null
+++ b/MaquetteWEB/html/VACATAIRE/mes-informations.html
@@ -0,0 +1,554 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mes Informations</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <style>
+ body {
+ font-family: Arial, sans-serif;
+ background-color: #f4f4f4;
+ margin: 0;
+ padding: 0;
+ }
+ .container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #4a0777;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #4a0777;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #370559;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #4a0777;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+.header {
+ background-color: #370559;
+ color: white;
+ padding: 10px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ position: relative;
+}
+
+.logo-container img {
+ width: 200px;
+ height: 50px;
+ cursor: pointer;
+}
+.categories {
+ display: flex;
+ gap: 15px;
+ margin-left: 50px;
+}
+.categories a {
+ color: white;
+ text-decoration: none;
+ font-weight: bold;
+}
+.categories a:hover {
+ text-decoration: underline;
+}
+.user-section {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+}
+.user-name {
+ margin-right: 15px;
+ font-size: 16px;
+ font-weight: bold;
+}
+.logout-container {
+ display: flex;
+ align-items: center;
+}
+.logout-container img {
+ width: 25px;
+ height: 25px;
+ margin-left: 10px;
+ cursor: pointer;
+}
+
+.container {
+ max-width: 1200px;
+ margin: auto;
+ padding: 20px;
+ }
+ .info-card {
+ background-color: white;
+ padding: 20px;
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+ margin-bottom: 20px;
+ border-radius: 8px;
+ }
+ .info-card h2 {
+ border-bottom: 2px solid #4a0777;
+ padding-bottom: 10px;
+ margin-bottom: 20px;
+ }
+ .info-table {
+ width: 100%;
+ border-collapse: collapse;
+ margin-bottom: 20px;
+ }
+ .info-table th, .info-table td {
+ padding: 12px;
+ text-align: left;
+ border-bottom: 1px solid #ddd;
+ }
+ .info-table th {
+ background-color: #f8f8f8;
+ color: #333;
+ }
+ .info-table input {
+ width: 100%;
+ padding: 8px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ }
+ .action-btn {
+ display: inline-block;
+ padding: 10px 20px;
+ color: white;
+ background-color: #4a0777;
+ text-decoration: none;
+ border-radius: 5px;
+ margin: 10px 0;
+ cursor: pointer;
+ }
+ .action-btn:hover {
+ background-color: #370559;
+ }
+ .footer {
+ text-align: center;
+ padding: 10px 0;
+ background-color: #4a0777;
+ color: white;
+ margin-top: 40px;
+ }
+ .non-editable {
+ background-color: #e9e9e9;
+ }
+
+ /* Styles pour le popup */
+ .popup {
+ display: none;
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background-color: #fff; /* Blanc */
+ padding: 20px;
+ border: 2px solid #4a0777; /* Bordure couleur thème */
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+ z-index: 1000;
+ border-radius: 10px;
+ text-align: center;
+ width: 300px; /* Largeur fixe */
+ }
+ .popup h4 {
+ margin: 0 0 15px 0;
+ font-size: 1.5em;
+ color: #4a0777; /* Couleur de texte */
+ }
+ .popup p {
+ font-size: 1.2em;
+ margin: 5px 0; /* Espacement entre les lignes */
+ color: #333; /* Couleur de texte */
+ }
+ .popup button {
+ background-color: #4a0777;
+ color: white;
+ border: none;
+ padding: 10px;
+ cursor: pointer;
+ border-radius: 5px; /* Arrondir les coins */
+ margin-top: 15px; /* Espacement au-dessus du bouton */
+ }
+ .popup button:hover {
+ background-color: #370559;
+ }
+
+ /* Sablier de chargement */
+ .loading-text {
+ font-size: 1.2em;
+ color: #555;
+ }
+ .loading-icon {
+ margin-left: 10px;
+ width: 20px;
+ height: 20px;
+ vertical-align: middle;
+ }
+
+ .file-upload-label {
+ display: inline-block;
+ padding: 10px 15px;
+ cursor: pointer;
+ background-color: #e0e0e0; /* Couleur de fond gris clair */
+ color: #333; /* Couleur du texte gris foncé */
+ border-radius: 5px;
+ margin-bottom: 10px; /* Espacement entre le label et le bouton */
+ text-align: center; /* Centrer le texte */
+ border: 1px solid #ccc; /* Bordure grise */
+ transition: background-color 0.3s; /* Transition pour l'effet hover */
+ }
+
+ .file-upload-label:hover {
+ background-color: #d0d0d0; /* Couleur de fond au survol */
+ }
+
+ .file-name {
+ display: block;
+ margin-top: 5px; /* Espacement entre le label et le nom du fichier */
+ color: #555; /* Couleur du texte du nom de fichier */
+ }
+
+ .document-select {
+ width: 100%; /* Prend toute la largeur */
+ padding: 10px; /* Espacement interne */
+ border: 1px solid #ddd; /* Bordure grise */
+ border-radius: 4px; /* Coins arrondis */
+ margin-bottom: 10px; /* Espacement sous le sélecteur */
+ font-size: 16px; /* Taille du texte */
+ color: #333; /* Couleur du texte */
+ }
+
+
+
+ </style>
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./vacataire.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Maxime MENAULT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="container">
+ <!-- Section Informations Personnelles -->
+ <div class="info-card">
+ <h2>Informations Personnelles</h2>
+ <table class="info-table">
+ <tr>
+ <th>Nom Complet</th>
+ <td><input type="text" id="nom" value="Maxime MENAULT" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Date de Naissance</th>
+ <td><input type="text" id="date_naissance" value="15 Mars 1985" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Ville de Naissance</th>
+ <td><input type="text" id="ville_naissance" value="Paris" class="non-editable" readonly></td>
+ </tr>
+ <tr>
+ <th>Adresse</th>
+ <td><input type="text" id="adresse" value="12 Rue de la République, 75000 Paris"></td>
+ </tr>
+ <tr>
+ <th>E-mail (personnel)</th>
+ <td><input type="email" id="email" value="maxime.menault@gmail.com"></td>
+ </tr>
+ <tr>
+ <th>E-mail (professionnel)</th>
+ <td><input type="email" id="email-pro" value="maxime.menault@u-pec.fr"></td>
+ </tr>
+ <tr>
+ <th>Téléphone</th>
+ <td><input type="tel" id="telephone" value="07 69 55 14 55"></td>
+ </tr>
+ <tr>
+ <th>Numéro de Sécurité Sociale</th>
+ <td><input type="text" id="numero_securite" value="1 85 03 75 123 456 78" class="non-editable" readonly></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveInfo()">Sauvegarder les modifications</button>
+ </div>
+
+ <!-- Section Informations Bancaires -->
+ <div class="info-card">
+ <h2>Informations Bancaires</h2>
+ <table class="info-table">
+ <tr>
+ <th>Banque</th>
+ <td><input type="text" id="banque" value="BNP Paribas"></td>
+ </tr>
+ <tr>
+ <th>IBAN</th>
+ <td><input type="text" id="iban" value="FR76 3000 6000 0112 3456 7890 189"></td>
+ </tr>
+ <tr>
+ <th>BIC</th>
+ <td><input type="text" id="bic" value="BNPAFRPPXXX"></td>
+ </tr>
+ </table>
+ <button class="action-btn" onclick="saveBankInfo()">Sauvegarder les informations bancaires</button>
+ </div>
+
+ <!-- Section Documents -->
+ <div class="info-card">
+ <h2>Documents Officiels</h2>
+ <table class="info-table">
+ <tr>
+ <th>Pièce d'identité</th>
+ <td><a href="../../media/documents/VACATAIRE/CarteIdentite.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Contrat de Travail (emploi principal)</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+
+ <tr>
+ <th>Contrat de Travail (vacation)</th>
+ <td><a href="../../media/documents/VACATAIRE/ContratDeTravail.pdf">Télécharger</a></td>
+ </tr>
+ <tr>
+ <th>Justificatif de Domicile</th>
+ <td><a href="../../media/documents/VACATAIRE/JustificatifDomicile.pdf">Télécharger</a></td>
+ </tr>
+ </table>
+ </div>
+
+ <div class="info-card">
+ <h2>Envoyer un Document</h2>
+ <form id="uploadForm" onsubmit="return false;">
+ <label for="documentType">Type de document :</label>
+ <select id="documentType" class="document-select">
+ <option value="" disabled selected>Sélectionnez un type de document</option>
+ <option value="carte_identite">Carte d'Identité</option>
+ <option value="contrat_travail">Contrat de Travail</option>
+ <option value="justificatif_domicile">Justificatif de Domicile</option>
+ <option value="releve_bancaire">Relevé Bancaire</option>
+ <option value="certificat_medical">Certificat Médical</option>
+ <option value="avis_imposition">Avis d'Imposition</option>
+ <option value="permis_conduire">Permis de Conduire</option>
+ <option value="passeport">Passeport</option>
+ <option value="facture">Facture</option>
+ <option value="autre">Autre</option>
+ </select>
+
+ <label for="newDocument" class="file-upload-label">
+ Choisir un fichier
+ </label>
+ <input type="file" id="newDocument" accept=".pdf,.doc,.docx" style="display: none;" onchange="updateFileName()">
+ <span id="fileName" class="file-name">Aucun fichier choisi</span>
+ <button class="action-btn" onclick="uploadDocument()">Envoyer le document</button>
+ </form>
+ </div>
+
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre document a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Footer -->
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés | <a href="html/mentions_legales.html" style="color: white;">Mentions légales</a></p>
+</div>
+
+<script>
+ // Sauvegarder les informations personnelles dans le localStorage
+ function saveInfo() {
+ const ville_naissance = document.getElementById('ville_naissance').value;
+ const adresse = document.getElementById('adresse').value;
+ const email = document.getElementById('email').value;
+ const email_pro = document.getElementById('email-pro').value;
+ const telephone = document.getElementById('telephone').value;
+ const numero_securite = document.getElementById('numero_securite').value;
+ const statut = document.getElementById('statut').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('ville_naissance', ville_naissance);
+ localStorage.setItem('adresse', adresse);
+ localStorage.setItem('email', email);
+ localStorage.setItem('email-pro', email_pro);
+ localStorage.setItem('telephone', telephone);
+ localStorage.setItem('numero_securite', numero_securite);
+ localStorage.setItem('statut', statut);
+
+ alert('Informations personnelles sauvegardées !');
+ }
+
+ // Sauvegarder les informations bancaires dans le localStorage
+ function saveBankInfo() {
+ const banque = document.getElementById('banque').value;
+ const iban = document.getElementById('iban').value;
+ const bic = document.getElementById('bic').value;
+
+ // Enregistrer les valeurs dans le localStorage
+ localStorage.setItem('banque', banque);
+ localStorage.setItem('iban', iban);
+ localStorage.setItem('bic', bic);
+
+ alert('Informations bancaires sauvegardées !');
+ }
+
+ // Récupérer les informations depuis le localStorage (si elles existent)
+ function loadInfo() {
+ if(localStorage.getItem('ville_naissance')) {
+ document.getElementById('ville_naissance').value = localStorage.getItem('ville_naissance');
+ }
+ if(localStorage.getItem('adresse')) {
+ document.getElementById('adresse').value = localStorage.getItem('adresse');
+ }
+ if(localStorage.getItem('email')) {
+ document.getElementById('email').value = localStorage.getItem('email');
+ }
+ if(localStorage.getItem('email-pro')) {
+ document.getElementById('email-pro').value = localStorage.getItem('email-pro');
+ }
+ if(localStorage.getItem('telephone')) {
+ document.getElementById('telephone').value = localStorage.getItem('telephone');
+ }
+ if(localStorage.getItem('numero_securite')) {
+ document.getElementById('numero_securite').value = localStorage.getItem('numero_securite');
+ }
+ if(localStorage.getItem('statut')) {
+ document.getElementById('statut').value = localStorage.getItem('statut');
+ }
+
+ // Informations bancaires
+ if(localStorage.getItem('banque')) {
+ document.getElementById('banque').value = localStorage.getItem('banque');
+ }
+ if(localStorage.getItem('iban')) {
+ document.getElementById('iban').value = localStorage.getItem('iban');
+ }
+ if(localStorage.getItem('bic')) {
+ document.getElementById('bic').value = localStorage.getItem('bic');
+ }
+ }
+
+ // Charger les informations quand la page est chargée
+ window.onload = loadInfo;
+
+ function uploadDocument() {
+ const documentType = document.getElementById('documentType').value;
+ const fileInput = document.getElementById('newDocument').files[0];
+
+ if (!documentType) {
+ alert("Veuillez sélectionner un type de document.");
+ return;
+ }
+
+ if (!fileInput) {
+ alert("Veuillez choisir un fichier à envoyer.");
+ return;
+ }
+
+ // Simulation d'un envoi réussi (ajoutez votre logique d'envoi ici)
+ document.getElementById('fileName').textContent = "Aucun fichier choisi"; // Réinitialiser le nom de fichier
+
+ // Afficher le document en attente de traitement
+ const documentsTable = document.querySelector('.info-table'); // La table où afficher les documents
+ const newRow = documentsTable.insertRow(-1); // Insérer une nouvelle ligne à la fin
+
+ // Ajouter des cellules pour le type de document et le statut
+ newRow.innerHTML = `<th>${documentType.replace(/_/g, ' ').toUpperCase()}</th><td>En attente de traitement</td>`;
+
+ // Ouvrir le pop-up de confirmation
+ document.getElementById('popup').style.display = 'block'; // Ouvrir le pop-up
+ }
+
+
+ function updateFileName() {
+ const fileInput = document.getElementById('newDocument');
+ const fileNameDisplay = document.getElementById('fileName');
+ if (fileInput.files.length > 0) {
+ fileNameDisplay.textContent = fileInput.files[0].name;
+ } else {
+ fileNameDisplay.textContent = 'Aucun fichier choisi';
+ }
+}
+
+
+ // Fermer la pop-up
+ function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ }
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/VACATAIRE/paiements.html b/MaquetteWEB/html/VACATAIRE/paiements.html
new file mode 100644
index 0000000..c20fae9
--- /dev/null
+++ b/MaquetteWEB/html/VACATAIRE/paiements.html
@@ -0,0 +1,402 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Suivi des Paiements</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+ <link rel="stylesheet" href="../../css/VACATAIRE/paiements.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./vacataire.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Maxime MENAULT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="dashboard-container">
+ <!-- Historique des paiements -->
+ <div class="section-header">
+ <h2>Historique des Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th data-sort="periode">Période</th>
+ <th data-sort="heuresPayees">Heures Payées</th>
+ <th data-sort="montantBrut">Montant Brut (€)</th>
+ <th data-sort="montantNet">Montant Net (€)</th>
+ <th data-sort="datePaiement">Date de Paiement</th>
+ <th data-sort="modePaiement">Mode de Paiement</th>
+ <th data-sort="compteBancaire">Compte Bancaire</th>
+ <th data-sort="statut">Statut</th>
+ <th>Bulletin de Paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Février 2024</td>
+ <td>20h</td>
+ <td>870,00</td>
+ <td>700,00</td>
+ <td>01/03/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Mars 2024</td>
+ <td>25h</td>
+ <td>1 087,50</td>
+ <td>875,00</td>
+ <td>01/04/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Avril 2024</td>
+ <td>22h</td>
+ <td>957,00</td>
+ <td>760,00</td>
+ <td>01/05/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Mai 2024</td>
+ <td>20h</td>
+ <td>870,00</td>
+ <td>700,00</td>
+ <td>01/06/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Juin 2024</td>
+ <td>18h</td>
+ <td>783,00</td>
+ <td>625,00</td>
+ <td>01/07/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>20h</td>
+ <td>870,00</td>
+ <td>700,00</td>
+ <td>01/10/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-valide">Validé</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Octobre 2024</td>
+ <td>22h</td>
+ <td>957,00</td>
+ <td>760,00</td>
+ <td>01/11/2024</td>
+ <td>Virement Bancaire</td>
+ <td>Compte XXXXXX1234</td>
+ <td class="status-attente">En attente</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
+ </div>
+
+ <!-- Graphique des paiements (brut) -->
+ <div class="section-header">
+ <h2>Évolution de vos Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="chart-container">
+ <canvas id="paymentChart"></canvas>
+ </div>
+ </div>
+
+ <!-- Formulaire pour signaler un problème -->
+<!-- Formulaire pour signaler un problème -->
+<div class="section-header">
+ <h2>Signaler un problème de paye</h2>
+</div>
+<div class="card contact-form">
+ <h3>Formulaire de signalement</h3>
+ <form id="contactForm">
+ <label for="probleme">Sélectionnez un problème :</label>
+ <select id="probleme" required>
+ <option value="">-- Sélectionner un problème --</option>
+ <option value="noPayment">Je n'ai pas reçu de paiement</option>
+ <option value="wrongAmount">Le montant de mon salaire est inférieur à ce qui était prévu.</option>
+ <option value="duplicatePayment">J'ai reçu un paiement en double</option>
+ <option value="latePayment">Mon paiement est en retard</option>
+ <option value="unjustifiedWithholding">Il y a une retenue sur mon paiement que je ne comprends pas</option>
+ <option value="technicalIssue">J'ai des difficultés à accéder à mes bulletins de salaire en ligne</option>
+ </select>
+
+ <!-- Champs supplémentaires qui s'affichent selon le problème -->
+ <div id="detailsSupplementaires" style="display: none;">
+ <!-- Champ pour sélectionner le mois -->
+ <div id="moisEnQuestion" style="display:none;">
+ <label for="mois">Sélectionner le mois :</label>
+ <select id="mois">
+ <option value="">-- Sélectionner le mois --</option>
+ <option value="fevrier">Février 2024</option>
+ <option value="mars">Mars 2024</option>
+ <option value="avril">Avril 2024</option>
+ <option value="mai">Mai 2024</option>
+ <option value="juin">Juin 2024</option>
+ <option value="septembre">Septembre 2024</option>
+ <option value="octobre">Octobre 2024</option>
+ </select>
+ </div>
+
+ <!-- Champ pour indiquer le montant reçu -->
+ <div id="montantRecuSupplementaire" style="display:none;">
+ <label for="montantRecu">Montant reçu (€) :</label>
+ <input type="number" id="montantRecu" placeholder="Montant reçu" />
+ </div>
+
+ <!-- Champ pour indiquer le montant attendu -->
+ <div id="montantAttendu" style="display:none;">
+ <label for="montantAttenduInput">Montant attendu (€) :</label>
+ <input type="number" id="montantAttenduInput" placeholder="Montant attendu" />
+ </div>
+ </div>
+ <button type="submit">Envoyer</button>
+ </form>
+</div>
+
+
+</div>
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="html/mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+<!-- Popup de confirmation -->
+<div class="popup" id="popup">
+ <img src="https://img.icons8.com/ios-filled/50/155724/checkmark.png" alt="Coche">
+ <h4>Message envoyé</h4>
+ <p>Votre message a été transmis à la direction. Un email de confirmation vous a été envoyé.</p>
+ <button onclick="fermerPopup()">Fermer</button>
+</div>
+
+<!-- Script pour gérer le formulaire et le popup -->
+<script>
+document.getElementById('probleme').addEventListener('change', function() {
+ var detailsSupplementaires = document.getElementById('detailsSupplementaires');
+ var montantRecuSupplementaire = document.getElementById('montantRecuSupplementaire');
+ var moisEnQuestion = document.getElementById('moisEnQuestion'); // Champ pour sélectionner le mois
+ var montantAttendu = document.getElementById('montantAttendu'); // Champ pour indiquer le montant attendu
+
+ // Masquer tous les champs au départ
+ detailsSupplementaires.style.display = 'none';
+ montantRecuSupplementaire.style.display = 'none';
+ moisEnQuestion.style.display = 'none';
+ montantAttendu.style.display = 'none';
+
+ // Afficher les champs en fonction du problème sélectionné
+ switch (this.value) {
+ case 'noPayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'wrongAmount':
+ detailsSupplementaires.style.display = 'block';
+ montantRecuSupplementaire.style.display = 'block'; // Afficher le montant
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'duplicatePayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ montantAttendu.style.display = 'block'; // Afficher le champ pour le montant attendu
+ break;
+ case 'latePayment':
+ detailsSupplementaires.style.display = 'block';
+ moisEnQuestion.style.display = 'block'; // Afficher le champ pour sélectionner le mois
+ break;
+ case 'unjustifiedWithholding':
+ detailsSupplementaires.style.display = 'block';
+ break;
+ case 'technicalIssue':
+ detailsSupplementaires.style.display = 'block';
+ break;
+ default:
+ // Aucune action si aucune valeur valide n'est sélectionnée
+ break;
+ }
+});
+
+document.getElementById('contactForm').addEventListener('submit', function(event) {
+ event.preventDefault();
+ // Afficher le popup de confirmation
+ document.getElementById('popup').style.display = 'block';
+});
+
+function fermerPopup() {
+ document.getElementById('popup').style.display = 'none';
+ // Réinitialiser le formulaire après soumission
+ document.getElementById('contactForm').reset();
+ document.getElementById('detailsSupplementaires').style.display = 'none';
+}
+
+// Configuration du graphique Chart.js
+const ctx = document.getElementById('paymentChart').getContext('2d');
+const paymentChart = new Chart(ctx, {
+ type: 'line',
+ data: {
+ labels: ['Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Septembre', 'Octobre'],
+ datasets: [{
+ label: 'Montant Brut (€)',
+ data: [870, 1087.5, 957, 870, 783, 870, 957],
+ borderColor: 'rgba(75, 192, 192, 1)',
+ backgroundColor: 'rgba(75, 192, 192, 0.2)',
+ fill: true,
+ tension: 0.3,
+ }]
+ },
+ options: {
+ responsive: true,
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ },
+ plugins: {
+ legend: {
+ display: true,
+ position: 'top',
+ }
+ }
+ }
+});
+
+document.querySelectorAll('th[data-sort]').forEach(function (header) {
+ header.addEventListener('click', function () {
+ const table = header.closest('table');
+ const tbody = table.querySelector('tbody');
+ const rowsArray = Array.from(tbody.querySelectorAll('tr'));
+ const index = Array.from(header.parentElement.children).indexOf(header);
+ let order = header.dataset.order || 1;
+
+ // Retirer les classes de tri des autres colonnes
+ document.querySelectorAll('th[data-sort]').forEach(function (th) {
+ th.classList.remove('ascending', 'descending');
+ });
+
+ // Appliquer la classe de tri
+ if (order == 1) {
+ header.classList.add('ascending');
+ header.dataset.order = -1; // Inverser l'ordre pour la prochaine fois
+ } else {
+ header.classList.add('descending');
+ header.dataset.order = 1; // Réinitialiser pour la prochaine fois
+ }
+
+ // Trier les lignes du tableau
+ rowsArray.sort(function (rowA, rowB) {
+ let cellA = rowA.children[index].innerText.trim();
+ let cellB = rowB.children[index].innerText.trim();
+
+ // Gérer les périodes (mois)
+ if (header.dataset.sort === 'periode') {
+ cellA = moisToNumero(cellA);
+ cellB = moisToNumero(cellB);
+ }
+
+ // Gérer les montants numériques avec des virgules
+ else if (!isNaN(cellA.replace(',', '.')) && !isNaN(cellB.replace(',', '.'))) {
+ return (parseFloat(cellA.replace(',', '.')) - parseFloat(cellB.replace(',', '.'))) * order;
+ }
+
+ // Gérer les dates
+ else if (isDate(cellA) && isDate(cellB)) {
+ return (new Date(cellA) - new Date(cellB)) * order;
+ }
+
+ // Gérer les textes (par défaut)
+ else {
+ return cellA.localeCompare(cellB) * order;
+ }
+
+ return (cellA - cellB) * order;
+ });
+
+ // Réorganiser les lignes dans le tableau
+ rowsArray.forEach(function (row) {
+ tbody.appendChild(row);
+ });
+ });
+});
+
+// Fonction pour convertir les mois en numéros pour faciliter le tri
+function moisToNumero(mois) {
+ const moisIndex = {
+ "Janvier": 1,
+ "Février": 2,
+ "Mars": 3,
+ "Avril": 4,
+ "Mai": 5,
+ "Juin": 6,
+ "Juillet": 7,
+ "Août": 8,
+ "Septembre": 9,
+ "Octobre": 10,
+ "Novembre": 11,
+ "Décembre": 12
+ };
+
+ // Extraire le mois et l'année du texte (ex: "Février 2024")
+ const [moisNom, annee] = mois.split(' ');
+ return new Date(annee, moisIndex[moisNom] - 1); // Créer un objet Date
+}
+
+// Fonction pour vérifier si un texte est une date valide
+function isDate(dateString) {
+ return !isNaN(Date.parse(dateString));
+}
+
+</script>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/VACATAIRE/vacataire.html b/MaquetteWEB/html/VACATAIRE/vacataire.html
new file mode 100644
index 0000000..565716d
--- /dev/null
+++ b/MaquetteWEB/html/VACATAIRE/vacataire.html
@@ -0,0 +1,237 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Dashboard Vacataire</title>
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../../css/VACATAIRE/vacataire.css">
+</head>
+<body>
+
+ <div class="header">
+ <!-- Logo pour retourner à l'accueil -->
+ <div class="logo-container">
+ <img src="../../media/img/logoWhite.png" alt="Logo Accueil">
+ </div>
+
+ <!-- Catégories dans le header -->
+ <div class="categories">
+ <a href="./vacataire.html">Accueil</a>
+ <a href="./mes-heures.html">Heures</a>
+ <a href="./paiements.html">Paiements</a>
+ <a href="./mes-informations.html">Mes informations et documents</a>
+ </div>
+
+ <!-- Section utilisateur avec déconnexion -->
+ <div class="user-section">
+ <div class="user-name">
+ Maxime MENAULT
+ </div>
+ <div class="logout-container">
+ <a href="../../index.html" title="Se déconnecter">
+ <img src="../../media/img/LogOutWhite.png" alt="Logo Déconnexion">
+ </a>
+ </div>
+ </div>
+ </div>
+
+<div class="dashboard-container">
+ <!-- Alertes et Notifications -->
+ <div class="section-header" id="notifications-section">
+ <h2>Alertes et Notifications</h2>
+ </div>
+ <div id="notifications-container">
+ <!-- Notifications -->
+ <div class="alert">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Propositions d'heures en attente :</strong> Vous n'avez toujours pas validé les propositions d'heures. Ces dernières seront automatiquement acceptées dans 3 jours. Merci de le faire au plus vite dans : <a href="mes-heures.html">Mes heures</a>.</p>
+ </div>
+ <div class="success">
+ <span class="close" onclick="this.parentElement.style.display='none';">×</span>
+ <p><strong>Pièces justificatives :</strong> Vos pièces justificatives ont été validées par le responsable pédagogique et sont accessibles dans : <a href="mes-informations.html">Mes informations et documents</a>.</p>
+ </div>
+ </div>
+
+
+ <!-- Script pour gérer l'affichage des notifications -->
+ <script>
+ const notificationsContainer = document.getElementById('notifications-container');
+ const notificationsSection = document.getElementById('notifications-section');
+
+ // Vérifiez si le conteneur des notifications est vide
+ if (notificationsContainer.childElementCount === 0) {
+ notificationsSection.style.display = 'none'; // Masquer la section si aucune notification
+ }
+ </script>
+
+ <!-- Emploi du Temps avec navigation de semaines -->
+ <div class="section-header">
+ <h2>Mon Emploi du Temps</h2>
+ </div>
+
+ <div class="card">
+ <!-- Navigation entre semaines -->
+ <div class="week-navigation">
+ <button>« Semaine précédente</button>
+ <p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
+ <button>Semaine suivante »</button>
+ </div>
+
+ <div class="schedule-container">
+ <table class="schedule-table">
+ <thead>
+ <tr>
+ <th>Heures</th>
+ <th>Lundi</th>
+ <th>Mardi</th>
+ <th>Mercredi</th>
+ <th>Jeudi</th>
+ <th>Vendredi</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="time-slot">08:00 - 08:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">08:30 - 09:00</td>
+ <td class="class">TP - SCR<br><span>Salle 224 - BUT1 Groupe 3</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:00 - 09:30</td>
+ <td class="class">TP - Mathématiques<br><span>Salle 101 - BUT2 Groupe 1</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TD - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">09:30 - 10:00</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:00 - 10:30</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ <td class="class">TP - SCR<br><span>Salle 305 - BUT1 Groupe 2</span></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">10:30 - 11:00</td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 202 - BUT1 Groupe 4</span></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">11:00 - 11:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ </tr>
+ <tr>
+ <td class="time-slot">13:00 - 13:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 1</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">13:30 - 14:00</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 2</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">14:00 - 14:30</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 3</span></td>
+ </tr>
+ <tr>
+ <td class="time-slot">14:30 - 15:00</td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="no-class"></td>
+ <td class="class">TP - DEV<br><span>Salle 225 - BUT1 Groupe 4</span></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+
+ <!-- Suivi des Paiements -->
+ <div class="section-header">
+ <h2>Suivi des Paiements</h2>
+ </div>
+ <div class="card">
+ <div class="table-container">
+ <table>
+ <thead>
+ <tr>
+ <th>Période</th>
+ <th>Heures Payées</th>
+ <th>Montant Brut (€)</th>
+ <th>Date de Paiement</th>
+ <th>Bulletin de paie</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>Septembre 2024</td>
+ <td>20h</td>
+ <td>870,00</td>
+ <td>01/10/2024</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ <tr>
+ <td>Octobre 2024</td>
+ <td>22h</td>
+ <td>957,00</td>
+ <td>En attente</td>
+ <td><a href="https://ensap.gouv.fr" target="_blank" class="btn">Voir Bulletin</a></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p><strong>Prochain paiement prévu :</strong> Novembre 2024 (20h restantes)</p>
+
+ <div class="more-payments">
+ <p><a href="./paiements.html" class="btn">Voir tous les paiements</a></p>
+ </div>
+ </div>
+
+</div>
+
+<div class="footer">
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="../mentions_legales.html">Mentions légales</a>
+ </p>
+</div>
+
+</body>
+</html>
diff --git a/MaquetteWEB/html/mentions_legales.html b/MaquetteWEB/html/mentions_legales.html
new file mode 100644
index 0000000..17b89e5
--- /dev/null
+++ b/MaquetteWEB/html/mentions_legales.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Mentions Légales</title>
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="../css/mentions_legales.css">
+</head>
+<body>
+
+ <div class="container">
+
+ <h2>1. Présentation du Projet</h2>
+ <p>
+ Ce projet scolaire a été réalisé par six élèves de l'IUT de Fontainebleau dans le cadre de leur deuxième année de
+ BUT Informatique en alternance. L'objectif de ce projet est de comprendre comment réaliser des interfaces
+ humaines de qualité (IHM) et de développer un portail de gestion permettant aux différents utilisateurs de
+ gérer leurs informations et leurs tâches de manière efficace.
+ </p>
+
+ <h2>2. Informations sur l'éditeur du site</h2>
+ <p>Adresse de l'école : IUT de Fontainebleau - Route Hurtault, 77300 Fontainebleau, France</p>
+
+ <h3>Étudiants du projet :</h3>
+ <ul>
+ <li>Moncef STITI - <span class="email">moncef.stiti@etu.u-pec.fr</span></li>
+ <li>Louay DARDOURI - <span class="email">louay.dardouri@etu.u-pec.fr</span></li>
+ <li>Khalid CHENOUNA - <span class="email">khalid.chenouna@etu.u-pec.fr</span></li>
+ <li>Marwa HAFSATI - <span class="email">marwa.hafsati@etu.u-pec.fr</span></li>
+ <li>Lenny FOULOU - <span class="email">lenny.foulou@etu.u-pec.fr</span></li>
+ <li>Alistair VAISSE - <span class="email">alistair.vaisse@etu.u-pec.fr</span></li>
+ </ul>
+
+ <h3>Chef de projet :</h3>
+ <p>Moncef STITI - <span class="email">moncef.stiti@etu.u-pec.fr</span></p>
+
+ <h2>3. Hébergeur du site</h2>
+ <p>Raison sociale : IUT de Fontainebleau</p>
+ <p>Adresse : Route Hurtault, 77300 Fontainebleau, France</p>
+ <p>Téléphone : +33 1 60 74 68 00</p>
+ <p>E-mail : <span class="email">brouard@u-pec.fr</span></p>
+
+ </div>
+
+</body>
+</html>
+
diff --git a/MaquetteWEB/index.html b/MaquetteWEB/index.html
new file mode 100644
index 0000000..0ee4abf
--- /dev/null
+++ b/MaquetteWEB/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Connexion - Sélection de profil</title>
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
+ <link rel="stylesheet" href="css/index.css">
+</head>
+<body>
+
+ <div class="w3-container w3-center">
+ <!-- Titre et texte d'introduction -->
+ <h1>Bienvenue sur le portail de gestion</h1>
+ <p class="intro-text">Veuillez sélectionner votre profil pour accéder à votre espace personnel</p>
+
+ <!-- Conteneur des cartes de profil -->
+ <div class="profile-container">
+ <!-- Carte de Chef de département -->
+ <div class="w3-card profile-card">
+ <a href="./html/CHEF/chef_departement.html">
+ <img src="media/img/chef.png" alt="Chef de département">
+ <h3>Chef de département</h3>
+ <p>Accédez à la gestion des heures et au pilotage budgétaire.</p>
+ </a>
+ </div>
+
+ <!-- Carte de Responsable des études -->
+ <div class="w3-card profile-card">
+ <a href="./html/RH/rh.html">
+ <img src="media/img/rh.png" alt="Responsable des études">
+ <h3>Responsable RH</h3>
+ <p>Gérez les interventions, les contrats vacataires et plus encore.</p>
+ </a>
+ </div>
+
+ <!-- Carte de Responsable des études -->
+ <div class="w3-card profile-card">
+ <a href="./html/FINANCE/finance.html">
+ <img src="media/img/financier.png" alt="Service financier">
+ <h3>Service financier</h3>
+ <p>Gérez les finances et transferez les informations aux comptables.</p>
+ </a>
+ </div>
+
+ <!-- Carte d'Enseignant permanent -->
+ <div class="w3-card profile-card">
+ <a href="./html/PROF/enseignant_permanent.html">
+ <img src="media/img/prof1.png" alt="Enseignant permanent">
+ <h3>Enseignant permanent</h3>
+ <p>Validez vos heures complémentaires et consultez vos données.</p>
+ </a>
+ </div>
+
+ <!-- Carte de Vacataire -->
+ <div class="w3-card profile-card">
+ <a href="./html/VACATAIRE/vacataire.html">
+ <img src="media/img/prof2.png" alt="Vacataire">
+ <h3>Enseignant vacataire</h3>
+ <p>Déclarez vos interventions et accédez à vos informations.</p>
+ </a>
+ </div>
+ </div>
+
+ <!-- Footer -->
+ <footer>
+ <p>© 2024 IUT de Fontainebleau. Tous droits réservés |
+ <a href="./html/mentions_legales.html">Mentions légales</a>
+ </p>
+
+ <button id="dark-mode-toggle" class="w3-button">
+ Activer le mode sombre
+ </button>
+ </footer>
+ </div>
+
+ <script src="./js/dark-mode.js"></script> <!-- Mode sombre -->
+</body>
+</html>
diff --git a/MaquetteWEB/js/dark-mode.js b/MaquetteWEB/js/dark-mode.js
new file mode 100644
index 0000000..fb7a7f1
--- /dev/null
+++ b/MaquetteWEB/js/dark-mode.js
@@ -0,0 +1,22 @@
+// dark-mode.js
+const toggleButton = document.getElementById('dark-mode-toggle');
+const body = document.body;
+
+// Vérifie si le mode sombre est déjà activé
+if (localStorage.getItem('darkMode') === 'enabled') {
+ body.classList.add('dark-mode');
+ toggleButton.textContent = 'Désactiver le mode sombre';
+}
+
+// Bascule entre mode sombre et clair
+toggleButton.addEventListener('click', () => {
+ body.classList.toggle('dark-mode');
+
+ if (body.classList.contains('dark-mode')) {
+ localStorage.setItem('darkMode', 'enabled');
+ toggleButton.textContent = 'Désactiver le mode sombre';
+ } else {
+ localStorage.setItem('darkMode', 'disabled');
+ toggleButton.textContent = 'Activer le mode sombre';
+ }
+});
diff --git a/MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf b/MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf
new file mode 100644
index 0000000..bc020f4
Binary files /dev/null and b/MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf differ
diff --git a/MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf b/MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf
new file mode 100644
index 0000000..63a4c90
Binary files /dev/null and b/MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf differ
diff --git a/MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf b/MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf
new file mode 100644
index 0000000..af8e7de
Binary files /dev/null and b/MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf differ
diff --git a/MaquetteWEB/media/img/LogOut.png b/MaquetteWEB/media/img/LogOut.png
new file mode 100644
index 0000000..01c7d3b
Binary files /dev/null and b/MaquetteWEB/media/img/LogOut.png differ
diff --git a/MaquetteWEB/media/img/LogOutWhite.png b/MaquetteWEB/media/img/LogOutWhite.png
new file mode 100644
index 0000000..3314bdd
Binary files /dev/null and b/MaquetteWEB/media/img/LogOutWhite.png differ
diff --git a/MaquetteWEB/media/img/chef.png b/MaquetteWEB/media/img/chef.png
new file mode 100644
index 0000000..c4083fb
Binary files /dev/null and b/MaquetteWEB/media/img/chef.png differ
diff --git a/MaquetteWEB/media/img/financier.png b/MaquetteWEB/media/img/financier.png
new file mode 100644
index 0000000..f960c6d
Binary files /dev/null and b/MaquetteWEB/media/img/financier.png differ
diff --git a/MaquetteWEB/media/img/logoDark.png b/MaquetteWEB/media/img/logoDark.png
new file mode 100644
index 0000000..f54e524
Binary files /dev/null and b/MaquetteWEB/media/img/logoDark.png differ
diff --git a/MaquetteWEB/media/img/logoDark2.png b/MaquetteWEB/media/img/logoDark2.png
new file mode 100644
index 0000000..bb1f208
Binary files /dev/null and b/MaquetteWEB/media/img/logoDark2.png differ
diff --git a/MaquetteWEB/media/img/logoWhite.png b/MaquetteWEB/media/img/logoWhite.png
new file mode 100644
index 0000000..6da5276
Binary files /dev/null and b/MaquetteWEB/media/img/logoWhite.png differ
diff --git a/MaquetteWEB/media/img/logoWhite2.png b/MaquetteWEB/media/img/logoWhite2.png
new file mode 100644
index 0000000..42a12b5
Binary files /dev/null and b/MaquetteWEB/media/img/logoWhite2.png differ
diff --git a/MaquetteWEB/media/img/prof1.png b/MaquetteWEB/media/img/prof1.png
new file mode 100644
index 0000000..c7ffc63
Binary files /dev/null and b/MaquetteWEB/media/img/prof1.png differ
diff --git a/MaquetteWEB/media/img/prof2.png b/MaquetteWEB/media/img/prof2.png
new file mode 100644
index 0000000..73f4249
Binary files /dev/null and b/MaquetteWEB/media/img/prof2.png differ
diff --git a/MaquetteWEB/media/img/rh.png b/MaquetteWEB/media/img/rh.png
new file mode 100644
index 0000000..c98dee2
Binary files /dev/null and b/MaquetteWEB/media/img/rh.png differ
diff --git a/MaquetteWEB/media/img/secretaire.png b/MaquetteWEB/media/img/secretaire.png
new file mode 100644
index 0000000..4103501
Binary files /dev/null and b/MaquetteWEB/media/img/secretaire.png differ