commit a263c86c7e7b6fa6e5d175030aa932c3b2af3f02 Author: Lyanis Souidi Date: Fri Oct 6 16:14:40 2023 +0200 Initial commit diff --git a/.gitmodules b/.gitmodules new file mode 100644 index 0000000..ba1ffb3 --- /dev/null +++ b/.gitmodules @@ -0,0 +1,3 @@ +[submodule "w3css"] + path = src/assets/lib/w3css + url = https://github.com/JaniRefsnes/w3css diff --git a/README.md b/README.md new file mode 100644 index 0000000..550b7ff --- /dev/null +++ b/README.md @@ -0,0 +1,18 @@ +# Stage Etudiant + +[![W3C Validation](https://img.shields.io/w3c-validation/default?targetUrl=https%3A%2F%2Fdwarves.iut-fbleau.fr%2F~souidi%2Fbut2%2Fstage-etudiant%2F)](https://validator.w3.org/nu/?doc=https%3A%2F%2Fdwarves.iut-fbleau.fr%2F~souidi%2Fbut2%2Fstage-etudiant%2F) [![w3.css](https://img.shields.io/badge/w3.css-4-green)](https://www.w3schools.com/w3css/) [![Figma](https://img.shields.io/badge/Figma-grey?logo=figma)](https://www.figma.com/file/5aTJEyy2F0EbgT8uuGUlan/Pr%C3%A9-Projet-IHM?type=design&node-id=145%3A474&mode=design&t=SAs42PoJq1Xbc8Qd-1) + + +Maquette web pour la conception des conventions de stage pour les étudiants. + +## Documents + +- [Rapport](doc/Rapport_Projet_IHM_Dimitrijevic-Souidi.pdf) +- [WireFlow](doc/wireflow.svg) + ⚠️ les dimensions sont très grandes (11836x3172), ce document est également disponible sur la page "WireFlow" du fichier Figma +- [Maquette/Prototype Figma](https://www.figma.com/file/5aTJEyy2F0EbgT8uuGUlan/Pr%C3%A9-Projet-IHM?type=design&node-id=145%3A474&mode=design&t=SAs42PoJq1Xbc8Qd-1) +- [Maquette Web](https://dwarves.iut-fbleau.fr/~souidi/but2/stage-etudiant) ([code](src)) + +--- + +*Réalisé par Hugo Dimitrijevic et Lyanis Souidi* diff --git a/doc/Rapport_Projet_IHM_Dimitrijevic-Souidi.pdf b/doc/Rapport_Projet_IHM_Dimitrijevic-Souidi.pdf new file mode 100644 index 0000000..f747126 Binary files /dev/null and b/doc/Rapport_Projet_IHM_Dimitrijevic-Souidi.pdf differ diff --git a/doc/wireflow.svg b/doc/wireflow.svg new file mode 100644 index 0000000..cfdb3ab --- /dev/null +++ b/doc/wireflow.svg @@ -0,0 +1,359 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/css/signature.css b/src/assets/css/signature.css new file mode 100644 index 0000000..1377db4 --- /dev/null +++ b/src/assets/css/signature.css @@ -0,0 +1,116 @@ +main { + display: grid; + grid-template-columns: 1fr 2fr; + grid-template-rows: repeat(8, 1fr); + grid-gap: 0; +} + +#pagetitle { + grid-column: 1 / 3; + grid-row: 1 / 2; +} + +#convention { + grid-column: 2 / 3; + grid-row: 2 / 9; + width: 100%; + height: 100%; +} + +#back, #historique, #form { + display: flex; + align-items: center; + justify-content: center; +} + +#back { + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +#historique { + grid-column: 1 / 2; + grid-row: 3 / 4; +} + +#historique select { + border-radius: 12px; + padding: 15px 30px; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10); + border: 1px solid #9C9C9C; + background-color: #FBFBFB; +} + +#form { + grid-column: 1 / 2; + grid-row: 8 / 9; +} + +dialog { + border-radius: 13px; + border: none; + background: #FEFEFE; + box-shadow: 0px 4px 7px 0px rgba(0, 0, 0, 0.15); + padding: 20px; +} + +#dialog-close { + display: flex; + justify-content: flex-end; +} + +#dialog-close button { + background: none; + border: none; + padding: 0; + cursor: pointer; +} + +#dialog-content { + display: flex; + flex-direction: column; + align-items: center; + gap: 25px; +} + +dialog h2, dialog p { + font-weight: 500; +} + +dialog::backdrop { + background-color: #0F0E0E; + opacity: 0.5; +} + +@media screen and (max-width: 850px) { + main { + grid-template-columns: repeat(2, 1fr); + grid-gap: 10px; + margin: 15px 0px; + } + + #pagetitle { + display: none; + } + + #convention { + grid-column: 1 / 3; + grid-row: 1 / 8; + margin: 5px; + } + + #form { + grid-column: 2 / 3; + grid-row: 9 / 10; + } + + #back { + grid-column: 1 / 2; + grid-row: 9 / 10; + } + + #historique { + grid-column: 1 / 3; + grid-row: 8 / 9; + } +} \ No newline at end of file diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..f5b6566 --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,200 @@ +body { + background-color: #F5F5F5; + font-family: 'Lexend'; + color: #000; +} + +main { + display: grid; + grid-template-columns: 2fr 1.5fr; + grid-gap: 50px; +} + +#pagetitle { + grid-column: 1 / 2; + grid-row: 1 / 2; +} + +#pagetitle h1, #pagetitle h2 { + font-family: 'Lexend'; + font-size: 1.5em; + font-weight: 700; + margin: 0; +} + +#recap { + grid-column: 2 / 3; + grid-row: 2 / 3; +} + +#recap-content { + border-radius: 12px; + background-color: #FBFBFB; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.30); + padding: 10px 25px; + display: flex; + flex-direction: column; + gap: 20px; +} + +#recap-content h2 { + font-family: 'Lexend'; + font-weight: 500; + margin: 0; +} + +.tags ul { + display: flex; + flex-wrap: wrap; + list-style: none; + gap: 10px; + padding: 0; + margin: 0; +} + +.tags ul > li { + color: #FFF; + border-radius: 12px; + background: #0F0E0E; + padding: 2.5px 10px; +} + +#menu a { + padding: 18px 16px; +} + +#burger { + padding: 13px 16px; +} + +#form { + grid-column: 1 / 2; + grid-row: 2 / 3; +} + +@media screen and (min-width: 500px) { + #form-fields > div { + display: flex; + justify-content: space-between; + align-items: center; + gap: 15px; + } +} + +#form-fields > div > div { + display: flex; + flex-direction: column; + width: 100%; +} + +#form-fields > div > div.inline { + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-evenly; + margin-top: 10px; + width: 100%; +} + +input, textarea, select { + border-radius: 4px; + border: 1px solid #B7B7B7; + background-color: #FFF; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10); + padding: 4px 10px; +} + +input[readonly], textarea[readonly], select[disabled] { + background-color: #C2C2C2; + opacity: 1; + color: #000; +} + +.internship-workload-progress { + width: 100%; + height: 20px; + position: relative; + display: flex; + justify-content: flex-start; + gap: 5px; +} + +/* Styles pour les 4 rectangles */ +.internship-workload-progress .segment { + height: 100%; + background-color: #D9D9D9; + flex-grow: 1; +} + +.internship-workload-progress .segment:nth-child(1) div { + background-color: #000; + width: 100%; + height: 100%; +} + +.internship-workload-progress .segment:nth-child(2) div { + background-color: #000; + width: 100%; + height: 100%; +} + +.internship-workload-progress .segment:nth-child(3) div { + background-color: #000; + width: 100%; + height: 100%; +} + +.internship-workload-progress .segment:nth-child(4) div { + background-color: #000; + width: 50%; + height: 100%; +} + +.internship-workload-progress .segment:nth-child(5) div { + background-color: #000; + width: 0%; + height: 100%; +} + +.form-buttons { + margin-top: 40px; + display: flex; + justify-content: space-between; +} + +.form-buttons button { + border-radius: 12px; + padding: 15px 30px; + box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.10); + border: 1px solid #9C9C9C; + background-color: #FBFBFB; +} + +.form-buttons button[type=submit] { + background-color: #0F0E0E; + color: white; +} + + +@media screen and (max-width: 850px) { + main { + display: grid; + grid-template-columns: 100%; + grid-gap: 10px; + margin: 15px 0; + } + + #pagetitle { + display: none; + } + + #recap { + grid-column: 1 / 2; + grid-row: 1 / 2; + } + + #form { + grid-column: 1 / 2; + grid-row: 2; + } +} \ No newline at end of file diff --git a/src/assets/img/back.svg b/src/assets/img/back.svg new file mode 100644 index 0000000..ef59f25 --- /dev/null +++ b/src/assets/img/back.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/img/logo.png b/src/assets/img/logo.png new file mode 100644 index 0000000..6b83747 Binary files /dev/null and b/src/assets/img/logo.png differ diff --git a/src/assets/img/menu.svg b/src/assets/img/menu.svg new file mode 100644 index 0000000..59ab099 --- /dev/null +++ b/src/assets/img/menu.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/img/profile.svg b/src/assets/img/profile.svg new file mode 100644 index 0000000..59906c5 --- /dev/null +++ b/src/assets/img/profile.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/js/form.js b/src/assets/js/form.js new file mode 100644 index 0000000..4f654b2 --- /dev/null +++ b/src/assets/js/form.js @@ -0,0 +1,25 @@ +const tx = document.getElementsByTagName("textarea"); +for (let i = 0; i < tx.length; i++) { + tx[i].setAttribute("style", "height:" + (tx[i].scrollHeight) + "px;overflow-y:hidden;"); + tx[i].addEventListener("input", OnInput, false); +} + +function OnInput() { + this.style.height = 0; + this.style.height = (this.scrollHeight) + "px"; +} + +function unlockForm(btn) { + let elems1 = document.querySelectorAll('input,textarea'); + let elems2 = document.querySelectorAll('select'); + + for (let i = 0; i < elems1.length; i++) { + elems1[i].removeAttribute("readonly"); + } + + for (let i = 0; i < elems2.length; i++) { + elems2[i].removeAttribute("disabled"); + } + + btn.setAttribute("disabled", ''); +} \ No newline at end of file diff --git a/src/assets/js/script.js b/src/assets/js/script.js new file mode 100644 index 0000000..8908d86 --- /dev/null +++ b/src/assets/js/script.js @@ -0,0 +1,15 @@ +// Toggle between showing and hiding the sidebar when clicking the menu icon +var mySidebar = document.getElementById("mySidebar"); + +function w3_open() { + if (mySidebar.style.display === 'block') { + mySidebar.style.display = 'none'; + } else { + mySidebar.style.display = 'block'; + } +} + +// Close the sidebar with the close button +function w3_close() { + mySidebar.style.display = "none"; +} \ No newline at end of file diff --git a/src/assets/js/signature.js b/src/assets/js/signature.js new file mode 100644 index 0000000..2d5b40a --- /dev/null +++ b/src/assets/js/signature.js @@ -0,0 +1,9 @@ +document.getElementById("versions").addEventListener("change", function(e) { + document.getElementById("version").innerText = e.target.value; + document.getElementById("convention").src = e.target.value + ".pdf"; +}); + +document.getElementById("form").addEventListener("submit", function(e) { + e.preventDefault(); + document.getElementById("dialog").showModal(); +}); \ No newline at end of file diff --git a/src/assets/lib/w3css b/src/assets/lib/w3css new file mode 160000 index 0000000..2560c38 --- /dev/null +++ b/src/assets/lib/w3css @@ -0,0 +1 @@ +Subproject commit 2560c3886d4e3bc64f5960dc58b8ea6076a72989 diff --git a/src/conventions/2764/index.html b/src/conventions/2764/index.html new file mode 100644 index 0000000..f276301 --- /dev/null +++ b/src/conventions/2764/index.html @@ -0,0 +1,8 @@ + + + + Stage Etudiant + + + + \ No newline at end of file diff --git a/src/conventions/2764/infos-complementaires/index.html b/src/conventions/2764/infos-complementaires/index.html new file mode 100644 index 0000000..53ee892 --- /dev/null +++ b/src/conventions/2764/infos-complementaires/index.html @@ -0,0 +1,154 @@ + + + + + Stage Etudiant + + + + + + + + +
+
+ Stage Étudiants + +
+ Pénom Profil +
+ + + Menu + +
+
+ + + +
+
+
+

