templates/home/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Accueil{% endblock %}
  5. {% block body %}
  6. <style>
  7.     .btn-info {
  8.         color: white;
  9.     }
  11.     /* Style pour le background image */
  12.     body, html {
  13.         margin: 0;
  14.         padding: 0;
  15.         height: 100%;
  16.     }
  18.     .btn-container { 
  19.         margin-top: 100px;
  20.         /* Positionner tout à droite avec un espacement de 20px du bord */
  21.         margin-right: 50px; 
  22.         display: flex; /* Utiliser Flexbox pour aligner les éléments horizontalement */
  23.         justify-content: center; /* Centrer les boutons horizontalement dans le conteneur */
  24.         gap: 20px; /* Espacement entre les boutons */
  25.          /* Ajuster si nécessaire pour l'espacement du bord */
  26.         align-items: center; 
  27.         margin-left: 350px;
  28.     }
  30.     .btn-container button {
  31.         height: 80px;
  32.         width: 400px;
  33.         font-size: 1.5rem;
  34.         border: 2px solid transparent; /* Bordure transparente */
  35.         transition: all 0.3s ease; /* Transition douce pour les effets */
  36.     }
  38.     .btn-container button:hover {
  39.         color: #000; /* Couleur du texte au survol */
  40.         border-color: #000; /* Couleur de la bordure au survol */
  41.         background-color: transparent; /* Fond transparent au survol */
  42.     }
  44.     .welcome-text {
  45.         text-align: center;
  46.         margin-top: 30px;
  47.     }
  49.     .sub-text {
  50.         text-align: center;
  51.         font-size: 1rem;
  52.         font-weight: normal;
  53.         margin-top: 12px;
  54.     }
  56.     /* Style de la ligne noire */
  57.     .divider {
  58.         width: 20%;
  59.         height: 1px;
  60.         background-color: black;
  61.         margin: 20px auto;
  62.     }
  64.     .container {
  65.         background: url('{{ asset('images/fond2.png') }}') no-repeat center center;
  66.         background-size: cover;
  67.         height: 50vh;
  68.         margin: 0;
  69.         position: relative; /* Ajout d'une position relative pour le positionnement absolu */
  70.     }
  72.     .search {
  73.         margin: 20px auto;
  74.         padding: 20px;
  75.         border: 2px solid #ddd;
  76.         border-radius: 10px;
  77.         background-color: #f9f9f9;
  78.     }
  80.     .search h3 {
  81.         margin-bottom: 15px;
  82.         margin-left: 90px;
  83.         color: #007bff;
  84.     }
  86.     .form-inline input {
  87.         margin-bottom: 10px;
  88.         height: 40px;
  89.     }
  91.     .form-inline .btn {
  92.         height: 40px;
  93.     }
  95.     .qui-sommes-nous {
  96.         background-color: white; /* Fond blanc */
  97.         padding: 20px; /* Espacement interne */
  98.         margin: 20px; /* Espacement externe */
  99.         border-radius: 10px; /* Coins arrondis */ 
  100.         width: 600px;
  101.         text-align: center; /* Alignement centré */
  102.         margin-top: 150px;
  103.         margin-left: 200px; /* Centrer horizontalement */
  104.         margin-right: auto; /* Centrer horizontalement */
  105.     }
  107.     .qui-sommes-nous .btn {
  108.         width: 150px; /* Rétrécir le bouton */
  109.         height: 50px; /* Rétrécir la hauteur du bouton */
  110.         font-size: 1rem; /* Réduire la taille de la police */
  111.         margin-top: 20px; /* Espacement au-dessus du bouton */
  112.     }
  114.     .nos-valeurs {
  115.         background-color: white; /* Fond blanc */
  116.         padding: 20px; /* Espacement interne */
  117.         margin: 20px; /* Espacement externe */
  118.         border-radius: 10px; /* Coins arrondis */
  119.         text-align: center; /* Alignement à gauche */
  120.         width: 600px;
  121.         margin-top: 150px;
  122.         margin-left: 50px; /* Centrer horizontalement */
  123.         margin-right: 200px; /* Centrer horizontalement */
  124.     }
  126.     .nos-valeurs-btn {
  127.         margin-top: auto; /* Pour coller au bas */
  128.     }
  130.     .container1{
  131.         margin-top: 100px;
  132.         background: url('{{ asset('images/cercle.png') }}') no-repeat center center;
  133.         background-size: cover;
  134.         height: 100vh;
  135.         position: relative;
  136.         margin-bottom: 200px;
  137.         
  138.     }
  140.     .btn-red {
  141.         background-color :rgb(82, 212, 238);
  142.         color: white;
  143.     }
  146.     .btn-lightblue {
  147.     background-color: #ADD8E6; /* Bleu clair */
  148.     color: white; /* Couleur du texte */
  149.     border: none; /* Supprime la bordure */
  150.     }
  152.     .btn-lightblue:hover {
  153.         background-color: #87CEEB; /* Couleur pour le survol */
  154.     }
  156.     .alert {
  157.         padding: 15px;
  158.         margin-bottom: 20px;
  159.         border-radius: 5px;
  160.     }
  162.     .alert-success {
  163.         background-color: #d4edda;
  164.         color: #155724;
  165.     }
  167.     .alert-danger {
  168.         background-color: #f8d7da;
  169.         color: #721c24;
  170.     }
  172.     .title {
  173.         margin-left: 200px;
  174.     }
  176.     .btn.btn-lightblue {
  177.     background-color: white; /* Fond blanc */
  178.     color: #1E90FF; /* Couleur du texte en bleu Dodger Blue */
  179.     border: 2px solid #1E90FF; /* Bordure bleue */
  180.     border-radius: 5px; /* Coins légèrement arrondis */
  181.     padding: 12px 24px; /* Espacement interne pour un meilleur confort *//* Police en gras */
  182.     transition: background-color 0.3s, color 0.3s, border-color 0.3s, transform 0.3s; /* Transition douce pour les effets */
  183. }
  185. .btn.btn-lightblue:hover {
  186.     background-color: #1E90FF; /* Fond bleu au survol */
  187.     color: white; /* Texte blanc au survol */
  188.     border-color: #1E90FF; /* Bordure bleue au survol */
  189.     transform: scale(1.05); /* Agrandir légèrement au survol */
  190. }
  192. .btn.btn-lightblue:focus {
  193.     outline: none; /* Supprimer le contour par défaut */
  194.     box-shadow: 0 0 0 2px rgba(30, 144, 255, 0.5); /* Ajouter une ombre portée bleue au focus */
  195. }
  197. .mission {
  198.     margin: 20px;
  199. }
  201. /* Style des cartes des missions */
  202.     .card {
  203.         border: 1px solid #ddd; /* Bordure légère pour délimiter la carte */
  204.         border-radius: 10px; /* Coins arrondis */
  205.         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Ombre légère pour effet 3D */
  206.         overflow: hidden; /* Pour que les coins arrondis soient visibles */
  207.         transition: box-shadow 0.3s ease, transform 0.3s ease; /* Transition pour les effets */
  208.     }
  210.     .card:hover {
  211.         box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Ombre plus marquée au survol */
  212.         transform: translateY(-5px); /* Légère élévation au survol */
  213.     }
  215.     .card-body {
  216.         padding: 20px; /* Espacement interne */
  217.     }
  219.     .card-title {
  220.         font-size: 1.5rem; /* Taille de police légèrement augmentée */
  221.         font-weight: bold; /* Texte en gras pour le titre */
  222.         color: #333; /* Couleur du texte */
  223.         margin-bottom: 10px; /* Espacement sous le titre */
  224.     }
  226.     .ref {
  227.         font-size: 0.875rem; /* Taille de police légèrement réduite */
  228.         color: #555; /* Couleur légèrement plus claire */
  229.     }
  231.     .list-unstyled {
  232.         padding-left: 0; /* Supprimer l’espacement par défaut */
  233.         list-style: none; /* Supprimer les puces */
  234.         font-size: 1rem; /* Taille de police confortable */
  235.         color: #666; /* Couleur du texte */
  236.     }
  238.     .list-unstyled li {
  239.         margin-bottom: 10px; /* Espacement entre les éléments de liste */
  240.     }
  242.     .btn-primary {
  243.         background-color: #007bff; /* Couleur de fond pour le bouton */
  244.         color: white; /* Couleur du texte */
  245.         border: none; /* Supprimer la bordure */
  246.         border-radius: 5px; /* Coins arrondis */
  247.         padding: 10px 20px; /* Espacement interne */
  248.         transition: background-color 0.3s ease, transform 0.3s ease; /* Transition pour les effets */
  249.     }
  251.     .btn-primary:hover {
  252.         background-color: #0056b3; /* Couleur de fond au survol */
  253.         transform: scale(1.05); /* Légère agrandissement au survol */
  254.     }
  256.     .client-name {
  257.         background-color: #f0f8ff; /* Fond légèrement coloré pour le nom du client */
  258.         padding: 5px 10px; /* Espacement interne */
  259.         border-radius: 5px; /* Coins arrondis */
  260.         font-weight: bold; /* Texte en gras */
  261.         color: #007bff;
  262.         font-size: 1.2rem;  /* Couleur du texte */
  263.     }
  265.     .date-duration {
  266.         font-size: 0.925rem; /* Taille de police légèrement réduite */
  267.         color: #333; /* Couleur du texte */
  268.     }
  270.     .budget {
  271.         font-size: 1.1rem; /* Taille de police confortable */
  272.         color: #333; /* Couleur du texte */
  273.     }
  275.     .pagination {
  276.     display: flex;
  277.     justify-content: center;
  278.     padding-left: 0;
  279.     list-style: none;
  280.     border-radius: 0.25rem;
  281.     margin: 20px 0;
  282. }
  284. .pagination li {
  285.     margin: 0 5px;
  286. }
  288. .pagination li a,
  289. .pagination li span {
  290.     color: #007bff; /* Couleur du texte */
  291.     text-decoration: none;
  292.     background-color: white;
  293.     border: 1px solid #dee2e6;
  294.     padding: 10px 15px;
  295.     border-radius: 0.25rem;
  296.     transition: background-color 0.2s, color 0.2s;
  297. }
  299. .pagination li a:hover {
  300.     background-color: #007bff;
  301.     color: white;
  302. }
  304. .pagination li.active span {
  305.     background-color: #007bff;
  306.     color: white;
  307.     border-color: #007bff;
  308. }
  310. .pagination li.disabled span {
  311.     color: #6c757d;
  312.     background-color: #fff;
  313.     border-color: #dee2e6;
  314. }
  317. </style>
  322.     {% for label, messages in app.flashes %}
  323.         <div class="alert alert-{{ label }}">
  324.             {% for message in messages %}
  325.                 {{ message }}
  326.             {% endfor %}
  327.         </div>
  328.     {% endfor %}
  330. <div class="container mb-5">
  331.     <div class="title">
  332.     <h1 class="welcome-text">Bienvenue sur DimaWork</h1>
  333.     <div class="divider"></div> <!-- Ligne noire ajoutée ici -->
  334.     <h3 class="sub-text">Rejoignez DimaWork, l'avenir vous appartient...</h3>
  335.     </div>
  336.     <div class="btn-container">
  337.     {% if is_granted('ROLE_SUPERADMIN') %}
  338.         <!-- Admin sees both buttons -->
  339.         <button class="btn btn-primary mb-5" onclick="window.location.href='{{ path('app_register1') }}'">Inscription Freelance</button>
  340.         <button class="btn btn-lightblue mb-5" onclick="window.location.href='{{ path('app_register_entreprise') }}'">Inscription Entreprise</button>
  341.         <button class="btn btn-red mb-5" onclick="window.location.href='{{ path('app_creation_admin') }}'">Inscription Admin Opérationnel</button>
  342.     {% elseif is_granted('ROLE_ADMIN') %}
  343.         <!-- Admin sees both buttons -->
  344.         <button class="btn btn-primary mb-5" onclick="window.location.href='{{ path('app_register1') }}'">Inscription Freelance</button>
  345.         <button class="btn btn-lightblue mb-5" onclick="window.location.href='{{ path('app_register_entreprise') }}'">Inscription Entreprise</button>
  346.     {% elseif is_granted('ROLE_USER') %}
  347.         <!-- Consultant sees no buttons -->
  348.         {# No buttons shown #}
  349.     {% elseif app.user is null %}
  350.         <!-- User (including non-connected) sees only the Freelance button -->
  351.         <button class="btn btn-primary mb-5" onclick="window.location.href='{{ path('app_register1') }}'">Inscription Freelance</button>
  352.     {% endif %}
  353. </div>
  354. </div>
  356. {# barre de recherche #}
  357. <div class="search mt-5" style="max-width: 90%;">
  358.     <h3>Recherchez vos missions</h3>
  359.     <form method="get" class="form-inline d-flex justify-content-center align-items-center">
  360.         <input type="text" name="titre" class="form-control mr-2" placeholder="Titre" value="{{ criteria.titre|default('') }}"style="max-width: 175px;">
  361.         <input type="text" name="entreprise_concernee" class="form-control mr-2" placeholder="Client" value="{{ criteria.entreprise_concernee|default('') }}"style="max-width: 175px;">
  362.         <input type="text" name="ville" class="form-control mr-2" placeholder="Ville" value="{{ criteria.ville|default('') }}" style="max-width: 175px;">
  363.         <input type="text" name="duree" class="form-control mr-2" placeholder="Durée (mois)" value="{{ criteria.duree|default('') }}" style="max-width: 175px;">
  364.         <input type="number" name="budget_min" class="form-control mr-2" placeholder="Budget min (€)" value="{{ criteria.budget_min|default('') }}" step="0.01" style="max-width: 175px;">
  365.         <input type="number" name="budget_max" class="form-control mr-2" placeholder="Budget max (€)" value="{{ criteria.budget_max|default('') }}" step="0.01" style="max-width: 175px;">
  366.         
  367.         <button type="submit" class="btn btn-info mr-2">Rechercher</button>
  368.         <button type="reset" class="btn btn-secondary" onclick="window.location.href='{{ path('app_home') }}'">Réinitialiser</button>
  369.     </form>
  370. </div>
  376. <div class="mission">
  377.     <div class="row">
  378.         {% for laMission in lesMissions.items %}
  379.             <div class="col-md-4 mb-4">
  380.                 <div class="card">
  381.                     <div class="card-body">
  382.                         <div class="d-flex justify-content-between align-items-center mb-3">
  383.                             <h5 class="card-title">{{ laMission.titre }}</h5>
  384.                             <button type="button" class="close" aria-label="Close"></button>
  385.                         </div>
  386.                         <div class="d-flex justify-content-between align-items-center mb-2">
  387.                             <span class="ref">REF: {{ laMission.referencemission }}</span>
  388.                         </div>
  389.                         <ul class="list-unstyled mb-3">
  390.                             <li><span class="client-name">Client : {% if laMission.confidentialite == 1 %}
  391.                                 Confidentiel
  392.                                 {% else %}
  393.                                     {{ laMission.entrepriseconcernee }} 
  394.                                 {% endif %}</span></li>
  395.                             <li><i class="fas fa-map-marker-alt"></i> Lieu : {{ laMission.ville }}</li>
  396.                             <li class="date-duration"><i class="fas fa-calendar-alt"></i> Début : {{ laMission.datedebut|date('d/m/Y') }}</li>
  397.                             <li class="date-duration"><i class="fas fa-clock"></i> Durée : {{ laMission.duree }} mois</li>
  399.                             <li class="date-duration"> 
  400.                                 <i class="{{ laMission.experiencedmd > 5 ? 'fas fa-user-tie' : (laMission.experiencedmd > 1 ? 'fas fa-user' : 'fas fa-user-graduate') }}"></i> Expérience demandée :
  401.                                     {{ laMission.experiencedmd }} {{ laMission.experiencedmd > 1 ? 'ans' : 'an' }}
  402.                             </li>
  404.                             <li class="budget"><i class="fas fa-lock"></i> Budget : {% if laMission.budget == 0 or laMission.budget is null %} Non renseigné {% else %} {{ laMission.budget }} € {% endif %}</li>
  405.                         </ul>
  406.                         {% set route = 
  407.                             is_granted('ROLE_SUPERADMIN') or is_granted('ROLE_ADMIN') ? 'app_admin_mission_details' :
  408.                             (is_granted('ROLE_ENTREPRISE') and laMission.entreprise is not null and laMission.entreprise.id == app.user.id ? 'app_entreprise_mission_details' : 'app_mission_details') 
  409.                         %}
  411.                         <a class="btn btn-primary btn-block" href="{{ path(route, {'id': laMission.id }) }}">Détails</a>
  416.                     </div>
  417.                 </div>
  418.             </div>
  419.         {% endfor %}
  420.     </div>
  421. </div>
  423. <div class="pagination justify-content-center mt-4">
  424.     {{ knp_pagination_render(lesMissions, '@KnpPaginator/Pagination/twitter_bootstrap_v4_pagination.html.twig') }}
  425. </div>
  433. <div class="container1">
  434.     <div class="row">
  435.         <div class="col-md-6">
  436.             <div class="qui-sommes-nous">
  437.                 <h3>Qui sommes-nous?</h3>
  438.                 <p class="sub-text">DimaWork est une plateforme d’intermédiation entre entreprises et consultants. Les entreprises ont besoin de compétences particulières et nous proposons des freelances pour répondre à ces besoins.</p>
  439.                 <button class="btn btn-info" onclick="window.location.href='{{ path('app_accueil') }}'">En savoir plus</button>
  440.             </div>
  441.         </div>
  442.         <div class="col-md-6">
  443.         </div>
  444.         <div class="row mb-5">
  445.         <div class="col-md-6">
  446.         </div>
  447.         <div class="col-md-6">
  448.             <div class="nos-valeurs">
  449.                 <h3>Nos valeurs</h3>
  450.                 <p class="sub-text">DimaWork permet aux entreprises de sélectionner parmi une variété de travailleurs indépendants, chacun offrant son expertise particulière. Grâce à cette diversité de possibilités, les entreprises peuvent sélectionner le consultant qui répond le mieux à leurs besoins et à leur culture institutionnelle.</p>
  451.                 <div class="nos-valeurs-btn">
  452.                     <button class="btn btn-info"  onclick="window.location.href='{{ path('app_accueil') }}'">En savoir plus</button>
  453.                 </div>
  454.             </div>
  455.         </div>
  456.     </div>
  457. </div>
  459. {% endblock %}