templates/landing_pages/components/Objectifs_list.html.twig line 1

  2. <section class="container my-5">
  3.     <style>
  4.         .no-bullets {
  5.             list-style-type: none;
  6.             padding-left: 0;
  7.         }
  8.     </style>
  9.     <div class="row">
  10.         <div class="col-12">
  11.             <h2>Derniers objectifs hebdomadaires des participants</h2>
  12.         </div>
  13.     </div>
  14.     <div class="row">
  15.         <div class="col-12">
  16.             <table class="table table-striped table-responsive">
  17.                 <thead>
  18.                     <tr>
  19.                         <th scope="col" class="text-center">Participant</th>
  20.                         <th scope="col" class="text-center">Objectifs</th>
  21.                         <th scope="col" class="text-center">Durée</th>
  22.                         <th scope="col" class="text-center">Jours réalisés</th>
  23.                         <th scope="col" class="text-center">Progrès</th>
  24.                     </tr>
  25.                 </thead>
  26.                 <tbody>
  27.                     <tr>
  28.                         <td class="text-center  align-middle">🥈 Laura</td>
  29.                         <td class="text-center  align-middle">
  30.                             <ul class="no-bullets">
  31.                                 <li>Faire 30 minutes de yoga</li>
  32.                                 <li>Boire 2 litres d'eau</li>
  33.                                 <li>Apprendre 10 mots de vocabulaire espagnol</li>
  34.                             </ul>
  35.                         </td>
  36.                         <td class="text-center  align-middle">
  37.                             <ul class="no-bullets">
  38.                                 <li>5 jours</li>
  39.                                 <li>3 jours</li>
  40.                                 <li>7 jours</li>
  41.                             </ul>
  42.                         </td>
  43.                         <td class="text-center  align-middle">
  44.                             <ul class="no-bullets">
  45.                                 <li>4</li>
  46.                                 <li>3</li>
  47.                                 <li>2</li>
  48.                             </ul>
  49.                         </td>
  50.                         <td class="text-center  align-middle">
  51.                             <div class="mb-2">
  52.                                 <div class="progress" style="height: 10px; width: 150px;">
  53.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 80%;" aria-valuenow="80"
  54.                                         aria-valuemin="0" aria-valuemax="100">80%</div>
  55.                                 </div>
  56.                             </div>
  57.                             <div class="mb-2">
  58.                                 <div class="progress" style="height: 10px; width: 150px;">
  59.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  60.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  61.                                 </div>
  62.                             </div>
  63.                             <div>
  64.                                 <div class="progress" style="height: 10px; width: 150px;">
  65.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 60%;" aria-valuenow="60"
  66.                                         aria-valuemin="0" aria-valuemax="100">60%</div>
  67.                                 </div>
  68.                             </div>
  69.                         </td>
  70.                     
  71.                     </tr>
  72.                     <tr>
  73.                         <td class="text-center  align-middle">🥉 Maxime</td>
  74.                         <td class="text-center  align-middle">
  75.                             <ul class="no-bullets">
  76.                                 <li>Lire 20 pages de livre par jour</li>
  77.                                 <li>Éviter les sucreries</li>
  78.                                 <li>Faire 15 minutes de renforcement musculaire</li>
  79.                             </ul>
  80.                         </td>
  81.                         <td class="text-center  align-middle">
  82.                             <ul class="no-bullets">
  83.                                 <li>7 jours</li>
  84.                                 <li>5 jours</li>
  85.                                 <li>3 jours</li>
  86.                             </ul>
  87.                         </td>
  88.                         <td class="text-center  align-middle">
  89.                             <ul class="no-bullets">
  90.                                 <li>4</li>
  91.                                 <li>3</li>
  92.                                 <li>2</li>
  93.                             </ul>
  94.                         </td>
  95.                         <td class="text-center  align-middle">
  96.                             <div class="mb-2">
  97.                                 
  98.                                     <div class="progress" style="height: 10px; width: 150px;">
  99.                                         <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 57%;"
  100.                                             aria-valuenow="57" aria-valuemin="0" aria-valuemax="100">57%</div>
  101.                                     </div>
  102.                             </div>
  103.                             <div class="mb-2">
  104.                                 <div class="progress" style="height: 10px; width: 150px;">
  105.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  106.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  107.                                 </div>
  108.                             </div>
  109.                             <div>
  110.                                 <div class="progress" style="height: 10px; width: 150px;">
  111.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 53%;" aria-valuenow="53"
  112.                                         aria-valuemin="0" aria-valuemax="100">53%</div>
  113.                                 </div>
  114.                             </div>
  115.                         </td>
  116.                     </tr>
  117.                     <tr>
  118.                         <td class="text-center  align-middle">🥇 Élodie</td>
  119.                         <td class="text-center  align-middle">
  120.                             <ul class="no-bullets">
  121.                                 <li>Écrire 500 mots pour son blog</li>
  122.                                 <li>Préparer un repas sain</li>
  123.                                 <li>Faire 30 minutes de marche rapide</li>
  124.                             </ul>
  125.                         </td>
  126.                         <td class="text-center  align-middle">
  127.                             <ul class="no-bullets">
  128.                                 <li>6 jours</li>
  129.                                 <li>4 jours</li>
  130.                                 <li>3 jours</li>
  131.                             </ul>
  132.                         </td>
  133.                         <td class="text-center  align-middle">
  134.                             <ul class="no-bullets">
  135.                                 <li>5</li>
  136.                                 <li>4</li>
  137.                                 <li>3</li>
  138.                             </ul>
  139.                         </td>
  140.                         <td class="text-center  align-middle">
  141.                             <div class="mb-2">
  142.                                 <div class="progress" style="height: 10px; width: 150px;">
  143.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 83%;" aria-valuenow="83"
  144.                                         aria-valuemin="0" aria-valuemax="100">83%</div>
  145.                                 </div>
  146.                             </div>
  147.                             <div class="mb-2">
  148.                                 <div class="progress" style="height: 10px; width: 150px;">
  149.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  150.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  151.                                 </div>
  152.                             </div>
  153.                             <div>
  154.                                 <div class="progress" style="height: 10px; width: 150px;">
  155.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 83%;" aria-valuenow="83"
  156.                                         aria-valuemin="0" aria-valuemax="100">83%</div>
  157.                                 </div>
  158.                             </div>
  159.                         </td>
  160.                     </tr>
  161.                     <tr>
  162.                         <td class="text-center  align-middle">🥉 Mathieu</td>
  163.                         <td class="text-center  align-middle">
  164.                             <ul class="no-bullets">
  165.                                 <li>Faire 10000 pas quotidiens</li>
  166.                                 <li>Étudier un chapitre de cours</li>
  167.                                 <li>Écouter un podcast inspirant</li>
  168.                             </ul>
  169.                         </td>
  170.                         <td class="text-center  align-middle">
  171.                             <ul class="no-bullets">
  172.                                 <li>4 jours</li>
  173.                                 <li>2 jours</li>
  174.                                 <li>5 jours</li>
  175.                             </ul>
  176.                         </td>
  177.                         <td class="text-center  align-middle">
  178.                             <ul class="no-bullets">
  179.                                 <li>3</li>
  180.                                 <li>2</li>
  181.                                 <li>1</li>
  182.                             </ul>
  183.                         </td>
  184.                         <td class="text-center  align-middle">
  185.                             <div class="mb-2">
  186.                                 <div class="progress" style="height: 10px; width: 150px;">
  187.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75"
  188.                                         aria-valuemin="0" aria-valuemax="100">75%</div>
  189.                                 </div>
  190.                             </div>
  191.                             <div class="mb-2">
  192.                                 <div class="progress" style="height: 10px; width: 150px;">
  193.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 50%;" aria-valuenow="50"
  194.                                         aria-valuemin="0" aria-valuemax="100">50%</div>
  195.                                 </div>
  196.                             </div>
  197.                             <div>
  198.                                 <div class="progress" style="height: 10px; width: 150px;">
  199.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  200.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  201.                                 </div>
  202.                             </div>
  203.                         </td>
  204.                     </tr>
  205.                     <tr>
  206.                         <td class="text-center  align-middle">🥇 Élise</td>
  207.                         <td class="text-center  align-middle">
  208.                             <ul class="no-bullets">
  209.                                 <li>Pratiquer 15 minutes de méditation</li>
  210.                                 <li>Se fixer 3 objectifs pour la journée</li>
  211.                                 <li>Éteindre les écrans 1 heure avant de se coucher</li>
  212.                             </ul>
  213.                         </td>
  214.                         <td class="text-center  align-middle">
  215.                             <ul class="no-bullets">
  216.                                 <li>2 jours</li>
  217.                                 <li>7 jours</li>
  218.                                 <li>3 jours</li>
  219.                             </ul>
  220.                         </td>
  221.                         <td class="text-center  align-middle">
  222.                             <ul class="no-bullets">
  223.                                 <li>2</li>
  224.                                 <li>6</li>
  225.                                 <li>1</li>
  226.                             </ul>
  227.                         </td>
  228.                         <td class="text-center  align-middle">
  229.                             <div class="mb-2">
  230.                                 <div class="progress" style="height: 10px; width: 150px;">
  231.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  232.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  233.                                 </div>
  234.                             </div>
  235.                             <div class="mb-2">
  236.                                 <div class="progress" style="height: 10px; width: 150px;">
  237.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  238.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  239.                                 </div>
  240.                             </div>
  241.                             <div>
  242.                                 <div class="progress" style="height: 10px; width: 150px;">
  243.                                     <div class="progress-bar  progress-bar-striped progress-bar-animated" role="progressbar" style="width: 100%;"
  244.                                         aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">100%</div>
  245.                                 </div>
  246.                             </div>
  247.                         </td>
  248.                     </tr>
  249.                 </tbody>
  250.             </table>
  251.         </div>
  252.     </div>
  253. </section>