templates/vitrine/en/homepage.html.twig line 1

Open in your IDE?
  1. {% extends 'vitrine/en/layout.html.twig' %}
  3. {% block title %}Cathedral Heritage Suite - 8-Guest Rental Strasbourg Center{% endblock title %}
  4. {% block description %}Rent our 83m² suite in the heart of Strasbourg. 3 bedrooms, sleeps 8, 100m from Cathedral. Kitchen fully furnished, 2 bathrooms. Book your stay today!{% endblock description %}
  5. {% block robots %}index,follow{% endblock robots %}
  7. {% block canonical %}
  8. <link rel="canonical" href="https://cathedraleheritage.com" />
  9. <link rel="alternate" hreflang="fr" href="https://cathedraleheritage.com/fr" />
  10. <link rel="alternate" hreflang="en" href="https://cathedraleheritage.com" />
  11. <link rel="alternate" hreflang="x-default" href="https://cathedraleheritage.com" />
  12. {% endblock canonical %}
  14. {% block body %}
  16. <section id="hero" class="text-light no-top no-bottom relative overflow-hidden z-1000">
  17. <div class="abs w-100 abs-centered z-2">
  18. <div class="container">
  19. <div class="spacer-double"></div>
  20. <div class="row g-4 align-items-center justify-content-center">
  21. <div class="col-md-8 text-center">
  22. <h1 class="mb-2" style="color:white;">Welcome to Cathedral Heritage Suite</h1>
  23. <p class="lead mb-3" style="color:white; font-size:22px;">Beautifully appointed apartment accommodating up to 8 guests in Strasbourg’s prestigious historical city center</p>
  24. <a class="btn-main btn-line bg-blur fx-slide" href="#about" style="color:white;"><span>Find out more</span></a>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. <div class="vertical-center">
  30. <div class="swiper">
  31. <div class="swiper-wrapper">
  32. <div class="swiper-slide">
  33. <div class="swiper-inner" data-bgimage="url(/images/salon2.jpeg)">
  34. <div class="sw-overlay op-5"></div>
  35. </div>
  36. </div>
  37. <div class="swiper-slide">
  38. <div class="swiper-inner" data-bgimage="url(/images/chambre2.jpeg)">
  39. <div class="sw-overlay op-5"></div>
  40. </div>
  41. </div>
  42. <div class="swiper-slide">
  43. <div class="swiper-inner" data-bgimage="url(/images/noel.jpeg)">
  44. <div class="sw-overlay op-5"></div>
  45. </div>
  46. </div>
  47. </div>
  48. </div>
  49. </div>
  51. <div class="abs w-100 bottom-0 z-2 pb-4 sm-hide">
  52. <div class="container">
  53. <div class="row">
  54. <div class="col-lg-12">
  55. <div class="d-flex justify-content-between">
  56. <div>
  57. <h6 style="color:white;">Cathedral 100m away</h6>
  58. </div>
  59. <div>
  60. <h6 style="color:white;">Museums 200m away</h6>
  61. </div>
  62. <div>
  63. <h6 style="color:white;">Petite France 300m away</h6>
  64. </div>
  65. </div>
  66. </div>
  67. </div>
  68. </div>
  69. </div>
  70. <div class="gradient-edge-bottom op-8"></div>
  71. </section>
  73. <section id="about">
  74. <div class="container">
  75. <div class="row g-4 align-items-end justify-content-between">
  76. <div class="col-lg-5">
  77. <div class="subtitle">About the apartment</div>
  78. <h2>Modern suite in the heart of Strasbourg's Grande Île</h2>
  79. </div>
  81. <div class="col-lg-4">
  82. <p class="mb-4" style="color:#212121;">
  83. Spacious fully equipped appartement ideal for families and groups up to 8 people : 1 master bedroom with en-suite bathroom, one double bedroom, one bedroom with two double bunk beds (sleeps 4), maximum weight of 100kg for upper bunks.
  84. </p>
  85. <p class="mb-4" style="color:#212121;">
  86. Kitchen fully furnished and cozy living-dining room to share great moments together.
  87. </p>
  88. <p class="mb-4" style="color:#212121;">
  89. Amenities: hairdryer, dishwasher, washer-dryer, microwave, oven, ironing board with iron, Nespresso coffee machine, kettle, TV, Wi-Fi and USB outlets for charging your devices.
  90. </p>
  91. </div>
  92. </div>
  94. <div class="spacer-single"></div>
  96. <div class="row g-4">
  97. <div class="col-md-2">
  98. <div class="relative">
  99. <h5>Size</h5>
  100. <div class="d-flex justify-content-start align-items-center" style="padding-top:6px;">
  101. <img src="/images/home.png" width="37" class="me-3" alt="">
  102. <div class="fs-20 fw-600" style="color:#212121;">83 m²</div>
  103. </div>
  104. </div>
  105. </div>
  107. <div class="col-md-2">
  108. <div class="relative">
  109. <h5>Bedrooms</h5>
  110. <div class="d-flex justify-content-start align-items-center" style="padding-top:4px;">
  111. <img src="/images/bed.png" width="37" class="me-3" alt="">
  112. <div class="fs-20 fw-600" style="color:#212121;">3</div>
  113. </div>
  114. </div>
  115. </div>
  117. <div class="col-md-2">
  118. <div class="relative">
  119. <h5>Living Room</h5>
  120. <div class="d-flex justify-content-start align-items-center">
  121. <img src="/images/sofa.png" width="50" class="me-3" alt="">
  122. <div class="fs-20 fw-600" style="color:#212121;">Included</div>
  123. </div>
  124. </div>
  125. </div>
  127. <div class="col-md-2">
  128. <div class="relative">
  129. <h5>Kitchen</h5>
  130. <div class="d-flex justify-content-start align-items-center" style="padding-top:6px;">
  131. <img src="/images/cooking.png" width="37" class="me-3" alt="">
  132. <div class="fs-20 fw-600" style="color:#212121;">Included</div>
  133. </div>
  134. </div>
  135. </div>
  137. <div class="col-md-2">
  138. <div class="relative">
  139. <h5>Bathrooms</h5>
  140. <div class="d-flex justify-content-start align-items-center" style="padding-top:4px;">
  141. <img src="/images/bathroom.png" width="40" class="me-3" alt="">
  142. <div class="fs-20 fw-600" style="color:#212121;">2</div>
  143. </div>
  144. </div>
  145. </div>
  147. <div class="col-md-2">
  148. <div class="relative">
  149. <h5>Guests</h5>
  150. <div class="d-flex justify-content-start align-items-center" style="padding-top:5px;">
  151. <img src="/images/user.png" width="37" class="me-3" alt="">
  152. <div class="fs-20 fw-600" style="color:#212121;">8</div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </div>
  158. </section>
  160. <section id="rooms" class="p-0 overflow-hidden">
  162. <div class="container-fluid">
  163. <div class="row">
  164. <div class="col-lg-12">
  165. <div class="owl-custom-nav menu-float" data-target="#room-carousel">
  166. <a class="btn-next"></a>
  167. <a class="btn-prev"></a>
  169. <div id="room-carousel" class="owl-2-cols-center owl-carousel owl-theme">
  171. <div class="item">
  172. <div class="relative">
  173. <div class="overflow-hidden text-light">
  174. <div class="abs h-100 start-0 z-2 p-4">
  175. <h3 style="color:white;">Living Room</h3>
  176. </div>
  177. <img src="/images/salon2.jpeg" class="w-100" alt="Living Room">
  178. </div>
  179. </div>
  180. </div>
  182. <div class="item">
  183. <div class="relative">
  184. <div class="overflow-hidden text-light">
  185. <div class="abs h-100 start-1 z-2 p-4">
  186. <h3 style="color:white;">Bedroom 1</h3>
  187. </div>
  188. <img src="/images/chambre1.jpeg" class="w-100" alt="Bedroom 1">
  189. </div>
  190. </div>
  191. </div>
  193. <div class="item">
  194. <div class="relative">
  195. <div class="overflow-hidden text-light">
  196. <div class="abs h-100 start-2 z-2 p-4">
  197. <h3 style="color:white;">Bedroom 2</h3>
  198. </div>
  199. <img src="/images/chambre2.jpeg" class="w-100" alt="Bedroom 2">
  200. </div>
  201. </div>
  202. </div>
  204. <div class="item">
  205. <div class="relative">
  206. <div class="overflow-hidden text-light">
  207. <div class="abs h-100 start-3 z-2 p-4">
  208. <h3 style="color:white;">Bedroom 3</h3>
  209. </div>
  210. <img src="/images/chambre3.jpeg" class="w-100" alt="Bedroom 3">
  211. </div>
  212. </div>
  213. </div>
  215. <div class="item">
  216. <div class="relative">
  217. <div class="overflow-hidden text-light">
  218. <div class="abs h-100 start-4 z-2 p-4">
  219. <h3 style="color:white;">Kitchen</h3>
  220. </div>
  221. <img src="/images/cuisine.jpeg" class="w-100" alt="Kitchen">
  222. </div>
  223. </div>
  224. </div>
  226. <div class="item">
  227. <div class="relative">
  228. <div class="overflow-hidden text-light">
  229. <div class="abs h-100 start-5 z-2 p-4">
  230. <h3 style="color:white;">Bathroom</h3>
  231. </div>
  232. <img src="/images/salledebain.jpeg" class="w-100" alt="Bathroom 1">
  233. </div>
  234. </div>
  235. </div>
  237. <div class="item">
  238. <div class="relative">
  239. <div class="overflow-hidden text-light">
  240. <div class="abs h-100 start-6 z-2 p-4">
  241. <h3 style="color:white;">Bathroom 2</h3>
  242. </div>
  243. <img src="/images/salledebain2.jpeg" class="w-100" alt="Bathroom 2">
  244. </div>
  245. </div>
  246. </div>
  248. </div>
  249. </div>
  250. </div>
  251. </div>
  252. </div>
  254. </section>
  256. <section id="services" class="overlay-dark-1">
  257. <div class="container">
  258. <div class="row g-4 justify-content-between">
  259. <div class="col-lg-5 relative z-3">
  260. <div class="me-lg-3">
  261. <div class="subtitle wow fadeInUp" data-wow-delay=".0s">Your stay in Strasbourg</div>
  262. <h2 class="wow fadeInUp" data-wow-delay=".2s">Rates and services</h2>
  263. <p style="color:#212121; font-size:18px;">An exceptional suite in the heart of Strasbourg, with optionnal dedicated concierge service to assist you throughout your stay.</p>
  265. <p style="color:#212121; font-size:18px;">Minimum booking of two nights.</p>
  267. <a href="#reservation" class="btn-main" style="color:white;">Booking</a>
  270. </div>
  271. </div>
  273. <div class="col-lg-6" style="color:black;">
  274. <div class="spacer-single spacer-double"></div>
  275. <div class="row">
  276. <div class="col-md-6 wow fadeInUp" data-wow-delay=".2s">
  278. {#
  279. <h5 class=" mb-3">Peak Season</h5>
  280. <p class="fs-500"><small>June 1st to September 30th • November 25th to January 5th</small></p>
  281. <ul class="ul-check fs-500">
  282. <li>€960 per night</li>
  283. <li>10% discount for bookings of 7 nights and up</li>
  284. </ul>
  286. <h5 class="mb-3 mt-4">Off-peak Season</h5>
  287. #}
  289. <ul class="ul-check fs-500">
  290. <li>2 guests: €350 per night</li>
  291. <li>4 guests: €690 per night</li>
  292. <li>from 6 guests and up: €890 per night</li>
  293. <li>10% discount for bookings of 7 nights and up</li>
  294. </ul>
  295. </div>
  297. <div class="col-md-6 wow fadeInUp" data-wow-delay=".4s">
  298. <h5 class="mb-3">Optional services</h5>
  299. <ul class="ul-check fs-500">
  300. <li>One parking space: €24/day or €150/week</li>
  301. <li>Extra cleaning during your stay : 60 euros</li>
  302. <li>Other Extras : Children's workshop, baby amenities, dog policy on request (other pets are unfortunately not allowed in the appartement), Decoration for special occasions, breakfast, Alsatian delicacies, etc</li>
  303. </ul>
  305. <div class="mt-4">
  306. <p class="fs-500">
  307. <strong>On site assistance</strong> <br />
  308. <small>Tuesday to Saturday • 10am-6:45pm</small>
  309. </p>
  310. <p class="fs-500">
  311. <strong>Private concierge subject to availability</strong><br>
  312. <small>Quotation on request</small>
  313. </p>
  314. </div>
  315. </div>
  316. </div>
  317. </div>
  318. </div>
  321. </div>
  322. </section>
  324. <section id="section-gallery" class="relative">
  325. <div class="container relative z-2" id="photos">
  326. <div class="row g-4 gx-5 justify-content-center">
  327. <div class="col-lg-6 text-center">
  328. <h2 class="wow fadeInUp" data-wow-delay=".2s">Apartment Gallery</h2>
  329. <p class="wow fadeInUp" data-wow-delay=".3s" style="color:#212121;">Explore our curated images to discover the residence’s various spaces — from the bedrooms and living area to the kitchen, bathroom, and outdoor surroundings.</p>
  330. </div>
  331. </div>
  333. <div class="row">
  334. <div class="col-md-12 text-center">
  335. <ul id="filters" class="wow fadeInUp" data-wow-delay="0s">
  336. <li><a href="#" data-filter="*" class="selected" style="color:#212121;">Show All</a></li>
  337. <li><a href="#" data-filter=".chambre" style="color:#212121;">Bedrooms</a></li>
  338. <li><a href="#" data-filter=".salon" style="color:#212121;">Living Room</a></li>
  339. <li><a href="#" data-filter=".cuisine" style="color:#212121;">Kitchen</a></li>
  340. <li><a href="#" data-filter=".salledebain" style="color:#212121;">Bathroom</a></li>
  341. <li><a href="#" data-filter=".exterieur" style="color:#212121;">Outdoor surroundings</a></li>
  342. </ul>
  343. </div>
  344. </div>
  346. <div id="gallery" class="row g-3 wow fadeInUp" data-wow-delay=".3s">
  347. <div class="col-md-3 col-sm-6 col-12 item chambre">
  348. <a href="images/chambre1.jpeg" class="image-popup d-block hover">
  349. <div class="relative overflow-hidden">
  350. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  351. View
  352. </div>
  353. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  354. <img src="images/chambre1.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom">
  355. </div>
  356. </a>
  357. </div>
  358. <div class="col-md-3 col-sm-6 col-12 item chambre">
  359. <a href="images/chambre2.jpeg" class="image-popup d-block hover">
  360. <div class="relative overflow-hidden">
  361. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  362. View
  363. </div>
  364. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  365. <img src="images/chambre2.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom 2">
  366. </div>
  367. </a>
  368. </div>
  369. <div class="col-md-3 col-sm-6 col-12 item chambre">
  370. <a href="images/chambre3.jpeg" class="image-popup d-block hover">
  371. <div class="relative overflow-hidden">
  372. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  373. View
  374. </div>
  375. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  376. <img src="images/chambre3.jpeg" class="w-100 hover-scale-1-2" alt="Bedroom 3">
  377. </div>
  378. </a>
  379. </div>
  380. <div class="col-md-3 col-sm-6 col-12 item salon">
  381. <a href="images/salon.jpeg" class="image-popup d-block hover">
  382. <div class="relative overflow-hidden">
  383. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  384. View
  385. </div>
  386. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  387. <img src="images/salon.jpeg" class="w-100 hover-scale-1-2" alt="Living Room">
  388. </div>
  389. </a>
  390. </div>
  391. <div class="col-md-3 col-sm-6 col-12 item salon">
  392. <a href="images/salon2.jpeg" class="image-popup d-block hover">
  393. <div class="relative overflow-hidden">
  394. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  395. View
  396. </div>
  397. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  398. <img src="images/salon2.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 2">
  399. </div>
  400. </a>
  401. </div>
  402. <div class="col-md-3 col-sm-6 col-12 item salon">
  403. <a href="images/salon3.jpeg" class="image-popup d-block hover">
  404. <div class="relative overflow-hidden">
  405. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  406. View
  407. </div>
  408. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  409. <img src="images/salon3.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 3">
  410. </div>
  411. </a>
  412. </div>
  413. <div class="col-md-3 col-sm-6 col-12 item salon">
  414. <a href="images/salon4.jpeg" class="image-popup d-block hover">
  415. <div class="relative overflow-hidden">
  416. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  417. View
  418. </div>
  419. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  420. <img src="images/salon4.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 4">
  421. </div>
  422. </a>
  423. </div>
  424. <div class="col-md-3 col-sm-6 col-12 item salon">
  425. <a href="images/salon5.jpeg" class="image-popup d-block hover">
  426. <div class="relative overflow-hidden">
  427. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  428. View
  429. </div>
  430. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  431. <img src="images/salon5.jpeg" class="w-100 hover-scale-1-2" alt="Living Room 5">
  432. </div>
  433. </a>
  434. </div>
  435. <div class="col-md-3 col-sm-6 col-12 item cuisine">
  436. <a href="images/cuisine.jpeg" class="image-popup d-block hover">
  437. <div class="relative overflow-hidden">
  438. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  439. View
  440. </div>
  441. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  442. <img src="images/cuisine.jpeg" class="w-100 hover-scale-1-2" alt="Kitchen">
  443. </div>
  444. </a>
  445. </div>
  446. <div class="col-md-3 col-sm-6 col-12 item salledebain">
  447. <a href="images/salledebain.jpeg" class="image-popup d-block hover">
  448. <div class="relative overflow-hidden">
  449. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  450. View
  451. </div>
  452. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  453. <img src="images/salledebain.jpeg" class="w-100 hover-scale-1-2" alt="Bathroom">
  454. </div>
  455. </a>
  456. </div>
  457. <div class="col-md-3 col-sm-6 col-12 item salledebain">
  458. <a href="images/salledebain2.jpeg" class="image-popup d-block hover">
  459. <div class="relative overflow-hidden">
  460. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  461. View
  462. </div>
  463. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  464. <img src="images/salledebain2.jpeg" class="w-100 hover-scale-1-2" alt="Bathroom 2">
  465. </div>
  466. </a>
  467. </div>
  468. <div class="col-md-3 col-sm-6 col-12 item exterieur">
  469. <a href="images/exterieur.jpeg" class="image-popup d-block hover">
  470. <div class="relative overflow-hidden">
  471. <div class="absolute start-0 w-100 hover-op-1 p-5 abs-middle z-2 text-center text-white z-3">
  472. View
  473. </div>
  474. <div class="absolute start-0 w-100 h-100 overlay-dark-7 hover-op-1 z-2"></div>
  475. <img src="images/exterieur.jpeg" class="w-100 hover-scale-1-2" alt="Exterior">
  476. </div>
  477. </a>
  478. </div>
  479. </div>
  481. </div>
  482. </section>
  484. <section id="reservation" class="text-light">
  485. <div class="container">
  486. <div class="row g-4 justify-content-center">
  487. <div class="col-lg-6 text-center">
  488. <h2 class="wow fadeInUp" data-wow-delay=".2s">Book your stay</h2>
  489. </div>
  490. </div>
  492. <div class="row g-4 justify-content-center">
  493. <div class="col-md-6">
  494. {{ form_start(form) }}
  495. <div class="row g-4">
  497. <div class="col-md-12">
  498. <div class="calendar-container" style="height:300px;">
  499. <input type="text" id="date_range_picker">
  500. </div>
  501. </div>
  503. <div class="col-md-3">
  504. <label style="color:#212121;">Guests</label>
  505. {{ form_widget(form.persons) }}
  506. </div>
  508. <div class="col-md-3">
  509. <label style="color:#212121;">Arrival</label> <br />
  510. </strong> <span id="info-start" style="color:#212121;">-</span>
  511. </div>
  513. <div class="col-md-3">
  514. <label style="color:#212121;">Departure</label> <br />
  515. <span id="info-end" style="color:#212121;">-</span>
  516. </div>
  518. <div class="col-md-3">
  519. <label style="color:#212121;">Nights</label> <br />
  520. <span id="info-nights" style="color:#212121;">-</span>
  521. </div>
  523. <div class="col-md-12" style="font-size:20px;">
  524. <div id="results"></div>
  525. </div>
  527. <div class="col-md-6">
  528. <label style="color:#212121;">Last name</label>
  529. {{ form_widget(form.lastname) }}
  530. </div>
  532. <div class="col-md-6">
  533. <label style="color:#212121;">First name</label>
  534. {{ form_widget(form.name) }}
  535. </div>
  537. <div class="col-md-12">
  538. <label style="color:#212121;">Email address</label>
  539. {{ form_widget(form.email) }}
  540. </div>
  542. <div class="col-md-12">
  543. <label style="color:#212121;">Message</label>
  544. {{ form_widget(form.message) }}
  545. </div>
  547. <div class="col-md-12">
  548. <div class="text-center" style="color:#212121;">
  549. <input type="checkbox" id="acceptCGV" /> I accept the <a href="/terms" target="_blank" style="text-decoration:underline; color:#212121;">terms and conditions of sale</a>
  550. </div>
  551. </div>
  553. <div class="col-md-12">
  554. <div class="text-center">
  555. <button type="submit" name="submit" value="1" class="btn-main" style="color:white;">Send booking request</button>
  556. </div>
  557. </div>
  558. </div>
  560. {{ form_widget(form.start) }}
  561. {{ form_widget(form.end) }}
  563. {{ form_rest(form) }}
  564. {{ form_end(form) }}
  565. </div>
  566. </div>
  567. </div>
  568. </section>
  570. <section id="faq" class="text-light">
  571. <div class="container">
  573. <div class="row g-4 justify-content-center">
  574. <div class="col-lg-6 text-center">
  575. <h2 class="wow fadeInUp" data-wow-delay=".2s">FAQ</h2>
  576. </div>
  577. </div>
  579. <div class="row g-4 justify-content-center">
  580. <div class="col-lg-6 text-left" style="color:black !important;">
  582. <h3 style="margin-top:7px;">How can I book the accommodation?</h3>
  583. <div>You can book directly on our website and soon via partner platforms. Secure payment immediately confirms your reservation.</div>
  585. <h3 style="margin-top:7px;">What are the check-in and check-out times?</h3>
  586. <div>
  587. <ul>
  588. <li>Check-in: from 3:00 PM</li>
  589. <li>Check-out: before 11:00 AM</li>
  590. </ul>
  591. </div>
  593. <h3 style="margin-top:7px;">Is the accommodation fully equipped?</h3>
  594. <div> Yes, the apartment is fully furnished and equipped: kitchen, bedding, towels, appliances, Wi-Fi, and more.</div>
  596. <h3 style="margin-top:7px;">Is parking available?</h3>
  597. <div>Yes, private parking is available as an option at €24 per 24 hours or €150 per week (7 nights).</div>
  599. <h3 style="margin-top:7px;">Is the accommodation suitable for children?</h3>
  600. <div>Yes, we offer some baby amenities (baby cot, high chair, child-friendly tableware) upon request.</div>
  602. <h3 style="margin-top:7px;"> Are pets allowed?</h3>
  603. <div> Please contact us before booking if you wish to bring a pet. Only dogs are accepted, and prior approval is required.</div>
  605. <h3 style="margin-top:7px;">Can I cancel or modify my reservation?</h3>
  606. <div>Yes, our cancellation policy is provided at the time of booking:
  607. <ul>
  608. <li>85% refund if canceled more than 1 month before arrival</li>
  609. <li>50% refund if canceled between 1 month and 15 days before arrival</li>
  610. <li>No refund if canceled less than 15 days before arrival</li>
  611. </ul>
  612. </div>
  614. <h3 style="margin-top:7px;">Is the accommodation accessible by public transport?</h3>
  615. <div>Yes, major transport options are nearby. The tram station “Langstross, Grand’rue” is less than 100 meters from the apartment, and Strasbourg train station is a 10-minute walk.</div>
  617. <h3 style="margin-top:7px;">Are there shops or restaurants nearby?</h3>
  618. <div>Yes, you’ll find supermarkets, cafés, restaurants, and tourist activities right at the foot of the building.</div>
  620. <h3 style="margin-top:7px;"> What should I do if there’s a problem during my stay?</h3>
  621. <div> We are available 24/7 by email for emergencies or questions about the apartment. You can also call us from 9:00 AM to 8:00 PM at +33 7 61 05 82 43, and we are available on-site on the ground floor of the building from Tuesday to Saturday, 10:00 AM to 6:45 PM.
  622. </div>
  624. </div>
  625. </div>
  627. </div>
  628. </section>
  630. {% endblock body %}
  632. {% block footerjs %}
  633. <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
  634. <script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/l10n/en.js"></script>
  635. <script>
  636. function updateSimulation() {
  637. var start = $("#reservation_form_start").val();
  638. var end = $("#reservation_form_end").val();
  639. var persons = $("#reservation_form_persons").val();
  641. if (start && end && persons) {
  642. $("#results").html('<div class="loading">Calculating...</div>');
  644. $.post(
  645. Routing.generate('simulation_pricing'),
  646. {'start': start, 'end': end, 'persons': persons}
  647. )
  648. .done(function(data) {
  649. $("#results").html(data);
  650. })
  651. .fail(function() {
  652. $("#results").html('<div class="error">Calculation error</div>');
  653. });
  654. } else {
  655. $("#results").html('');
  656. }
  657. }
  659. // Écoute les changements sur le nombre de personnes
  660. $("#reservation_form_persons").change(updateSimulation);
  662. $(document).ready(function() {
  663. // Désactive le bouton au chargement de la page
  664. $('button[type="submit"]').prop('disabled', true);
  666. // Écoute les changements sur la checkbox
  667. $('#acceptCGV').change(function() {
  668. if($(this).is(':checked')) {
  669. $('button[type="submit"]').prop('disabled', false);
  670. } else {
  671. $('button[type="submit"]').prop('disabled', true);
  672. }
  673. });
  674. });
  675. </script>
  676. <script>
  677. $(document).ready(function() {
  678. let bookedRanges = [];
  680. $.ajax({
  681. url: '{{ env('WEBHOOK_CALENDAR_AVAILABILITY') }}',
  682. method: 'POST',
  683. contentType: 'application/json',
  684. data: ''
  685. })
  686. .done(function(data) {
  687. bookedRanges = data.bookings || [];
  688. console.log('✅ Créneaux chargés:', bookedRanges);
  689. initDatePicker();
  690. })
  691. .fail(function(error) {
  692. console.error('❌ Erreur:', error);
  693. initDatePicker();
  694. });
  696. // 🔧 FONCTION POUR CRÉER UNE DATE LOCALE SANS DÉCALAGE UTC
  697. function parseLocalDate(dateStr) {
  698. const [year, month, day] = dateStr.split('-').map(Number);
  699. return new Date(year, month - 1, day);
  700. }
  702. const isMobile = window.innerWidth <= 900;
  705. function initDatePicker() {
  706. flatpickr("#date_range_picker", {
  707. inline: true,
  708. mode: "range",
  709. locale: "fr",
  710. minDate: new Date(new Date().setDate(new Date().getDate() + 1)),
  711. dateFormat: "Y-m-d",
  712. showMonths: isMobile ? 1 : 2,
  714. disable: [
  715. function(date) {
  716. const checkDate = new Date(date);
  717. checkDate.setHours(0, 0, 0, 0);
  719. return bookedRanges.some(range => {
  720. const start = parseLocalDate(range.start_date);
  721. const end = parseLocalDate(range.end_date);
  722. return checkDate >= start && checkDate <= end;
  723. });
  724. }
  725. ],
  727. onChange: function(selectedDates, dateStr, instance) {
  728. console.log('📅 Dates sélectionnées:', selectedDates.length);
  730. if (selectedDates.length === 2) {
  731. const start = selectedDates[0];
  732. const end = selectedDates[1];
  734. if (isRangeAvailable(start, end)) {
  735. // ✅ Met à jour avec jQuery ET déclenche l'événement change
  736. $('#reservation_form_start').val(formatDate(start)).trigger('change');
  737. $('#reservation_form_end').val(formatDate(end)).trigger('change');
  739. console.log('✅ Champs mis à jour:',
  740. $('#reservation_form_start').val(),
  741. '→',
  742. $('#reservation_form_end').val()
  743. );
  745. updateSelectedInfo(start, end);
  747. // ✅ Force la simulation
  748. updateSimulation();
  750. } else {
  751. alert('⚠️ Cette période contient des dates déjà réservées.\nVeuillez choisir une autre période.');
  752. instance.clear();
  753. clearSymfonyFields();
  754. hideSelectedInfo();
  755. $("#results").html('');
  756. }
  757. } else {
  758. clearSymfonyFields();
  759. hideSelectedInfo();
  760. $("#results").html('');
  761. }
  762. },
  764. onDayCreate: function(dObj, dStr, fp, dayElem) {
  765. const date = new Date(dayElem.dateObj);
  766. date.setHours(0, 0, 0, 0);
  768. const isBooked = bookedRanges.some(range => {
  769. const start = parseLocalDate(range.start_date);
  770. const end = parseLocalDate(range.end_date);
  771. return date >= start && date <= end;
  772. });
  774. if (isBooked) {
  775. dayElem.classList.add('booked');
  776. dayElem.title = 'Date indisponible (réservée)';
  777. } else if (date >= new Date()) {
  778. dayElem.classList.add('available');
  779. dayElem.title = 'Date disponible';
  780. }
  781. }
  782. });
  783. }
  785. function isRangeAvailable(startDate, endDate) {
  786. let currentDate = new Date(startDate);
  787. currentDate.setHours(0, 0, 0, 0);
  789. const endCheck = new Date(endDate);
  790. endCheck.setHours(0, 0, 0, 0);
  792. while (currentDate <= endCheck) {
  793. const isBooked = bookedRanges.some(range => {
  794. const start = parseLocalDate(range.start_date);
  795. const end = parseLocalDate(range.end_date);
  796. return currentDate >= start && currentDate <= end;
  797. });
  798. if (isBooked) return false;
  799. currentDate.setDate(currentDate.getDate() + 1);
  800. }
  801. return true;
  802. }
  804. function updateSelectedInfo(start, end) {
  805. const nights = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
  806. $('#info-start').text(start.toLocaleDateString('fr-FR'));
  807. $('#info-end').text(end.toLocaleDateString('fr-FR'));
  808. $('#info-nights').text(`${nights} nuit${nights > 1 ? 's' : ''}`);
  809. $('#selected-dates-info').addClass('active');
  810. }
  812. function hideSelectedInfo() {
  813. $('#selected-dates-info').removeClass('active');
  814. }
  816. function clearSymfonyFields() {
  817. $('#reservation_form_start').val('');
  818. $('#reservation_form_end').val('');
  819. }
  821. function formatDate(date) {
  822. const year = date.getFullYear();
  823. const month = String(date.getMonth() + 1).padStart(2, '0');
  824. const day = String(date.getDate()).padStart(2, '0');
  825. return `${year}-${month}-${day}`;
  826. }
  827. });
  828. </script>
  829. {% endblock footerjs %}
  831. {% block css %}
  832. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
  833. <style>
  834. .calendar-container {
  835. margin: 20px 0;
  836. width: 100%;
  837. overflow: hidden;
  838. }
  840. /* Calendrier inline (toujours visible) */
  841. #date_range_picker {
  842. display: none; /* Le champ input est caché, on affiche juste le calendrier */
  843. }
  845. .flatpickr-calendar.inline {
  846. margin: 0 auto;
  847. box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  848. border-radius: 8px;
  849. max-width: 100%;
  850. }
  852. .flatpickr-day.booked {
  853. background-color: #ff4444 !important;
  854. color: white !important;
  855. cursor: not-allowed !important;
  856. position: relative;
  857. }
  859. .flatpickr-day.booked::after {
  860. content: "✕";
  861. position: absolute;
  862. top: 50%;
  863. left: 50%;
  864. transform: translate(-50%, -50%);
  865. font-size: 20px;
  866. font-weight: bold;
  867. }
  869. .flatpickr-day.booked:hover {
  870. background-color: #ff0000 !important;
  871. }
  873. .flatpickr-day.available:hover {
  874. background-color: #28a745;
  875. color: white;
  876. }
  878. /* Adaptations Mobile */
  879. @media (max-width: 768px) {
  880. .calendar-container {
  881. margin: 10px 0;
  882. padding: 0 10px;
  883. }
  885. .flatpickr-calendar.inline {
  886. width: 100% !important;
  887. max-width: 100% !important;
  888. }
  890. .flatpickr-months {
  891. padding: 8px 10px;
  892. }
  894. .flatpickr-days {
  895. width: 100% !important;
  896. }
  898. .dayContainer {
  899. width: 100% !important;
  900. min-width: 100% !important;
  901. max-width: 100% !important;
  902. }
  904. .flatpickr-day {
  905. height: 40px !important;
  906. line-height: 40px !important;
  907. flex-basis: 14.2857% !important;
  908. max-width: 14.2857% !important;
  909. }
  910. }
  911. </style>
  912. {% endblock css %}