Préparation :

+

Convention de stage - Informations complémentaires

+
+ +
+
+
+

Récapitulatif du stage

+

VoiciUnNomD'entreprise

+ SiteDeL'Entreprise.com +
+ +
+ Mots-clés : +
    +
  • Web
    • +
  • Base de données
    • +
  • MySQL
    • +
+
+ +
+ Technos utilisées : +
    +
  • Java
    • +
  • Linux
    • +
  • MySQL
    • +
+
+ +
+ Quantité de travail : +
+
+
+
+
+
+
+

(Elevé)

+
+
+
+ +
+
+
+
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+ +
+
+ + +
+
+
+ +
+ + + +
+
+
+
+ + + \ No newline at end of file diff --git a/src/conventions/2764/infos-etudiant/index.html b/src/conventions/2764/infos-etudiant/index.html new file mode 100644 index 0000000..533738d --- /dev/null +++ b/src/conventions/2764/infos-etudiant/index.html @@ -0,0 +1,152 @@ + + + + + Stage Etudiant + + + + + + + + +
+
+ Stage Étudiants + +
+ Pénom Profil +
+ + + Menu + +
+
+ + + +
+
+
+

Préparation :

+

Convention de stage - Informations personnelles

+
+ +
+
+
+

Récapitulatif du stage

