stiti/PreprojetIHMFA2024
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Ajouts de la maquette web sur le nouveau git (suite au bug de l'ancien répertoire git

Browse Source
This commit is contained in:
Moncef STITI
2024-10-16 18:19:14 +02:00
parent c3d21877df
commit cad70b9d8e
57 changed files with 12657 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
MaquetteWEB/README.md Normal file
View File

222
MaquetteWEB/css/CHEF/chef_departement.css Normal file
View File

@@ -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;
}

207
MaquetteWEB/css/CHEF/gestion-heures-formation.css Normal file
View File

@@ -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;
}

206
MaquetteWEB/css/CHEF/gestion-heures-professeur.css Normal file
View File

@@ -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;
}

222
MaquetteWEB/css/FINANCE/finance.css Normal file
View File

@@ -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;
}

194
MaquetteWEB/css/FINANCE/style.css Normal file
View File

@@ -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;
}

221
MaquetteWEB/css/PROF/enseignant_permanent.css Normal file
View File

@@ -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;
}

299
MaquetteWEB/css/PROF/mes-heures.css Normal file
View File

@@ -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;
}

205
MaquetteWEB/css/PROF/paiements.css Normal file
View File

@@ -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 */
}

136
MaquetteWEB/css/RH/rh.css Normal file
View File

@@ -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 */
}

194
MaquetteWEB/css/RH/style.css Normal file
View File

@@ -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;
}

300
MaquetteWEB/css/VACATAIRE/mes-heures.css Normal file
View File

@@ -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;
}

205
MaquetteWEB/css/VACATAIRE/paiements.css Normal file
View File

@@ -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 */
}

221
MaquetteWEB/css/VACATAIRE/vacataire.css Normal file
View File

@@ -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;
}

118
MaquetteWEB/css/index.css Normal file
View File

@@ -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 */
}

19
MaquetteWEB/css/mentions_legales.css Normal file
View File

@@ -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;
}

768
MaquetteWEB/html/CHEF/chef_departement.html Normal file
View File

File diff suppressed because it is too large Load Diff

842
MaquetteWEB/html/CHEF/gestion-edt.html Normal file
View File

File diff suppressed because it is too large Load Diff

373
MaquetteWEB/html/CHEF/gestion-heures-formation.html Normal file
View File

@@ -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()">&times;</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()">&times;</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>&copy; 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>

723
MaquetteWEB/html/CHEF/gestion-heures-professeur.html Normal file
View File

File diff suppressed because it is too large Load Diff

582
MaquetteWEB/html/CHEF/mes-informations.html Normal file
View File

File diff suppressed because it is too large Load Diff

296
MaquetteWEB/html/CHEF/paiements.html Normal file
View File

@@ -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>

205
MaquetteWEB/html/FINANCE/finance.html Normal file
View File

@@ -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';">&times;</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';">&times;</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>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
</body>
</html>

202
MaquetteWEB/html/FINANCE/historique_paiements.html Normal file
View File

@@ -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>&copy; 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>

576
MaquetteWEB/html/FINANCE/mes_informations.html Normal file
View File

File diff suppressed because it is too large Load Diff

303
MaquetteWEB/html/FINANCE/paiements_en_attente.html Normal file
View File

@@ -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>&copy; 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>

158
MaquetteWEB/html/FINANCE/rapports_financiers.html Normal file
View File

@@ -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>&copy; 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>

237
MaquetteWEB/html/PROF/enseignant_permanent.html Normal file
View File

@@ -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';">&times;</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';">&times;</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>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</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>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
</body>
</html>

474
MaquetteWEB/html/PROF/mes-heures.html Normal file
View File

@@ -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 &#x25B2;</th> <!-- Triable -->
<th>Matière</th>
<th>Type d'Intervention</th>
<th onclick="sortTable(3)">Volume Horaire &#x25B2;</th> <!-- Triable -->
<th onclick="sortTable(4)">Heures Travaillées &#x25B2;</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>&copy; 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>

541
MaquetteWEB/html/PROF/mes-informations.html Normal file
View File

File diff suppressed because it is too large Load Diff

402
MaquetteWEB/html/PROF/paiements.html Normal file
View File

@@ -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>&copy; 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>

279
MaquetteWEB/html/RH/candidature.html Normal file
View File

@@ -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()">&times;</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()">&times;</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>&copy; 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>

261
MaquetteWEB/html/RH/gestion_personnel.html Normal file
View File

@@ -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()">&times;</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()">&times;</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>&copy; 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>

518
MaquetteWEB/html/RH/mes-informations.html Normal file
View File

File diff suppressed because it is too large Load Diff

130
MaquetteWEB/html/RH/rh.html Normal file
View File

@@ -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';">&times;</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';">&times;</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>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
</body>
</html>

474
MaquetteWEB/html/VACATAIRE/mes-heures.html Normal file
View File

@@ -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 &#x25B2;</th> <!-- Triable -->
<th>Matière</th>
<th>Type d'Intervention</th>
<th onclick="sortTable(3)">Volume Horaire &#x25B2;</th> <!-- Triable -->
<th onclick="sortTable(4)">Heures Travaillées &#x25B2;</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>&copy; 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>

554
MaquetteWEB/html/VACATAIRE/mes-informations.html Normal file
View File

File diff suppressed because it is too large Load Diff

402
MaquetteWEB/html/VACATAIRE/paiements.html Normal file
View File

@@ -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>&copy; 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>

237
MaquetteWEB/html/VACATAIRE/vacataire.html Normal file
View File

@@ -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';">&times;</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';">&times;</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>&laquo; Semaine précédente</button>
<p><strong>Semaine du 18 au 24 Novembre 2024</strong></p>
<button>Semaine suivante &raquo;</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>&copy; 2024 IUT de Fontainebleau. Tous droits réservés |
<a href="../mentions_legales.html">Mentions légales</a>
</p>
</div>
</body>
</html>

49
MaquetteWEB/html/mentions_legales.html Normal file
View File

@@ -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>

80
MaquetteWEB/index.html Normal file
View File

@@ -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>&copy; 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>

22
MaquetteWEB/js/dark-mode.js Normal file
View File

@@ -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';
}
});

BIN
MaquetteWEB/media/documents/VACATAIRE/CarteIdentite.pdf Normal file
View File

Binary file not shown.

BIN
MaquetteWEB/media/documents/VACATAIRE/ContratDeTravail.pdf Normal file
View File

Binary file not shown.

BIN
MaquetteWEB/media/documents/VACATAIRE/JustificatifDomicile.pdf Normal file
View File

Binary file not shown.

BIN
MaquetteWEB/media/img/LogOut.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.8 KiB

BIN
MaquetteWEB/media/img/LogOutWhite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.4 KiB

BIN
MaquetteWEB/media/img/chef.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
MaquetteWEB/media/img/financier.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

BIN
MaquetteWEB/media/img/logoDark.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

Some files were not shown because too many files have changed in this diff Show More