début de candidatures et postuler dans offres_stages.php

assets/css/candidatures.css

@@ -8,3 +8,191 @@
   font-size:calc(30px + 1vw);
   font-weight: bold;
 }
+
+.bubble {
+    position: relative;
+    text-align: center;
+    margin: 30px;
+    background-color: var(--black3);
+    border-radius: 20px;
+}
+
+.title_bubble {
+    position: relative;
+    display: block;
+    padding: 10px;
+    font-size: 2em;
+    font-weight: bold;
+}
+
+.heart1,
+.heart2
+{
+    position: absolute;
+    right: 0;
+    top: 0;
+    margin: 10px;
+    font-size: 0.75em;
+    cursor: pointer;
+}
+
+.heart-hidden
+{
+    display: none;
+}
+
+.bubble img {
+    width: 100%;
+    height: 100%;
+    border-radius: 20px;
+}
+
+.bubble .centered {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size:calc(12px + 2vw);
+  font-weight: bold;
+  color: white;
+  width: 100%;
+}
+
+.bubble .text_content
+{
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  font-size: 1.25em;
+  padding: 0 10px 20px 10px;
+}
+
+
+.bubble .divLeft,
+.bubble .divRight
+{
+    width: 50%;
+}
+
+.bubble .divLeft .name_company
+{
+    font-size: 1.25em;
+    font-weight: bold;
+    margin: 10px;
+}
+
+.bubble .divRight
+{
+    text-align: left;
+}
+
+.bubble .table_title
+{
+    margin: 0 0 10px 45px;
+}
+
+.bubble .divRight table
+{
+    margin-left: 50px;
+}
+
+.bubble .divRight table td
+{
+    padding: 0 10px 8px 0;
+}
+
+.bubble .divLeft .description
+{
+    display: block;
+    height: auto;
+    margin: 10px;
+    padding: 15px;
+    background-color: lightgray;
+    border-radius: 20px;
+}
+
+
+.table-container {
+    display: block;
+    width: 85%;
+    max-width: 900px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  
+  .flex-table {
+    display: flex;
+    flex-flow: row wrap;
+  }
+  
+  .flex-row {
+    width: calc(100% / 4);
+    text-align: center;
+    padding: 0.2em 0.2em;
+  }
+  
+  .flex-table .name
+  {
+    text-align: center;
+  }
+  
+  .flex-table .value
+  {
+    text-align: center;
+  }
+
+/*//////////////////////////////////////////////////////////////////
+[ Responsive ]*/
+
+@media screen and (max-width: 1200px)
+{
+    .table-container {
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 1100px)
+{
+    .table-container {
+        width: 80%;
+    }
+    .flex-row {
+        width: calc(100% / 2);
+    }
+}
+
+@media screen and (max-width: 900px)
+{
+    .bubble 
+    {
+        margin: 30px 5px 30px 5px;
+    }
+    .table-container {
+        width: 60%;
+    }
+}
+
+
+@media screen and (max-width: 500px) {
+    .table-container {
+        width: 80%;
+    }
+    .flex-row {
+      width: 100%;
+    }
+    .flex-table .name
+    {
+      text-align: left;
+      font-weight: bold ;
+    }
+    .flex-table .value
+    {
+      text-align: center;
+    }
+    .bubble .divLeft,
+    .bubble .divRight
+    {
+        width: 100%;
+    }
+
+  }

assets/css/offres_stages.css

@@ -131,7 +131,7 @@
 
 .flex-row
 {
-    width: calc(100% / 4);
+    width: calc(100% / 2);
     text-align: center;
     padding: 0.2em 0.2em;
 }
@@ -165,6 +165,85 @@
     font-size: 1em;
 }
 
+/*//////////////////////////////////////////////////////////////////
+[ Modal ] */
+
+.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.7);
+}
+
+.title_modal
+{
+    border-radius: 10px 10px 0 0;
+    padding: 10px;
+    font-weight: bold;
+    font-size: 2em;
+    text-align: center;
+}
+
+.modal-content 
+{
+    background-color: #ffffff;
+    margin: 15% auto;
+    width: 80%;
+    border-radius: 10px;
+    text-align: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.info_message
+{
+  display: none;
+  width: 80%;
+  margin: 10px auto 20px auto;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.form_postuler input
+{
+    width: 95%;
+    height: 30px;
+    margin-left: 10px;
+    font-size: 20px;
+}
+
+.form_postuler button, .form_postuler input[type="button"]
+{
+    margin: 10px;
+    width: 120px;
+    height: 40px;
+    font-size: 20px;
+}
+
+.close 
+{
+    color: #aaa;
+    float: right;
+    font-size: 40px;
+    font-weight: bold;
+    right: -20px;
+    margin-right: 20px;
+}
+
+.close:hover, .close:focus 
+{
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
+
 /*//////////////////////////////////////////////////////////////////
 [ Responsive ]*/
 
@@ -200,11 +279,9 @@
     .table-container {
         width: 60%;
     }
-}
+    .modal-content
-
+    {
-@media screen and (max-width: 700px) {
+      width: 90%;
-    .table-container {
-        width: 80%;
     }
     .flex-row {
         width: 100%;
@@ -223,6 +300,13 @@
     }
 }
 
+@media screen and (max-width: 700px) {
+    .table-container {
+        width: 80%;
+    }
+    
+}
+
 @media screen and (max-width: 350px) {
     body {
         overflow-x: auto;

assets/css/parameters.css

@@ -196,6 +196,7 @@
     font-size: 40px;
     font-weight: bold;
     right: -20px;
+    margin-right: 20px;
 }
 
 .close:hover, .close:focus 

assets/js/offres_stages.js

@@ -25,4 +25,18 @@ $(document).ready(function(){
             });
         }
     });
+
+    $(".button_postuler").click(function() {
+        $(".modal").show();
+        $(".info_message").hide();
+    });
+
+    window.onclick = function(event) {
+        if (event.target == document.getElementById("modal_postuler")) {
+            $(".modal").hide();
+        }
+    }
+
+
+
 });

