templates\index.html.twig line 1

1. {% extends 'base.html.twig' %}
3. {% block stylesheets %}
4. <link rel="stylesheet" media="all" href="css/bootstrap.min.css" />
5. <link href="select2/dist/css/select2.min.css" rel="stylesheet" />
6. {{ encore_entry_link_tags('app') }}
7. {% endblock %}
9. {% block body %}
10. <!-- ajout d'un id --><div class="container" id="content"> <!-- fin ajout d'un id -->
11. <!-- bandeau logo -->
12. <section class="row" >
13. <div class="col-3 col-sm-2 col-lg-1"><a href="{{ path('home') }}"><img class="img-fluid" alt="" src="imgs/ministere-des-armees-2020-06.svg" /></a></div>
14. <!-- titre --> <div class="col-3 col-sm-1 col-lg-5 align-self-center fw-bold mh-100 text-uppercase text-top">équipage</div><!-- fin titre -->
15. <div class="col-6 col-sm-9 col-lg-6 d-none d-sm-block" style="text-align:right;">
16. <img src="imgs/logo-AAE.svg" width="75" class="img-fluid" />
17. <img src="imgs/logo-AT.svg" width="75" class="img-fluid" />
18. <img src="imgs/logo-mn.svg" width="50" class="img-fluid" />
19. <img src="imgs/logo-SSA.svg" width="60" class="img-fluid" />
20. </div>
22. </section>
23. <!-- bandeau image + titre atlas -->
24. <section class="row">
25. <div class="col-12"> <img class="img-fluid" src="imgs/BANDEAU_WEB_DRHAAE_4.0.jpg" /> </div>
26. </section>
27. <!-- bloc contenu intro -->
28. <section class="intro row">
29. <div class="col-12">
30. <h1>EQUIPAGE facilite la mobilité des personnels militaires et de leur famille !</h1>
31. <div class="row">
32. <div class="col-10">
33. <p>&nbsp;</p>
34. <p>Dans le cadre du plan Famille, l'Armée de l’Air et de l’Espace propose depuis 2022 l’Atlas EQUIPAGE.</p>
36. <p>Cet Atlas permet de visualiser les services du quotidien des sites d’affectation&nbsp;: immobilier, éducation, santé, etc.</p>
38. <p>Chaque année, EQUIPAGE enrichit son offre avec une ergonomie optimisée et de nouveaux services.</p>
41. </div>
42. <div class="col-2">
43. <img src="imgs/rose-des-vents-2.svg" class="img-fluid" />
44. </div>
45. </div>
46. </div>
47. </section>
48. <!-- fin bloc contenu intro -->
55. <!-- blocs liens vers Atlas -->
56. <section class="row container-links-atlas" id="links-atlas">
57. <div class="col-sm-12 col-lg-2">&nbsp;</div>
58. <div class="col-sm-12 col-lg-8" id="search-com">
59. <select class="form-select select2-destination bloc-link-atlas" style="height:50px;" aria-label="Rechercher une commune">
60. </select>
61. </div>
62. <div class="col-sm-12 col-lg-2">&nbsp;</div>
64. </section>
65. <!-- end blocs liens vers Atlas -->
68. </div>
70. <!-- footer -->
71. <footer class="container-fluid mt-auto">
72. <div class="container">
73. <div class="row">
74. <div class="col-sm-12 col-lg-3">© <span id="copyright">2024</span> Ministère des Armées</div>
75. <div class="col-sm-12 col-lg-6"></div>
76. <!-- lien vers site AAE -->
77. <div class="col-sm-12 col-lg-3"><a href="/sources">Sources</a></div>
78. <!-- fin lien AAE -->
79. </div>
80. </div>
81. </footer>
82. <!-- end footer -->
84. <div id="cookiesConsentLanding"> Ce site utilise des cookies pour améliorer votre expérience de navigation <span class="close-btn" aria-hidden="true" onclick="setCookieConsentLanding()"></span> </div>
85. {% endblock %}
86. {% block javascripts %}
87. <script src="js/bootstrap.min.js"></script>
88. <script src="{{ atlas.ap_url }}bundles/articquecd7ihm/api/dist/jquery.min.js" type="text/javascript"></script>
89. <script src="select2/dist/js/select2.min.js"></script>
90. <script src="select2/dist/js/i18n/fr.js"></script>
93. {{ encore_entry_script_tags('app') }}
94. <script>
95. const d = new Date();
96. let year = d.getFullYear();
97. document.getElementById("copyright").innerHTML = year;
98. </script>
99. <script>
100. document.querySelectorAll("a").forEach(function(current) {
101. if(!current.hash) return;
102. if(current.origin + current.pathname != self.location.href) return;
103. (function(anchorPoint) {
104. if(anchorPoint) {
105. current.addEventListener("click", function(e) {
106. anchorPoint.scrollIntoView({behavior: "smooth"});
107. e.preventDefault();
108. }, false);
109. }
110. })(document.querySelector(current.hash));
111. });
112. </script>
113. <!-- ajout script cookie -->
114. <script type="text/javascript">
115. function setCookieConsentLanding(){
116. var date = new Date();
117. date.setFullYear(date.getFullYear() + 1);
118. document.cookie = "consent_cookies=1; SameSite=strict;expires=" + date.toGMTString();
119. document.getElementById("cookiesConsentLanding").style.display = 'none';
120. }
122. document.addEventListener("DOMContentLoaded", function() {
123. if(document.cookie.indexOf("consent_cookies=1") == -1){
124. document.getElementById("cookiesConsentLanding").style.display = 'block';
125. }
126. });
127. </script>
128. <!-- fin ajout script cookie -->
130. <script type="text/javascript">
131. $('.select2-destination').select2({
132. ajax: {
133. url: function(params){
134. return "{{ atlas.atlas_url }}query";
135. },
136. dataType: 'json',
137. delay: 250,
138. data: function (params) {
139. return {
140. q: params.term, // search term
141. page: params.page
142. };
143. },
144. cache: false
145. },
146. placeholder: 'Choisir une destination',
147. dropdownAutoWidth: true,
148. minimumInputLength: 2,
149. language: "fr",
150. sorter: function(data) {
151. return data.sort(function (a, b) {
152. if (a.text.length > b.text.length) {
153. return 1;
154. }
155. if (a.text.length < b.text.length) {
156. return -1;
157. }
159. if(a.text.localeCompare(b.text) < 0){
160. return -1
161. } else {
162. return 1;
163. }
165. })},
166. theme: "equipage",
167. width: 'element'
168. });
170. $('.select2-destination').on('change', function (e) {
171. var val = $(this).select2('data')[0].id;
172. var search = $(this).select2('data')[0].search;
174. //On fait une redirection vers l'atlas
175. var cartojson = "1_1_"+search+".cartojson";
176. var url = "{{atlas.atlas_url}}" + "carto?map="+cartojson+"&q="+val;
178. //REDIRECT
179. window.location.href = url;
180. });
183. $(document).on('select2:open', () => {
184. document.querySelector('.select2-search__field').focus();
185. });
188. </script>
190. {% endblock %}