templates/mission_details/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block body %}
  4.     <style>
  5.         /* Général */
  6.         body {
  7.             font-family: 'Roboto', sans-serif;
  8.             background-color: #F7F7F7;
  9.             color: #333;
  10.             line-height: 1.6;
  11.             margin: 0;
  12.             padding: 0;
  13.         }
  15.         /* Conteneurs et sections */
  16.         .rectangle {
  17.             border-radius: 10px;
  18.             border: 1px solid #B0C4DE;
  19.             padding: 30px;
  20.             margin-left: 50px;
  21.             margin-bottom: 30px;
  22.             background-color: #FFF;
  23.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  24.             overflow-wrap: break-word;
  25.             word-wrap: break-word;
  26.             overflow-x: hidden;
  27.             height: auto;
  28.         }
  30.         .summary-container {
  31.             background-color: #FFF;
  32.             border: 1px solid #B0C4DE;
  33.             border-radius: 10px;
  34.             padding: 25px;
  35.             margin-bottom: 20px;
  36.             margin-left: 50px;
  37.             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  38.             overflow-wrap: break-word;
  39.             word-wrap: break-word;
  40.             overflow-x: hidden;
  41.             height: auto;
  42.             width: 100%; /* Pour qu'il prenne toute la largeur de sa colonne */
  43.             max-width: 400px;
  44.         }
  46.         /* Titres et en-têtes */
  47.         .Title {
  48.             font-family: 'Roboto', sans-serif;
  49.             font-size: 36px;
  50.             font-weight: 700;
  51.             color: #004080;
  52.             margin-bottom: 10px;
  53.         }
  55.         .second-title {
  56.             font-family: 'Roboto', sans-serif;
  57.             font-size: 28px;
  58.             color: #66B2FF;
  59.             margin-bottom: 20px;
  60.         }
  62.         .sous-titre {
  63.             font-size: 24px;
  64.             color: #004080;
  65.             border-bottom: 2px solid #66B2FF;
  66.             margin-bottom: 15px;
  67.             padding-bottom: 5px;
  68.         }
  70.         .RefMission {
  71.             font-size: 16px;
  72.             font-weight: bold;
  73.             color: #a3a3a3;
  74.             margin-bottom: 30px;
  75.         }
  77.         .vp {
  78.             font-size: 18px;
  79.             color: #333;
  80.             margin-bottom: 40px;
  81.         }
  83.         /* Boutons */
  84.         .large-button2 {
  85.             background-color: #0056b3;
  86.             color: white;
  87.             font-size: 20px;
  88.             width: 160px;
  89.             padding: 12px 0;
  90.             border: none;
  91.             border-radius: 8px;
  92.             cursor: pointer;
  93.             text-align: center;
  94.             transition: background-color 0.3s, transform 0.3s;
  95.             display: flex;
  96.             align-items: center;
  97.             justify-content: center;
  98.         }
  100.         .large-button2:hover {
  101.             background-color: #0056b3;
  102.             transform: translateY(-2px);
  103.         }
  105.         .large-button2 i {
  106.             margin-right: 8px;
  107.         }
  109.         /* Informations supplémentaires */
  110.         .summary-header {
  111.             font-size: 24px;
  112.             font-weight: bold;
  113.             color: #004080;
  114.             border-bottom: 1px solid #ccc;
  115.             margin-bottom: 20px;
  116.             padding-bottom: 5px;
  117.         }
  119.         .summary-content p {
  120.             margin: 5px 0;
  121.             font-size: 18px;
  122.             color: #004080;
  123.         }
  125.         .summary-content .value {
  126.             font-size: 1em;
  127.             width: auto;
  128.         }
  130.         /* Statut */
  131.         .status-header {
  132.             font-size: 22px;
  133.             font-weight: 700;
  134.             color: #66B2FF;
  135.             margin-top: 25px;
  136.             text-align: center;
  137.             padding: 10px;
  138.         }
  140.         .status-content {
  141.             font-size: 20px;
  142.             font-weight: bold;
  143.             color: #004080;
  144.             text-align: center;
  145.             background-color: #E6F2FA;
  146.             padding: 15px;
  147.             border-radius: 8px;
  148.             border: 1px solid #B0C4DE;
  149.         }
  151.         /* Mise en page et formulaires */
  152.         .form-inline {
  153.             display: flex;
  154.             align-items: center;
  155.             margin-left: 40px;
  156.         }
  158.         .block {
  159.             margin-left: 60px;
  160.         }
  162.         .move-left {
  163.             margin-left: -20px;
  164.         }
  166.         .prefix {
  167.             color: #66B2FF;
  168.             font-size: 0.9em;
  169.             font-weight: normal;
  170.         }
  172.         /* Styles pour la liste des compétences */
  173.         .competences-list {
  174.             list-style-type: none;
  175.             padding: 0;
  176.         }
  178.         .competence-item {
  179.             display: flex;
  180.             justify-content: space-between; /* Aligne les éléments à gauche et à droite */
  181.             align-items: center;
  182.             padding: 10px;
  183.             border-bottom: 1px solid #ddd;
  184.         }
  186.         .competence-info {
  187.             display: flex;
  188.             flex: 1; /* Occupe tout l'espace disponible à gauche */
  189.             font-size: 18px;
  190.         }
  192.         .categorie {
  193.             min-width: 120px; /* Largeur minimale fixe pour la catégorie */
  194.         }
  196.         .libelle {
  197.             margin-left: 10px; /* Espacement entre catégorie et libellé */
  198.             flex: 1;
  199.         }
  201.         .stars-container {
  202.             display: flex;
  203.             margin-left: 10px;
  204.             justify-content: flex-end; /* Aligne les étoiles à droite */
  205.         }
  207.         .star {
  208.             font-size: 25px;
  209.             color: #ddd; /* couleur des étoiles non remplies */
  210.         }
  212.         .star.filled {
  213.             color: #f39c12; /* couleur des étoiles remplies */
  214.         }
  216.         .large-button3 {
  217.             background-color:rgb(30, 150, 225)!important;
  218.             border-radius:rgb(30, 150, 225)!important;
  219.             width: 200px;
  220.             margin-left: -60px;
  222.         }
  223.     </style>
  225.     <div class="block row pt-5">
  226.         <div class="col-md-8">
  227.             <div class="row rectangle">
  228.                 <div class="col-md-10">
  229.                     <h2 class="Title">{{ laMission.titre }}</h2>
  230.                     <h3 class="second-title mb-4">
  231.                         <span class="prefix">Mission proposée par :</span> {% if laMission.confidentialite == 1 %}
  232.                                 Confidentiel
  233.                                 {% else %}
  234.                                     {{ laMission.entrepriseconcernee }} 
  235.                                 {% endif %}
  236.                     </h3>
  237.                     <p class="text-muted RefMission">
  238.                         <u>Ref :</u> {{ laMission.referencemission }}</p>
  239.                 </div>
  240.                 <div class="col-md-2">
  241.                 {% if hasAlreadyApplied %}
  242.                     <button type="button" class="btn btn-secondary mt-3 large-button3 move-left" disabled>
  243.                         <i class="fas fa-times-circle"></i> Vous avez déjà postulé
  244.                     </button>
  245.                 {% elseif laMission.statut == 0 %}
  246.                     <button type="button" class="btn btn-secondary mt-3 large-button2 move-left" disabled>
  247.                         <i class="fas fa-times-circle"></i> Postuler
  248.                     </button>
  249.                 {% else %}
  250.                     <a type="button" href="{{ path('app_postuler', { 'missionId': laMission.id }) }}" class="btn btn-primary mt-3 large-button2 move-left">
  251.                         <i class="fas fa-check-circle"></i> Postuler
  252.                     </a>
  253.                 {% endif %}
  254.             </div>
  255.             </div>
  256.             <div class="rectangle">
  257.                 <h2 class="sous-titre mb-4">À propos de l'entreprise :</h2>
  258.                 <p class="vp">{{ laMission.livrable|nl2br }}</p>
  260.                 <h2 class="sous-titre mb-4">Votre Mission :</h2>
  261.                 <p class="vp">{{ laMission.contexte|nl2br }}</p>
  263.                 <h2 class="sous-titre mb-4">Objectifs à atteindre :</h2>
  264.                 <p class="vp">{{ laMission.objectifs|nl2br }}</p>
  267.                 <h2 class="sous-titre mb-4">Compétences requises :</h2>
  268.                 
  269.                 {% if competence is not empty %}
  270.                     <ul class="competences-list">
  271.                         {% for competence in competence %}
  272.                             <li>
  273.                                 <div class="competence-info">
  274.                                     <span class="categorie">{{ competence.categorie }} : </span>
  275.                                     <span class="libelle">{{ competence.libelle }}</span
  276.                                 </div>
  277.                                 <div class="stars-container">
  278.                                     {% for i in 1..5 %}
  279.                                         <span class="star {% if i <= competence.niveaucompetence %}filled{% endif %}">&#9733;</span>
  280.                                     {% endfor %}
  281.                                 </div>
  282.                             </li>
  283.                         {% else %}
  284.                             <li>Aucune compétence ajoutée.</li>
  285.                         {% endfor %}
  286.                     </ul>
  287.                 {% else %}
  288.                     <p>Aucune compétence requise pour cette mission.</p>
  289.                 {% endif %}
  290.             </div>
  291.         </div>
  293.         <div class="col-md-3 container">
  294.             <div class="summary-container">
  295.                 <div class="summary-header">Informations</div>
  296.                 <div class="summary-content">
  297.                     <p class="vp">
  298.                         <span class="label"><i class="fas fa-tasks"></i> Type :</span>
  299.                         <span class="value">{{ laMission.modalite }}</span>
  300.                     </p>
  301.                     <p class="vp">
  302.                         <span class="label"><i class="fas fa-calendar-alt"></i> Début :</span>
  303.                         <span class="value">{{ laMission.datedebut|date('d/m/Y') }}</span>
  304.                     </p>
  305.                     <p class="vp">
  306.                         <span class="label"><i class="fas fa-hourglass-half"></i> Durée :</span>
  307.                         <span class="value">{{ laMission.duree }} {{ laMission.uniteduree }} mois</span>
  308.                     </p>
  309.                     <p class="vp">
  310.                         <span class="label"><i class="fas fa-euro-sign"></i> Budget :</span>
  311.                         <span class="value">
  312.                             {% if laMission.budget == 0 or laMission.budget is null %}
  313.                                 Non renseigné
  314.                             {% else %}
  315.                                 {{ laMission.budget }} €
  316.                             {% endif %}
  317.                         </span>
  318.                     </p>
  319.                     <p class="vp">
  320.                         <span class="label"><i class="fas fa-map-marker-alt"></i> Lieu :</span>
  321.                         <span class="value">{{ laMission.cp }}, {{ laMission.ville }}</span>
  322.                     </p>
  323.                     <p class="vp">
  324.                         <span class="label"><i class="{{ laMission.experiencedmd > 5 ? 'fas fa-user-tie' : (laMission.experiencedmd > 1 ? 'fas fa-user' : 'fas fa-user-graduate') }}"></i> Expérience demandée :</span>
  325.                         <span class="value">
  326.                             {{ laMission.experiencedmd }} {{ laMission.experiencedmd > 1 ? 'ans' : 'an' }}
  327.                         </span>
  328.                     </p>
  329.                 </div>
  331.                 <div class="status-header">Statut de la mission :</div>
  332.                 <div class="status-content">{{ laMission.statut ? 'Ouvert' : 'Fermé' }}</div>
  333.             </div>
  334.         </div>
  336.         <div class="col-md-1"></div>
  337.         <div class="button-group"></div>
  338.     </div>
  339. {% endblock %}
  341. {% block javascripts %}
  342.     {% include "include/_modale.html.twig" %}
  343. {% endblock %}