templates/games/tdm/bresil-jeu.html.twig line 1

Open in your IDE?
  1. {% set section = 'tdm' %}
  2. {% extends 'base.html.twig' %}
  3. {% block title %}Pitch - Tour du monde rebondissant - Brésil{% endblock %}
  4. {% block body %}
  5. <div data-controller="tdm-pays">
  6. <div id="nav-header" class="nav-header">
  7. <div class="nav-header__breadcrumb">
  8. <nav aria-label="breadcrumb">
  9. <ol class="breadcrumb">
  10. <li class="breadcrumb-item"><a href="{{ path('tdm') }}" class="swup-link">Tour du monde rebondissant</a></li>
  11. <li class="breadcrumb-item"><a href="/jeux/tour-du-monde/argentine" class="swup-link" data-swup-color="#1EA12E">Brésil</a></li>
  12. <li class="breadcrumb-item active" aria-current="page">Coloriage</li>
  13. </ol>
  14. </nav>
  15. </div>
  16. </div>
  17. <div id="tdm-pays">
  18. <div id="tdm-game" class="bresil">
  19. <a href="/jeux/tour-du-monde/bresil" class="tdm-game-back swup-link" data-swup-color="#1EA12E"></a>
  20. <div class="row justify-content-center">
  21. <div class="col-12 col-md-2 align-content-center text-center"><div id="tdm-paint-decor"></div></div>
  22. <div class="col-12 col-md-6">
  23. <div id="tdm-paint">
  24. <h2>Colorie ton maillot <br />du Brésil</h2>
  25. <div id="tdm-canvas-container">
  26. <canvas id="tdm-canvas" width="440" height="560"></canvas>
  27. <canvas id="tdm-canvas-model" width="440" height="560"></canvas>
  28. </div>
  29. <div class="tdm-buttons">
  30. <button id="tdm-paint-validate" class="btn btn-primary">Valider</button>
  31. <button id="tdm-paint-clear" class="btn btn-primary">Réinitialiser</button>
  32. </div>
  33. </div>
  34. </div>
  35. <div class="col-12 col-md-4 align-content-center">
  36. <div class="toolbar">
  37. <button id="rollTool">{% include 'tdm/paint/outil-rouleau.svg' %}</button>
  38. <button id="brushTool">{% include 'tdm/paint/outil-pinceau.svg' %}</button>
  39. <button id="pencilTool">{% include 'tdm/paint/outil-crayon.svg' %}</button>
  40. <button id="eraserTool">{% include 'tdm/paint/outil-gomme.svg' %}</button>
  41. <a href="#" id="btn-tdm-paint-help" data-bs-toggle="modal" data-bs-target="#tdm-paint-rules" data-no-swup><span>?</span></a>
  42. </div>
  43. <div class="wheel">
  44. <ul class="umbrella">
  45. <li id="init-color" class="color"></li>
  46. <li class="color"></li>
  47. <li class="color"></li>
  48. <li class="color"></li>
  49. <li class="color"></li>
  50. <li class="color"></li>
  51. <li class="color"></li>
  52. <li class="color"></li>
  53. <li class="color"></li>
  54. <li class="color"></li>
  55. <li class="color"></li>
  56. <li class="color"></li>
  57. </ul>
  58. </div>
  59. </div>
  60. </div>
  62. <div id="modal-buttons">
  63. <a href="#" id="btn-tdm-paint-rules" data-bs-toggle="modal" data-bs-target="#tdm-paint-rules" data-no-swup></a>
  64. <a href="#" id="btn-tdm-pain-end" data-bs-toggle="modal" data-bs-target="#tdm-paint-end" data-no-swup></a>
  65. </div>
  66. <div class="modal fade modal-tdm-game" id="tdm-paint-rules" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  67. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  68. <div class="modal-content">
  69. <div class="modal-header">
  70. <h3>Les outils</h3>
  71. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  72. </div>
  73. <div class="modal-body">
  74. <p>Voici tous tes outils pour faire un magnifique dessin. <br />Allez, à tes pinceaux&nbsp;!</p>
  75. <ul>
  76. <li><span>{% include 'tdm/paint/outil-crayon.svg' %}</span> Utilise la mine fine du crayon pour faire des dessins précis.</li>
  77. <li><span>{% include 'tdm/paint/outil-pinceau.svg' %}</span> Utilise le gros pinceau pour peindre plus rapidement les zones de ton choix.</li>
  78. <li><span>{% include 'tdm/paint/outil-rouleau.svg' %}</span> Utilise le rouleau pour peindre rapidement de grandes zones.</li>
  79. <li><span>{% include 'tdm/paint/outil-gomme.svg' %}</span> Utilise la gomme pour effacer et recommencer à l’infini.</li>
  80. </ul>
  81. </div>
  82. <div class="modal-footer justify-content-end">
  83. <a href="#" class="btn btn-primary" data-no-swup data-bs-dismiss="modal" aria-label="Close">J'ai compris</a>
  84. </div>
  85. </div>
  86. </div>
  87. </div>
  88. <div class="modal fade modal-tdm-game" id="tdm-paint-end" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  89. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  90. <div class="modal-content">
  91. <div class="modal-header">
  92. <h3>Bravo !</h3>
  93. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  94. </div>
  95. <div class="modal-body">
  96. <p>Bravo ton dessin est magnifique voila à quoi ressemble le maillot du Brésil&nbsp;!</p>
  97. <div class="text-center"><canvas id="tdm-canvas-result" width="220" height="260"></canvas></div>
  98. <p>Continue sur cette lancée et poursuis l'aventure avec Pitchos dans son tour du monde rebondissant.</p>
  99. </div>
  100. <div class="modal-footer justify-content-between">
  101. <a class="btn btn-primary swup-link" href="/jeux/tour-du-monde/bresil" data-swup-color="#1EA12E">Retour à la carte postale</a>
  102. <a class="btn btn-primary swup-link" href="/jeux/tour-du-monde/argentine" data-swup-color="#91C0F8" id="btn-tdm-next">Je continue</a>
  103. </div>
  104. </div>
  105. </div>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. {% endblock %}