templates/base.html.twig line 1

Open in your IDE?
  1. <!DOCTYPE html>
  2. <html lang="fr" xmlns="http://www.w3.org/1999/html">
  3. <head>
  4. {% block headOnTop %}{% endblock %}
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <meta charset="utf-8">
  7. <title>
  8. {% block title %}
  9. {% if seo_params is defined and seo_params is not null and (seo_params | length) > 0 %}
  10. {{ seo_params.title }}
  11. {% elseif seo is defined and (seo | length)==2 %}
  12. {{ seo.title | raw}}
  13. {% else %}
  14. Colonie de vacances, Colo, colonies de vacances
  15. {% endif %}
  16. {% endblock %}
  17. </title>
  18. {% if noIndex is defined and noIndex == true %}
  19. <meta name="robots" content="noindex" />
  20. {% endif %}
  21. <meta name="description" content="{% block description %}
  22. {% if seo_params is defined and seo_params is not null and (seo_params | length) > 0 %}
  23. {{ seo_params.description }}
  24. {% elseif seo is defined and (seo | length)==2 %}
  25. {{ seo.description | raw }}
  26. {% else %}
  27. Colonie de vacances 2026 : Croq Vacances organise des colonies de vacances en France. Centres de vacances pour enfants et ados - Des colonies de vacances pas cher.
  28. {% endif %}
  29. {% endblock %}">
  30. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  31. {% block paiement %}{% endblock %}
  32. {%- block stylesheets -%}
  33. {{ encore_entry_link_tags('frontend') }}
  34. {%- endblock -%}
  35. <!-- Google Tag Manager -->
  36. <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
  37. new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
  38. j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
  39. 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
  40. })(window,document,'script','dataLayer','GTM-KC7QQKX');</script>
  41. <!-- End Google Tag Manager -->
  42. <!-- Google tag (gtag.js) -->
  43. <script async src="https://www.googletagmanager.com/gtag/js?id=G-3E1L769GY2"></script>
  44. <script>
  45. window.dataLayer = window.dataLayer || [];
  46. function gtag(){ dataLayer.push(arguments); }
  47. gtag('js', new Date());
  48. // Consent par défaut (refusé avant choix utilisateur)
  49. gtag('consent', 'default', {
  50. 'ad_storage': 'denied',
  51. 'analytics_storage': 'denied',
  52. 'ad_user_data': 'denied',
  53. 'ad_personalization': 'denied'
  54. });
  55. // Toujours déclarer GA4 (mais ne pose pas de cookie si refus)
  56. gtag('config', 'G-3E1L769GY2');
  57. {# Si analytics accepté côté serveur #}
  58. {% if cookiesRules is defined and cookiesRules|length > 0 and cookiesRules.analytics == 1 %}
  59. gtag('consent', 'update', { 'analytics_storage': 'granted', 'ad_storage': 'granted','ad_user_data': 'granted','ad_personalization': 'granted' });
  60. {% endif %}
  61. {# Si publicité acceptée côté serveur #}
  62. {% if cookiesRules is defined and cookiesRules|length > 0 and cookiesRules.ads == 1 %}
  63. gtag('consent', 'update', {
  64. 'ad_storage': 'granted',
  65. 'ad_user_data': 'granted',
  66. 'ad_personalization': 'granted'
  67. });
  68. gtag('config', 'AW-1070399189');
  69. {% endif %}
  70. </script>
  71. {% block javascripts %}
  72. {{ encore_entry_script_tags('app') }}
  73. {% endblock %}
  74. <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
  75. <style>
  76. section.header {
  77. min-height: 534px;
  78. background: url('/build/images/header-repeat.be4c706f.jpg') repeat-x 0 460px,
  79. url('{{vich_uploader_asset(mediaHeaders[random(mediaHeaders|length -1)])}}') no-repeat top center,
  80. url('/build/images/header-repeat.be4c706f.jpg') repeat-x top left;
  81. position: relative;
  82. }
  83. section.header.small {
  84. min-height: 300px;
  85. }
  86. </style>
  87. </head>
  88. <body data-controller="hello">
  89. <!-- Google Tag Manager (noscript)
  90. <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KC7QQKX" height="0" width="0"
  91. style="display:none;visibility:hidden"></iframe></noscript>
  92. End Google Tag Manager (noscript) -->
  93. <button id="scrollToTopButton"><i class="icon icon-left-chevron"></i></button>
  94. <div id="consent-banner__overlay">
  95. </div>
  96. {% include('frontend/nav/_navbar.html.twig') %}
  97. {#{% include('frontend/elements/_bouton_inscription.html.twig') %}#}
  98. {% block header %}
  99. {% include('frontend/elements/_form_research.html.twig') %}
  100. {% endblock %}
  101. {% block pageTitle %}{% endblock %}
  102. {% block bannerInfo %}
  103. {% if banner is defined and banner is not null %}
  104. <div class="messagedefilant">
  105. <div data-text="{{banner.content}}">
  106. <span>{{banner.content }}</span>
  107. </div>
  108. </div>
  109. {% endif %}
  110. {% endblock %}
  111. <section class="main">
  112. {% block flash %}
  113. {% for label, messages in app.flashes %}
  114. {% for message in messages %}
  115. <div class="flash-{{ label }}">
  116. {{ message | raw }}
  117. </div>
  118. {% endfor %}
  119. {% endfor %}
  120. {% endblock %}
  121. <!-- Modal -->
  122. <div class="modal fade" id="croqModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  123. aria-hidden="true">
  124. <div class="modal-dialog" role="document">
  125. <div class="modal-content">
  126. <div class="modal-body" id="modal-body">
  127. ...
  128. </div>
  129. <a type="button" class="btn btn-primary" href="{{path('mesCommandes')}}">Finaliser ma réservation</a>
  130. <a type="button" class="btn btn-primary" href="/">Sélectionner un autre séjour </a>
  131. {# <button type="button" class="btn btn-secondary" onclick="window.myModal.toggle();">Continuer la
  132. recherche</button> #}
  133. </div>
  134. </div>
  135. </div>
  136. <div class="toast" id="toast" role="alert" aria-live="assertive" aria-atomic="true">
  137. <div class="toast-header">
  138. <strong class="me-auto">Croqvacances</strong>
  139. <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  140. </div>
  141. <div class="toast-body" id="toastMessage">
  142. Un message de la part de croqvacances.
  143. </div>
  144. </div>
  145. {% block body %}
  146. <div class="container container-fluid">
  147. <h1 class="title">COLONIE DE VACANCES</h1>
  148. {% if headerMain is defined and headerMain is not null %}
  149. <p style="text-align:justify; color:#0e9aa9; background-color: white; padding:10px;">
  150. {{headerMain.text | raw}}
  151. </p>
  152. {% else %}
  153. <p style="text-align:justify; color:#0e9aa9; background-color: white; padding:10px;">
  154. Offrez la colonie de vacances ou le camp de vacances à votre enfant ou ado. De superbes vacances à la
  155. mer, campagne ou montagne pour satisfaire toutes les envies. Nos
  156. <b>colonies</b>
  157. sont choisies avec soin et propices à l’évasion ! Sélectionnez votre
  158. <b>colo</b>
  159. idéale en Été, au Printemps, à l’Automne ou en Hiver partout en France.
  160. </p>
  161. {% endif %}
  162. <div class="row" id="liste-sejours">
  163. {% for sejour in sejours %}
  164. <div class="col-sm-6 col-md-4">
  165. {% include('/frontend/elements/_itemSejour.html.twig') %}
  166. </div>
  167. {% endfor %}
  168. </div>
  169. <div class="row">
  170. <div class="text-right">
  171. <a href="{{ path('frontend_resa_liste_colonies') }}" class="button bounce bg-red main-btn-right">
  172. <span>Voir tous nos séjours</span>
  173. </a>
  174. </div>
  175. </div>
  176. </div>
  177. {% endblock %}
  178. </section>
  179. <section class="news">
  180. <div class="container">
  181. <div class="row">
  182. {% if last_article is defined and last_article is not null %}
  183. <div class="col-sm-6 col-md-8" id="index-news">
  184. <div class="row">
  185. <div class="col-md-5 visual">
  186. <a
  187. href="{{ path('actualite',{id:last_article.id, slug: ((last_article.title |lower) |slug('_')) }) }}">
  188. <h2>Actus Croq</h2>
  189. {% if last_article.img is not null %}
  190. <img src="{{vich_uploader_asset(last_article) | imagine_filter('my_thumb') }}"
  191. alt="{% if last_article.altAttribute is defined and last_article.altAttribute is not null %}{{last_article.altAttribute}}{% else %}Croq' Vacances, des vacances de 6 à 17 ans {% endif %}"
  192. width="350" height="190">
  193. {% endif %}
  194. </a>
  195. </div>
  196. <div class="col-md-7 txt text-center">
  197. <h3 class="small">{{ last_article.title }}</h3>
  198. <p class="price"></p>
  199. <p class="text-justify">{{ unescape(last_article.text | striptags) | slice(0,150) | raw
  200. }}...</p>
  201. <a href="{{ path('actualite',{id:last_article.id, slug: ((last_article.title |lower) |slug('_'))}) }}"
  202. class="button more red mb-3">En savoir +</a>
  203. </div>
  204. </div>
  205. <div class="row">
  206. <div class="col-xs-12 text-right">
  207. <a href="/actualites" class="link_news news__next-news">
  208. <span>Toutes nos actualités</span>
  209. <i class="icon icon-right-chevron"></i>
  210. </a>
  211. </div>
  212. </div>
  213. </div>
  214. {% endif %}
  215. <div class="col-sm-6 col-md-4" id="index-download">
  216. <a id="catalog" href="/catalogue-en-ligne.html">
  217. <img src="{{asset('images/catalogue-hiver.png')}}" class="lazy"
  218. alt="Consulter les catalogues, cliquez ici">
  219. </a>
  220. </div>
  221. </div>
  222. </div>
  223. </section>
  224. {% block aVirer %}
  225. <section id="stats" class="container-fluid">
  226. <div class="container">
  227. <div class="row text-center">
  228. {# <div class="item col-6 col-sm-4 col-lg-2 text-center">
  229. <i class="icon icon-ring-bag"></i>
  230. <span>{{colonies}}</span>
  231. Colonies
  232. </div>
  233. <div class="item col-6 col-sm-4 col-lg-2 text-center">
  234. <i class="icon icon-ring-man"></i>
  235. <span>{{animateurs}}</span>
  236. Animateurs
  237. </div> #}
  238. <div class="item col-6 col-sm-3 col-lg-3 text-center">
  239. <i class="icon icon-ring-compass"></i>
  240. <span>{{destinations}}</span>
  241. Destinations
  242. </div>
  243. <div class="item col-6 col-sm-3 col-lg-3 text-center">
  244. <i class="icon icon-ring-kite"></i>
  245. <span>{{themes}}</span>
  246. Thèmes
  247. </div>
  248. <div class="item col-6 col-sm-3 col-lg-3 text-center">
  249. <i class="icon icon-ring-calendar"></i>
  250. <span>{{annees}}</span>
  251. Années
  252. </div>
  253. <div class="item col-6 col-sm-3 col-lg-3 text-center">
  254. <i class="icon icon-ring-man"></i>
  255. <span>{{enfants}}</span>
  256. Enfants-Ados
  257. </div>
  258. </div>
  259. </div>
  260. </section>
  261. <section id="edito" class="container-fluid">
  262. <div class="container">
  263. <div class="row">
  264. <div class="col-sm-6">
  265. <div class="title">Croq' Vacances</div>
  266. <img src="{{asset('/images/ministere-logo.png')}}"
  267. alt="Agréée par le ministère de la Jeunesse, des Sports, et de la Vie Associative">
  268. <p>
  269. Association Agréée par le ministère de la Jeunesse, des Sports et de la Vie Associative.<br>
  270. N° organisateur Ministère : 044ORG0408<br>
  271. N° agrément tourisme : IM 094 12 0001
  272. </p>
  273. </div>
  274. <div class="col-sm-6">
  275. <p class="">Vous recherchez une <a href="/colonie-de-vacances">colonie de vacances</a> pour votre
  276. enfant ?<br>
  277. En Automne, Eté ou Hiver, l'association Croq' Vacances offre ses services pour l'organisation de
  278. colonies – Des colonies de
  279. vacances de qualité, pour les jeunes entre 6 et 17 ans. Nous accompagnons votre enfant pour lui
  280. offrir les meilleurs souvenirs
  281. de son aventure en colonie de vacances. Soucieuse de présenter au plus grand nombre des séjours
  282. qui se déroulent dans des cadres
  283. sécurisés et dépaysants, Croq' Vacances vous recommande <b class="text-bold">une sélection de
  284. colonies de vacances à
  285. petit budget</b>.</p>
  286. </div>
  287. <div class="col-xs-12 text-right">
  288. <a href="/colonie-vacances-petit-prix.html" class="button more yellow">En savoir +</a>
  289. </div>
  290. </div>
  291. </div>
  292. </section>
  293. <div id="reassurance" class="container-fluid">
  294. <div class="container">
  295. <div class="row text-center justify-content-center">
  296. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  297. <div class="reassurance__card">
  298. <img class="reassurance__card__image" src="{{asset('images/marianne2.png')}}"
  299. alt="image Marianne">
  300. <p class="reassurance__card-title">
  301. Séjours déclarés DDCS Organisateur
  302. <br>
  303. N°0044ORG0408
  304. </p>
  305. </div>
  306. </div>
  307. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  308. <div class="reassurance__card">
  309. <img class="reassurance__card__image" src="{{asset('images/AtoutFrance.png')}}"
  310. alt="image Atout France">
  311. <p class="reassurance__card-title">
  312. Immatriculation Atout France<br />
  313. M094120001
  314. </p>
  315. </div>
  316. </div>
  317. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  318. <div class="reassurance__card">
  319. <img class="reassurance__card__image" src="{{asset('images/ANCV.png')}}" alt="chèque vacances">
  320. <p class="reassurance__card-title">
  321. Chèques vacances<br />
  322. acceptés
  323. </p>
  324. </div>
  325. </div>
  326. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  327. <div class="reassurance__card">
  328. <img class="reassurance__card__image" src="{{asset('images/Alloc.png')}}"
  329. alt="allocations familiales">
  330. <p class="reassurance__card-title">
  331. Association conventionnée<br />
  332. bons CAF
  333. </p>
  334. </div>
  335. </div>
  336. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  337. <div class="reassurance__card">
  338. <img class="reassurance__card__image" src="{{asset('images/JPA-new.png')}}"
  339. alt="Jeunesse au plein air">
  340. <p class="reassurance__card-title">
  341. Association membre<br />
  342. Confédération JPA
  343. </p>
  344. </div>
  345. </div>
  346. <div class="item col-6 col-sm-4 col-lg-2" style="text-align:center">
  347. <div class="reassurance__card">
  348. <img class="reassurance__card__image" src="{{asset('images/vacances-apprenantes.png')}}"
  349. alt="Vacances Apprenantes">
  350. <p class="reassurance__card-title">
  351. Séjours labellisés <br />
  352. par l'État
  353. </p>
  354. </div>
  355. </div>
  356. </div>
  357. </div>
  358. </div>
  359. <script
  360. type="text/javascript">window.$crisp = []; window.CRISP_WEBSITE_ID = "be4a2126-96ce-4bd8-96bd-36e0d56b59d6"; (function () { d = document; s = d.createElement("script"); s.src = "https://client.crisp.chat/l.js"; s.async = 1; d.getElementsByTagName("head")[0].appendChild(s); })();</script>
  361. {% endblock %}
  362. {% include '@CroqvacancesCookieConsent/_cookieConsent.html.twig' %}
  363. {% if is_granted("ROLE_ADMIN") %}
  364. <div class="btn-group-fab" role="group" aria-label="FAB Menu" id="fabMenu">
  365. <div>
  366. <button type="button" class="btn btn-main btn-primary has-tooltip" data-placement="left" title="Menu"
  367. data-action="click->hello#showAdmin">
  368. Sejour
  369. </button>
  370. <form target="_blank" action="{{path('seo_dispatch_page')}}" method="post">
  371. <input type="hidden" name="url"
  372. value="{{path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))}}" />
  373. <input type="submit" class="btn btn-sub btn-info has-tooltip" style="bottom:50px;" data-placement="left"
  374. title="Fullscreen" value="SEO">
  375. SEO
  376. </input>
  377. </form>
  378. {% if article is defined and article is not null %}
  379. <form target="_blank" action="{{path('seo_article_modify',{id:article.id})}}" method="post">
  380. <input type="hidden" name="url"
  381. value="{{path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))}}" />
  382. <input type="submit" class="btn btn-sub btn-success has-tooltip" data-placement="left"
  383. style="bottom:100px;" title="Save" value="Modifier">
  384. </input>
  385. </form>
  386. {% endif %}
  387. {% if sejour is defined and sejour is not null %}
  388. <form target="_blank" action="{{path('admin_sejour_modify',{id:sejour.id})}}" method="post">
  389. <input type="hidden" name="url"
  390. value="{{path(app.request.attributes.get('_route'), app.request.attributes.get('_route_params'))}}" />
  391. <input type="submit" class="btn btn-sub btn-danger has-tooltip" data-placement="left"
  392. style="bottom:100px;" title="Save" value="Séjour">
  393. </input>
  394. </form>
  395. {% endif %}
  396. <button type="button" class="btn btn-sub btn-warning has-tooltip" data-placement="left" title="Download">
  397. MEDIA
  398. </button>
  399. </div>
  400. <script>
  401. document.addEventListener('DOMContentLoaded', function() {
  402. var consentBanner = document.getElementById('consent-banner');
  403. var consentButton = document.getElementById('consent-button');
  404. // Display the consent banner
  405. consentBanner.style.display = 'block';
  406. // Handle the consent button click
  407. consentButton.addEventListener('click', function() {
  408. updateConsent('granted', 'granted');
  409. consentBanner.style.display = 'none';
  410. });
  411. });
  412. </script>
  413. </div>
  414. </div>{% endif %}
  415. {% include ('frontend/footer/footer.html.twig') %}
  416. {% include ('frontend/footer/extraFooter.html.twig') %}{% block js %}{% endblock %}
  417. <script>window.onscroll = function (e) { }</script>
  418. <script>
  419. const scrollToTopButton = document.getElementById("scrollToTopButton");
  420. window.addEventListener("scroll", () => {
  421. if (window.pageYOffset > 100) {
  422. scrollToTopButton.style.display = "block";
  423. } else {
  424. scrollToTopButton.style.display = "none";
  425. }
  426. });
  427. scrollToTopButton.addEventListener("click", () => {
  428. window.scrollTo({
  429. top: 0,
  430. behavior: "smooth"
  431. });
  432. });
  433. </script>
  434. <script>
  435. // Initialize Google Consent Mode
  436. window.dataLayer = window.dataLayer || [];
  437. function gtag(){dataLayer.push(arguments);}
  438. gtag('consent', 'default', {
  439. 'ad_storage': 'denied',
  440. 'analytics_storage': 'denied'
  441. });
  442. // Load GTM
  443. gtag('js', new Date());
  444. gtag('config', 'GTM-KC7QQKX');
  445. </script>
  446. <script>
  447. function updateConsent(adConsent, analyticsConsent) {
  448. var consentBanner = document.getElementById('consent-banner__overlay');
  449. gtag('consent', 'update', {
  450. 'ad_storage': adConsent,
  451. 'analytics_storage': analyticsConsent
  452. });
  453. consentBanner.style.display = 'none';
  454. }
  455. </script>
  456. </body>
  457. </html>