templates/la-fabrique/nutri-score.html.twig line 1

Open in your IDE?
  1. {% set section = 'nutriscore' %}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}Pitch - Brioche Pasquier{% endblock %}
  4. {% block body %}
  5. <div data-controller="nutriscore">
  7. {% include '_elements/page-header.html.twig'
  8. with {
  9. breadcrumb: [
  10. { path:'home', label:"Accueil"},
  11. { path:'factory', label:"La fabrique"},
  12. { label: "Nutri-Score" }
  13. ],
  14. back: [
  15. { path:'factory' }
  16. ]
  17. }
  18. %}
  20. <div class="nutriscore__layers">
  21. <div class="nutriscore__theme" data-width="1611">
  22. {% include 'la-fabrique/nutriscore/nutriscore.svg' %}
  23. </div>
  24. <div class="nutriscore__puzzle">
  25. <div class="js-piece nutriscore__piece p1 js-draggable" data-id="1" data-right="p2">
  26. <div class="nutriscore__piece-imgs js-piece-container">
  27. <img class="js-p1-img nutriscore__img js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_A.svg" draggable="false">
  28. </div>
  29. <div class="nutriscore__piece-shadows js-shadow-container">
  30. <img class="js-p1-img-shadow nutriscore__shadow js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_A_shadow.svg" draggable="false">
  31. </div>
  32. <div class="js-right js-pr-1-2 nutriscore__drop-right"></div>
  33. </div>
  34. <div class="js-piece nutriscore__piece p2 js-draggable" data-id="2" data-right="p3" data-left="p1">
  35. <div class="js-left js-pl-1-2 nutriscore__drop-left"></div>
  36. <div class="nutriscore__piece-imgs js-piece-container">
  37. <img class="js-p2-img nutriscore__img js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_B.svg" draggable="false">
  38. </div>
  39. <div class="nutriscore__piece-shadows js-shadow-container">
  40. <img class="js-p2-img-shadow nutriscore__shadow js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_B_shadow.svg" draggable="false">
  41. </div>
  43. <div class="js-right js-pr-2-3 nutriscore__drop-right"></div>
  44. </div>
  45. <div class="js-piece nutriscore__piece p3 js-draggable" data-id="3" data-right="p4" data-left="p2">
  46. <div class="js-left js-pl-2-3 nutriscore__drop-left"></div>
  47. <div class="nutriscore__piece-imgs js-piece-container">
  48. <img class="js-p3-img nutriscore__img js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_C.svg" draggable="false">
  49. </div>
  50. <div class="nutriscore__piece-shadows js-shadow-container">
  51. <img class="js-p3-img-shadow nutriscore__shadow js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_C_shadow.svg" draggable="false">
  52. </div>
  53. <div class="js-right js-pr-3-4 nutriscore__drop-right"></div>
  54. </div>
  55. <div class="js-piece nutriscore__piece p4 js-draggable" data-id="4" data-right="p5" data-left="p3">
  56. <div class="js-left js-pl-3-4 nutriscore__drop-left"></div>
  57. <div class="nutriscore__piece-imgs js-piece-container">
  58. <img class="js-p4-img nutriscore__img js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_D.svg" draggable="false">
  59. </div>
  60. <div class="nutriscore__piece-shadows js-shadow-container">
  61. <img class="js-p4-img-shadow nutriscore__shadow js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_D_shadow.svg" draggable="false">
  62. </div>
  63. <div class="js-right js-pr-4-5 nutriscore__drop-right"></div>
  64. </div>
  65. <div class="js-piece nutriscore__piece p5 js-draggable" data-id="5" data-left="p4">
  66. <div class="js-p5-img js-left js-pl-4-5 nutriscore__drop-left"></div>
  67. <div class="nutriscore__piece-imgs js-piece-container">
  68. <img class="js-p5-img nutriscore__img js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_E.svg" draggable="false">
  69. </div>
  70. <div class="nutriscore__piece-shadows js-shadow-container">
  71. <img class="js-p5-img-shadow nutriscore__shadow js-lazy" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E" data-src="/build/images/la-fabrique/nutriscore/puzzle_E_shadow.svg" draggable="false">
  72. </div>
  73. </div>
  74. </div>
  75. <div class="nutriscore__result">
  76. {% include 'la-fabrique/nutriscore/win.svg' %}
  77. </div>
  78. </div>
  80. </div>
  81. {% endblock %}