candidatures.php

@@ -43,13 +43,10 @@ if (isset($_SESSION["username"])){
                     <div class="content_title">Candidatures</div>
                     <?php
                     if ($query_candidatures->rowCount() >= 1) {
-                        foreach ($query_candidatures as $result) {
+                        foreach ($results_candidatures as $result) {
                     ?>
                         <div class="bubble">
-                            <div class="title_bubble"><?= $result->name_internship; ?>
+                            <div class="title_bubble"><?= $result->name_internship; ?></div>
-                                    <div id="<?= $result->ID_internship ?>_1" class="heart1 heart-hidden"><i class="far fa-heart"></i></div>
-                                    <div id="<?= $result->ID_internship ?>_2" class="heart2" style="color: red;"><i class="fas fa-heart"></i></div>
-                            </div>
                             <div class="text_content">
                                 <div class="divLeft">
                                     <div class="name_company">
@@ -57,45 +54,28 @@ if (isset($_SESSION["username"])){
                                     </div>
                                     <?= $result->city_localisation; ?> <?= $result->postal_code_localisation; ?>
                                     <div class="description">
-                                        <?= $result->description_internship; ?>
+                                        La prochaine étape de votre candidature est : <?= $result->progression_candidature ?>
                                     </div>
                                 </div>
                                 <div class="divRight">  
                                     <table>
-                                        <div class="table_title">Points importants:</div>
+                                        <div class="table_title">Fichiers en lien avec la candidature:</div>
                                         
                                         <tr>
-                                            <td><i class="far fa-clock"></i></td>
+                                            <td>Curriculum Vitae :</td>
-                                            <td><?= $result->duration_internship; ?> jours</td>
+                                            <td><?= $result->cv_file_path_candidature; ?></td>
                                         </tr>
                                         <tr>
-                                            <td><i class="fas fa-euro-sign"></i></td>
+                                            <td>Lettre de motivation :</td>
-                                            <td><?= $result->remuneration_internship; ?> €/h</td>
+                                            <td><?= $result->lm_file_path_candidature; ?></td>
                                         </tr>
                                         <tr>
-                                            <td><i class="far fa-calendar-alt"></i></td>
+                                            <td>Fiche de validation :</td>
-                                            <td><?= $result->offer_date_internship; ?></td>
+                                            <td><?= $result->validation_form_file_path_candidature; ?></td>
                                         </tr>
                                         <tr>
-                                            <td><i class="fas fa-graduation-cap"></i></td>
+                                            <td>Convention de stage :</td>
-                                            <td><?= $result->name_promotion; ?></td>
+                                            <td><?= $result->internship_agreement_file_path_candidature; ?></td>
-                                        </tr>
-                                        <tr>
-                                            <td><i class="fas fa-user-alt"></i></td>
-                                            <td>
-                                                <?php
-                                                echo $result->place_number_internship;
-                                                if($result->place_number_internship > 1) {echo " places disponibles";}
-                                                else {echo " place disponible";}?>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td><i class="fas fa-chart-bar"></i></td>
-                                            <td><?= $result->competences_internship; ?></td>
-                                        </tr>
-                                        <tr>
-                                            <td><i class="fas fa-handshake"></i></td>
-                                            <td>Confiance du pilote : <?= $result->note; ?></td>
                                         </tr>
                                     </table>
                                 </div>

offres_stages.php

@@ -93,6 +93,26 @@ if (isset($_SESSION["username"])){
         <link rel="stylesheet" type="text/css" href="assets/css/offres_stages.css">
     </head>
     <body>
+    <div id="modal_postuler" class="modal">
+            <div class="modal-content">
+                <span class="close">&times;</span>
+                <div class="title_modal">Postuler pour </div>
+                <form class="form_postuler" method="post" enctype="multipart/form-data">
+                    <div class="table-container">
+                        <div class="info_message"></div>
+                        <div class="flex-table">
+                            <div class="flex-row name">Curriculum Vitae</div>
+                            <div class="flex-row value"><input id="cv" type="file" name="cv" require></div>
+                        </div>
+                        <div class="flex-table">
+                            <div class="flex-row name">Lettre de motivation</div>
+                            <div class="flex-row value"><input id="lm" type="file" name="lm" require></div>
+                        </div>
+                    </div>
+                    <button type="submit">Envoyer</button>
+                </form>
+            </div>
+        </div>
         <div class="container">
             <?php require "controller/Nav_bar.php" ?>
             <div class="main">
@@ -255,7 +275,7 @@ if (isset($_SESSION["username"])){
                                     </table>
                                 </div>
                                 <div class="button">
-                                    <button class="button_postuler">Postuler</button>
+                                    <button id="button_postuler<?=$result->ID_internship?>" class="button_postuler">Postuler</button>
                                 </div>
                             </div>
                         </div>