+

VoiciUnNomD'entreprise

+ SiteDeL'Entreprise.com +
+ +
+ Mots-clés : +
    +
  • Web
    • +
  • Base de données
    • +
  • MySQL
    • +
+
+ +
+ Technos utilisées : +
    +
  • Java
    • +
  • Linux
    • +
  • MySQL
    • +
+
+ +
+ Quantité de travail : +
+
+
+
+
+
+
+

(Elevé)

+
+
+
+ +
+
+
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+ + +
+
+
+ +
+ + +
+
+
+
+ + \ No newline at end of file diff --git a/src/conventions/2764/signature/index.html b/src/conventions/2764/signature/index.html new file mode 100644 index 0000000..cbf540e --- /dev/null +++ b/src/conventions/2764/signature/index.html @@ -0,0 +1,87 @@ + + + + + Stage Etudiant + + + + + + + + + + +
+
+ Stage Étudiants + +
+ Pénom Profil +
+ + + Menu + +
+
+ + + +
+
+
+

Confirmation :

+

Convention de stage - v1.2

+
+ + + +
+ +
+ +
+ +
+ +
+ +
+ + +
+ +
+
+

Parfait !

+ + + +

Votre version de la convention à bien été prise en compte, le reste des parties prenantes viennent de recevoir une notification.

+
+ +
+
+ + \ No newline at end of file diff --git a/src/conventions/2764/signature/v1.0.pdf b/src/conventions/2764/signature/v1.0.pdf new file mode 100644 index 0000000..f6598ce Binary files /dev/null and b/src/conventions/2764/signature/v1.0.pdf differ diff --git a/src/conventions/2764/signature/v1.1.pdf b/src/conventions/2764/signature/v1.1.pdf new file mode 100644 index 0000000..cb117aa Binary files /dev/null and b/src/conventions/2764/signature/v1.1.pdf differ diff --git a/src/conventions/2764/signature/v1.2.pdf b/src/conventions/2764/signature/v1.2.pdf new file mode 100644 index 0000000..0b51d46 Binary files /dev/null and b/src/conventions/2764/signature/v1.2.pdf differ diff --git a/src/conventions/index.html b/src/conventions/index.html new file mode 100644 index 0000000..30741ef --- /dev/null +++ b/src/conventions/index.html @@ -0,0 +1,8 @@ + + + + Stage Etudiant + + + + \ No newline at end of file diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..0853fc9 --- /dev/null +++ b/src/index.html @@ -0,0 +1,8 @@ + + + + Stage Etudiant + + + + \ No newline at end of file