templates/games/tdm.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{% endblock %}
  4. {% block body %}
  5. <div data-controller="tdm">
  6. {% include '_elements/page-header.html.twig'
  7. with {
  8. breadcrumb: [
  9. { label: "Tour du monde rebondissant" }
  10. ]
  11. }
  12. %}
  13. <div id="tdm">
  14. <div id="tdm-home">
  15. <h2><span>Collectionne tes ballons du monde</span></h2>
  16. <a href="#" id="btn-minijeux" data-bs-toggle="modal" data-bs-target="#minijeuxModal" data-no-swup><span>Retrouve tous les mini-jeux</span></a>
  17. <div id="tdm-map-container">
  18. <div id="tdm-map-desktop">
  19. {% include 'tdm/map-global.svg' %}
  20. </div>
  21. <div id="tdm-map-mobile">
  22. <div class="swiper">
  23. <div class="swiper-wrapper">
  24. <div class="swiper-slide"><a href="#" data-bs-toggle="modal" data-bs-target="#welcomeameriqueModal" data-no-swup>{% include '_elements/image.html.twig' with {src: "/build/images/tdm/map-mobile-amerique.png", mode: "width", lazy:false} %}</a></div>
  25. <div class="swiper-slide"><a href="#" data-bs-toggle="modal" data-bs-target="#welcomeasieModal" data-no-swup>{% include '_elements/image.html.twig' with {src: "/build/images/tdm/map-mobile-asie.png", mode: "width", lazy:false} %}</a></div>
  26. <div class="swiper-slide"><a href="#" data-bs-toggle="modal" data-bs-target="#welcomeeuropeModal" data-no-swup>{% include '_elements/image.html.twig' with {src: "/build/images/tdm/map-mobile-europe.png", mode: "width", lazy:false} %}</a></div>
  27. <div class="swiper-slide"><a href="#" data-bs-toggle="modal" data-bs-target="#welcomeafriqueModal" data-no-swup>{% include '_elements/image.html.twig' with {src: "/build/images/tdm/map-mobile-afrique.png", mode: "width", lazy:false} %}</a></div>
  28. </div>
  29. </div>
  30. <div id="tdm-map-mobile-footer">
  31. <div class="swiper-btn-prev"></div>
  32. <div class="swiper-pagination"></div>
  33. <div class="swiper-btn-next"></div>
  34. </div>
  35. </div>
  36. <div id="tdm-map-decors">
  37. <div id="decor-map-boussole"><span class="content"></span></div>
  38. <div id="decor-map-cartes"><span class="content"></span></div>
  39. <div id="decor-map-appareil"><span class="content"></span></div>
  40. <div id="decor-map-livre"><span class="content"></span></div>
  41. <div id="decor-map-loupe"><span class="content"></span></div>
  42. </div>
  43. </div>
  44. <div id="tdm-tuto-backdrop"></div>
  45. <div id="tdm-tuto">
  46. <div id="tdm-perso-tuto"><span></span></div>
  47. <p id="tdm-first-visit">
  48. <span class="tdm-content">Salut&nbsp;! <br />Tu ne le sais peut-être pas mais je suis un grand passionné de sport. <span class="tdm-next"></span></span>
  49. <span class="tdm-content">Partons ensemble pour un tour du monde à la découverte des sports de balle&nbsp;! <span class="tdm-next"></span></span>
  50. <span class="tdm-content">Clique sur la carte du monde pour démarrer l’aventure&nbsp;! <br /><a href="#" class="btn btn-primary btn-blue btn-skip-tuto" data-no-swup>OK</a></span>
  51. <a href="#" class="btn-skip-tuto btn-close-tuto" data-no-swup>Fermer</a>
  52. </p>
  53. <p id="tdm-all-games">
  54. <span class="tdm-content">Génial&nbsp;! <br />C'était vraiment trop cool de découvrir ces pays d'Afrique, Moyen et Proche Orient&nbsp;! J'espère que ça t'a plu. <span class="tdm-next"></span></span>
  55. <span class="tdm-content">Tu peux rejouer à tous mes mini-jeux en cliquant sur le bouton sur mon bureau. A bientôt&nbsp;! <br /><a href="#" class="btn btn-primary btn-blue btn-skip-tuto" data-no-swup>OK</a></span>
  56. <a href="#" class="btn-skip-tuto btn-close-tuto" data-no-swup>Fermer</a>
  57. </p>
  58. </div>
  59. <p class="tdm-cta" id="tdm-cta-amerique">Clique sur l’Amérique <br aria-hidden="true" />pour partir à l’aventure&nbsp;!</p>
  60. <p class="tdm-cta" id="tdm-cta-asie">Clique sur l’Asie ou l'Océanie <br aria-hidden="true" />pour partir à l’aventure&nbsp;!</p>
  61. <p class="tdm-cta" id="tdm-cta-europe">Clique sur l’Europe <br aria-hidden="true" />pour partir à l’aventure&nbsp;!</p>
  62. <p class="tdm-cta" id="tdm-cta-afrique">Clique sur l’Afrique <br aria-hidden="true" />pour partir à l’aventure&nbsp;!</p>
  63. <div id="modals-buttons">
  64. <a href="#" id="btn-welcome-amerique" data-bs-toggle="modal" data-bs-target="#welcomeameriqueModal" data-no-swup></a>
  65. <a href="#" id="btn-welcome-europe" data-bs-toggle="modal" data-bs-target="#welcomeeuropeModal" data-no-swup></a>
  66. <a href="#" id="btn-welcome-afrique" data-bs-toggle="modal" data-bs-target="#welcomeafriqueModal" data-no-swup></a>
  67. <a href="#" id="btn-welcome-asie" data-bs-toggle="modal" data-bs-target="#welcomeasieModal" data-no-swup></a>
  68. </div>
  69. <div id="popin-minijeux-afrique" class="popin-minijeux">
  70. <div class="popin-minijeux-map"></div>
  71. <div class="popin-minijeux-container">
  72. <div class="popin-minijeux-content">
  73. <h2>Les mini-jeux</h2>
  74. <a href="#" class="btn-minijeux-close" data-no-swup></a>
  75. <nav>
  76. <ul>
  77. <li>
  78. <a href="/jeux/tour-du-monde/madagascar/jeu" class="swup-link" data-swup-color="#9BBC55">
  79. <span class="timbre"></span>
  80. <span class="minijeu-btn">Trouve le cochonnet</span>
  81. </a>
  82. </li>
  83. <li>
  84. <a href="/jeux/tour-du-monde/egypte/jeu" class="swup-link" data-swup-color="#8E3437">
  85. <span class="timbre"></span>
  86. <span class="minijeu-btn">Collecte les tous</span>
  87. </a>
  88. </li>
  89. <li>
  90. <a href="/jeux/tour-du-monde/senegal/jeu" class="swup-link" data-swup-color="#F9B132">
  91. <span class="timbre"></span>
  92. <span class="minijeu-btn">Penalty</span>
  93. </a>
  94. </li>
  95. <li>
  96. <a href="/jeux/tour-du-monde/maroc/jeu" class="swup-link" data-swup-color="#457C64">
  97. <span class="timbre"></span>
  98. <span class="minijeu-btn">Attrape-balles</span>
  99. </a>
  100. </li>
  101. <li>
  102. <a href="/jeux/tour-du-monde/afriquedusud/jeu" class="swup-link" data-swup-color="#F07D2A">
  103. <span class="timbre"></span>
  104. <span class="minijeu-btn">Rythme coloré</span>
  105. </a>
  106. </li>
  107. </ul>
  108. </nav>
  109. </div>
  110. </div>
  111. </div>
  112. <div id="popin-minijeux-amerique" class="popin-minijeux">
  113. <div class="popin-minijeux-map"></div>
  114. <div class="popin-minijeux-container">
  115. <div class="popin-minijeux-content">
  116. <h2>Les mini-jeux</h2>
  117. <a href="#" class="btn-minijeux-close" data-no-swup></a>
  118. <nav>
  119. <ul>
  120. <li>
  121. <a href="/jeux/tour-du-monde/canada/jeu" class="swup-link" data-swup-color="#F04437">
  122. <span class="timbre"></span>
  123. <span class="minijeu-btn">Lie les points</span>
  124. </a>
  125. </li>
  126. <li>
  127. <a href="/jeux/tour-du-monde/usa/jeu" class="swup-link" data-swup-color="#2252AA">
  128. <span class="timbre"></span>
  129. <span class="minijeu-btn">Basketball</span>
  130. </a>
  131. </li>
  132. <li>
  133. <a href="/jeux/tour-du-monde/colombie/jeu" class="swup-link" data-swup-color="#F0CE4C">
  134. <span class="timbre"></span>
  135. <span class="minijeu-btn">Lie les mots</span>
  136. </a>
  137. </li>
  138. <li>
  139. <a href="/jeux/tour-du-monde/bresil/jeu" class="swup-link" data-swup-color="#1EA12E">
  140. <span class="timbre"></span>
  141. <span class="minijeu-btn">Coloriage</span>
  142. </a>
  143. </li>
  144. <li>
  145. <a href="/jeux/tour-du-monde/argentine/jeu" class="swup-link" data-swup-color="#91C0F8">
  146. <span class="timbre"></span>
  147. <span class="minijeu-btn">Ombres</span>
  148. </a>
  149. </li>
  150. </ul>
  151. </nav>
  152. </div>
  153. </div>
  154. </div>
  155. <div id="popin-minijeux-asie" class="popin-minijeux">
  156. <div class="popin-minijeux-map"></div>
  157. <div class="popin-minijeux-container">
  158. <div class="popin-minijeux-content">
  159. <h2>Les mini-jeux</h2>
  160. <a href="#" class="btn-minijeux-close" data-no-swup></a>
  161. <nav>
  162. <ul>
  163. <li>
  164. <a href="/jeux/tour-du-monde/inde/jeu" class="swup-link" data-swup-color="#FF9933">
  165. <span class="timbre"></span>
  166. <span class="minijeu-btn">Charade</span>
  167. </a>
  168. </li>
  169. <li>
  170. <a href="/jeux/tour-du-monde/chine/jeu" class="swup-link" data-swup-color="#EE1C25">
  171. <span class="timbre"></span>
  172. <span class="minijeu-btn">7 différences</span>
  173. </a>
  174. </li>
  175. <li>
  176. <a href="/jeux/tour-du-monde/coree/jeu" class="swup-link" data-swup-color="#FFFFFF">
  177. <span class="timbre"></span>
  178. <span class="minijeu-btn">Labyrinthe</span>
  179. </a>
  180. </li>
  181. <li>
  182. <a href="/jeux/tour-du-monde/japon/jeu" class="swup-link" data-swup-color="#C02E35">
  183. <span class="timbre"></span>
  184. <span class="minijeu-btn">Rébus</span>
  185. </a>
  186. </li>
  187. <li>
  188. <a href="/jeux/tour-du-monde/australie/jeu" class="swup-link" data-swup-color="#0A2065">
  189. <span class="timbre"></span>
  190. <span class="minijeu-btn">Memory</span>
  191. </a>
  192. </li>
  193. </ul>
  194. </nav>
  195. </div>
  196. </div>
  197. </div>
  198. <div id="popin-minijeux-europe" class="popin-minijeux">
  199. <div class="popin-minijeux-map"></div>
  200. <div class="popin-minijeux-container">
  201. <div class="popin-minijeux-content">
  202. <h2>Les mini-jeux</h2>
  203. <a href="#" class="btn-minijeux-close" data-no-swup></a>
  204. <nav>
  205. <ul>
  206. <li>
  207. <a href="/jeux/tour-du-monde/france/jeu" class="swup-link" data-swup-color="#2837A1">
  208. <span class="timbre"></span>
  209. <span class="minijeu-btn">Cache-cache</span>
  210. </a>
  211. </li>
  212. <li>
  213. <a href="/jeux/tour-du-monde/italie/jeu" class="swup-link" data-swup-color="#458E4B">
  214. <span class="timbre"></span>
  215. <span class="minijeu-btn">Baseball</span>
  216. </a>
  217. </li>
  218. <li>
  219. <a href="/jeux/tour-du-monde/espagne/jeu" class="swup-link" data-swup-color="#EC4C1B">
  220. <span class="timbre"></span>
  221. <span class="minijeu-btn">Bonneteau</span>
  222. </a>
  223. </li>
  224. <li>
  225. <a href="/jeux/tour-du-monde/allemagne/jeu" class="swup-link" data-swup-color="#A93142">
  226. <span class="timbre"></span>
  227. <span class="minijeu-btn">Mots-croisés</span>
  228. </a>
  229. </li>
  230. <li>
  231. <a href="/jeux/tour-du-monde/croatie/jeu" class="swup-link" data-swup-color="#3D7FDD">
  232. <span class="timbre"></span>
  233. <span class="minijeu-btn">Tape la balle</span>
  234. </a>
  235. </li>
  236. </ul>
  237. </nav>
  238. </div>
  239. </div>
  240. </div>
  241. </div>
  242. <div class="modal fade modal-tdm modal-welcome" id="welcomeameriqueModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  243. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  244. <div class="modal-content">
  245. <div class="modal-header">
  246. <h2 class="tdm-title">Bienvenue en Amérique&nbsp;!</h2>
  247. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  248. </div>
  249. <div class="modal-body">
  250. {% include 'tdm/select-amerique.svg' %}
  251. <p>Partons ensemble visiter ces 5 pays&nbsp;!</p>
  252. <p>&nbsp;</p>
  253. </div>
  254. </div>
  255. </div>
  256. </div>
  257. <div class="modal fade modal-tdm modal-welcome" id="welcomeeuropeModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  258. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  259. <div class="modal-content">
  260. <div class="modal-header">
  261. <h2 class="tdm-title">Bienvenue en Europe&nbsp;!</h2>
  262. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  263. </div>
  264. <div class="modal-body">
  265. {% include 'tdm/select-europe.svg' %}
  266. <p>Partons ensemble visiter ces 5 pays&nbsp;!</p>
  267. <p>&nbsp;</p>
  268. </div>
  269. </div>
  270. </div>
  271. </div>
  272. <div class="modal fade modal-tdm modal-welcome" id="welcomeafriqueModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  273. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  274. <div class="modal-content">
  275. <div class="modal-header">
  276. <h2 class="tdm-title">Bienvenue en Afrique&nbsp;!</h2>
  277. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  278. </div>
  279. <div class="modal-body">
  280. {% include 'tdm/select-afrique.svg' %}
  281. <p>Partons ensemble visiter ces 5 pays&nbsp;!</p>
  282. <p>&nbsp;</p>
  283. </div>
  284. </div>
  285. </div>
  286. </div>
  287. <div class="modal fade modal-tdm modal-welcome" id="welcomeasieModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  288. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  289. <div class="modal-content">
  290. <div class="modal-header">
  291. <h2 class="tdm-title">Bienvenue en Asie et en Océanie&nbsp;!</h2>
  292. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  293. </div>
  294. <div class="modal-body">
  295. {% include 'tdm/select-asie.svg' %}
  296. <p>Partons ensemble visiter ces 5 pays&nbsp;!</p>
  297. <p>&nbsp;</p>
  298. </div>
  299. </div>
  300. </div>
  301. </div>
  302. <div class="modal fade modal-tdm modal-minijeux" id="minijeuxModal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">
  303. <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
  304. <div class="modal-content">
  305. <div class="modal-header">
  306. <h2 class="tdm-title">Retrouve tous les mini-jeux de mon tour du monde rebondissant</h2>
  307. <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  308. </div>
  309. <div class="modal-body">
  310. <p>
  311. <a href="#" id="btn-minijeux-amerique" class="btn-minijeux" data-no-swup><span class="btn-title">Amérique</span> <span class="btn-status">Ouvert</span></a>
  312. <a href="#" id="btn-minijeux-asie" class="btn-minijeux" data-no-swup><span class="btn-title">Asie / Océanie</span> <span class="btn-status">Ouvert</span></a>
  313. <a href="#" id="btn-minijeux-europe" class="btn-minijeux" data-no-swup><span class="btn-title">Europe</span> <span class="btn-status">Ouvert</span></a>
  314. <a href="#" id="btn-minijeux-afrique" class="btn-minijeux" data-no-swup><span class="btn-title">Afrique / Proche & Moyen Orient</span> <span class="btn-status">Ouvert</span></a>
  315. </p>
  316. </div>
  317. </div>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. {% endblock %}