From 72f9e25140c92347e8501ced31dbd2110344f165 Mon Sep 17 00:00:00 2001
From: Oriol Carbonell <info@oriolcarbonell.cat>
Date: Mon, 29 Jan 2024 13:42:24 +0100
Subject: [PATCH] Add map legend

---
 web/static/public.css                  | 76 ++++++++++++++++++++++++--
 web/templates/public/campground.gohtml | 46 +++++++++++++++-
 2 files changed, 115 insertions(+), 7 deletions(-)

diff --git a/web/static/public.css b/web/static/public.css
index 2e31b99..1977512 100644
--- a/web/static/public.css
+++ b/web/static/public.css
@@ -767,7 +767,7 @@ dt {
 }
 
 .campsite_type_booking {
-    margin-top: 2.5rem;
+    margin-top: 5rem;
     display: flex;
     gap: 5rem;
 }
@@ -838,7 +838,7 @@ dt {
 }
 
 .campsite_type_prices {
-    padding: 2.5rem;
+    padding: 2.5rem 2.5rem 2.5rem 0;
     border-radius: .6rem;
     flex: .5;
 }
@@ -1094,7 +1094,7 @@ dt {
 .checkin-checkout div {
     min-height: 0;
     flex-basis: 100%;
-    padding: .75rem;
+    padding: .75rem 2rem;
     display: flex;
     gap: .25em;
     border: 2px solid #383127;
@@ -1104,6 +1104,16 @@ dt {
     background-size: 3.2rem;
 }
 
+.checkin-checkout div:first-child {
+  border-top-left-radius: .6rem;
+  border-top-right-radius: .6rem;
+}
+
+.checkin-checkout div:last-child {
+  border-bottom-left-radius: .6rem;
+  border-bottom-right-radius: .6rem;
+}
+
 .checkin-checkout div:hover {
     background-color: initial;
 }
@@ -1454,10 +1464,16 @@ address {
     font-size: 2rem !important;
 }
 
-/* camping map */
+/* campground page */
+
+.map-legend {
+  display: flex;
+  gap: 5rem;
+}
 
 #campground_map {
-    border-radius: .6rem;
+  width: 70vw;
+  border-radius: .6rem;
 }
 
 #arbres {
@@ -1470,6 +1486,56 @@ address {
     opacity: .3;
 }
 
+.legend-directory {
+  width: 30vw;
+  background: #fff;
+  border-radius: .6rem;
+  padding: 1rem 2rem;
+}
+
+.legend-directory h4 {
+  border-bottom: solid 1px;
+  margin: 1rem 0;
+}
+
+.legend-column {
+column-count: 2;
+column-gap: 2rem;
+}
+
+.legend_item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--contrast);
+  margin: 1rem;
+}
+
+.legend_item svg {
+  width: 2rem;
+  height: 2rem;
+  min-width: 2rem;
+  min-height: 2rem;
+  fill: var(--contrast);
+}
+
+@media (max-width: 64rem) {
+.map-legend {
+  display: flex;
+  flex-direction: column;
+}
+
+#campground_map {
+  width: 100%;
+}
+
+.legend-directory {
+width: 100%;
+}
+}
+
+
+
 /* surrounding */
 
 #surroundings-ad {
diff --git a/web/templates/public/campground.gohtml b/web/templates/public/campground.gohtml
index 4bef288..7b177f6 100644
--- a/web/templates/public/campground.gohtml
+++ b/web/templates/public/campground.gohtml
@@ -14,8 +14,50 @@
 {{ define "content" -}}
     {{- /*gotype: dev.tandem.ws/tandem/camper/pkg/app.campgroundPage*/ -}}
     <h2>{{( pgettext "Campground" "title" )}}</h2>
-    <div id="campground_map">{{ template "campground_map.svg" }}</div>
-
+    <div class="map-legend">
+        <div id="campground_map">{{ template "campground_map.svg" }}</div>
+        <div class="legend-directory">
+            <h4>Entrada</h4>
+            <div class="legend-column">
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M48 80a48 48 0 1 1 96 0A48 48 0 1 1 48 80zM0 224c0-17.7 14.3-32 32-32H96c17.7 0 32 14.3 32 32V448h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H64V256H32c-17.7 0-32-14.3-32-32z"/></svg> Informació</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M253.3 35.1c6.1-11.8 1.5-26.3-10.2-32.4s-26.3-1.5-32.4 10.2L117.6 192H32c-17.7 0-32 14.3-32 32s14.3 32 32 32L83.9 463.5C91 492 116.6 512 146 512H430c29.4 0 55-20 62.1-48.5L544 256c17.7 0 32-14.3 32-32s-14.3-32-32-32H458.4L365.3 12.9C359.2 1.2 344.7-3.4 332.9 2.7s-16.3 20.6-10.2 32.4L404.3 192H171.7L253.3 35.1zM192 304v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16s16 7.2 16 16zm96-16c8.8 0 16 7.2 16 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16zm128 16v96c0 8.8-7.2 16-16 16s-16-7.2-16-16V304c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg> Botiga</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M416 0C400 0 288 32 288 176V288c0 35.3 28.7 64 64 64h32V480c0 17.7 14.3 32 32 32s32-14.3 32-32V352 240 32c0-17.7-14.3-32-32-32zM64 16C64 7.8 57.9 1 49.7 .1S34.2 4.6 32.4 12.5L2.1 148.8C.7 155.1 0 161.5 0 167.9c0 45.9 35.1 83.6 80 87.7V480c0 17.7 14.3 32 32 32s32-14.3 32-32V255.6c44.9-4.1 80-41.8 80-87.7c0-6.4-.7-12.8-2.1-19.1L191.6 12.5c-1.8-8-9.3-13.3-17.4-12.4S160 7.8 160 16V150.2c0 5.4-4.4 9.8-9.8 9.8c-5.1 0-9.3-3.9-9.8-9L127.9 14.6C127.2 6.3 120.3 0 112 0s-15.2 6.3-15.9 14.6L83.7 151c-.5 5.1-4.7 9-9.8 9c-5.4 0-9.8-4.4-9.8-9.8V16zm48.3 152l-.3 0-.3 0 .3-.7 .3 .7z"/></svg> Restaurant</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M96 64c0-17.7 14.3-32 32-32H448h64c70.7 0 128 57.3 128 128s-57.3 128-128 128H480c0 53-43 96-96 96H192c-53 0-96-43-96-96V64zM480 224h32c35.3 0 64-28.7 64-64s-28.7-64-64-64H480V224zM32 416H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg> Bar</div>
+                <div class="legend_item"><svg id="uuid-f4523c37-7361-46e6-ae12-15f890a2aa08" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18.99136 19.00001"><path d="M7.0018,3.4948c-.6238-.6203-1.257-1.2319-1.8654-1.8669-.1634-.1707-.3047-.3997-.3624-.6259-.081-.3171.0603-.6064.3259-.8058.2721-.2042.5777-.2694.889-.0972.153.0847.2956.199.4202.3226,1.0049.997,2.0043,1.9994,3.0057,2.9997.0137.0136.0325.0221.0794.0533.0697-.0637.1492-.1306.2223-.2036.9665-.9654,1.9315-1.9322,2.8981-2.8975.2472-.2468.5264-.4307.8969-.3481.6532.1455.9178.8428.5293,1.3886-.074.1038-.1679.1944-.2586.2853-.5994.6013-1.2003,1.201-1.8501,1.8506.1642.0072.2662.0155.3684.0155,1.2173.001,2.4347-.0065,3.6521.0026,1.5291.0113,2.6581.913,2.9603,2.3621.0522.2499.0734.5107.0738.7665.005,3.059.0065,6.1181.0019,9.177-.0025,1.5721-.8474,2.696-2.2782,3.0291-.2765.0644-.5675.0923-.852.0926-4.2459.0057-8.4918.0054-12.7378.0034-1.8921-.0009-3.1174-1.2295-3.1188-3.127C-.0006,12.8128-.0006,9.7537.0018,6.6947c.0014-1.8981,1.2262-3.1251,3.1177-3.1283,1.1778-.0019,2.3556-.0004,3.5333-.0004h.318l.031-.0712ZM8.2956,16.6385c1.138,0,2.276.0021,3.4139-.0005,1.5001-.0034,2.5418-1.0346,2.5473-2.5343.0067-1.8805.0067-3.7611,0-5.6416-.0054-1.4998-1.0471-2.5327-2.5468-2.5345-2.2661-.0028-4.532-.0023-6.798-.0002-1.5301.0013-2.5501,1.0162-2.5543,2.5491-.0053,1.8706-.0053,3.7413,0,5.6119.0042,1.5332,1.0239,2.5471,2.5538,2.5497,1.128.0019,2.2561.0004,3.3841.0004M15.7309,8.605c-.0027.4775.3998.8897.8777.8989.4747.0091.9185-.4342.9072-.9062-.0113-.4715-.4332-.8859-.8998-.8838-.4749.0023-.8824.4124-.8851.8911M15.7309,11.5808c.0008.4782.4065.8892.8825.8939.4656.0048.8885-.4083.9024-.8811.0139-.4713-.4285-.9156-.9046-.9089-.4769.0068-.8811.4183-.8803.8961" stroke-width="0"/></svg> Sala de televisió</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M215.5 224c29.2-18.4 48.5-50.9 48.5-88c0-57.4-46.6-104-104-104S56 78.6 56 136c0 37.1 19.4 69.6 48.5 88H96c-17.7 0-32 14.3-32 32c0 16.5 12.5 30 28.5 31.8L80 400H240L227.5 287.8c16-1.8 28.5-15.3 28.5-31.8c0-17.7-14.3-32-32-32h-8.5zM22.6 473.4c-4.2 4.2-6.6 10-6.6 16C16 501.9 26.1 512 38.6 512H281.4c12.5 0 22.6-10.1 22.6-22.6c0-6-2.4-11.8-6.6-16L256 432H64L22.6 473.4z"/></svg> Sala de jocs</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M174.7 45.1C192.2 17 223 0 256 0s63.8 17 81.3 45.1l38.6 61.7 27-15.6c8.4-4.9 18.9-4.2 26.6 1.7s11.1 15.9 8.6 25.3l-23.4 87.4c-3.4 12.8-16.6 20.4-29.4 17l-87.4-23.4c-9.4-2.5-16.3-10.4-17.6-20s3.4-19.1 11.8-23.9l28.4-16.4L283 79c-5.8-9.3-16-15-27-15s-21.2 5.7-27 15l-17.5 28c-9.2 14.8-28.6 19.5-43.6 10.5c-15.3-9.2-20.2-29.2-10.7-44.4l17.5-28zM429.5 251.9c15-9 34.4-4.3 43.6 10.5l24.4 39.1c9.4 15.1 14.4 32.4 14.6 50.2c.3 53.1-42.7 96.4-95.8 96.4L320 448v32c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-64-64c-9.4-9.4-9.4-24.6 0-33.9l64-64c6.9-6.9 17.2-8.9 26.2-5.2s14.8 12.5 14.8 22.2v32l96.2 0c17.6 0 31.9-14.4 31.8-32c0-5.9-1.7-11.7-4.8-16.7l-24.4-39.1c-9.5-15.2-4.7-35.2 10.7-44.4zm-364.6-31L36 204.2c-8.4-4.9-13.1-14.3-11.8-23.9s8.2-17.5 17.6-20l87.4-23.4c12.8-3.4 26 4.2 29.4 17L182 241.2c2.5 9.4-.9 19.3-8.6 25.3s-18.2 6.6-26.6 1.7l-26.5-15.3L68.8 335.3c-3.1 5-4.8 10.8-4.8 16.7c-.1 17.6 14.2 32 31.8 32l32.2 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32.2 0C42.7 448-.3 404.8 0 351.6c.1-17.8 5.1-35.1 14.6-50.2l50.3-80.5z"/></svg> Reciclatge</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg> Escombraries</div>
+                <div class="legend_item"><svg id="uuid-e8313e31-df76-4c47-80e7-c216ce8e7899" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 19 15.8333"><path d="M14.5469,5.7396c.1539-.2859.4068-.4399.7587-.4619.3518.022.6157.176.7916.4619l2.474,4.651c.2859.5498.4288,1.1325.4288,1.7483-.022,1.0555-.3848,1.9241-1.0885,2.6059-.6818.7037-1.5504,1.0665-2.6059,1.0885-1.0556-.022-1.9242-.3848-2.6059-1.0885-.7038-.6818-1.0666-1.5504-1.0886-2.6059,0-.6158.143-1.1985.4288-1.7483l2.507-4.651ZM5.2778,2.1111v4.2222V2.1111v4.2222h1.0555V2.1111h-1.0555ZM8.4444,2.1111v4.2222V2.1111v4.2222h1.0556V2.1111h-1.0556ZM12.6667,2.1111h-1.0556,1.0556-1.0556v4.2222h1.0556V2.1111ZM9.5,12.6666v-4.2222,4.2222-4.2222h-1.0556v4.2222h1.0556ZM6.3333,12.6666v-4.2222,4.2222-4.2222h-1.0555v4.2222h1.0555ZM2.1111,12.6666h1.0556-1.0556,1.0556v-4.2222h-1.0556v4.2222ZM3.1667,2.1111h-1.0556,1.0556-1.0556v4.2222h1.0556V2.1111ZM0,2.1111c.022-.5938.2309-1.0886.6267-1.4844C1.0226.2309,1.5174.022,2.1111,0h10.5556c.5937.022,1.0885.2309,1.4843.6267.3959.3958.6048.8906.6268,1.4844v2.1771c-.5278.1539-.9236.4728-1.1875.9566l-2.474,4.651c-.3738.7037-.5607,1.4514-.5607,2.2431.0219.9895.2858,1.8692.7916,2.6388H2.1111c-.5937-.0219-1.0885-.2309-1.4844-.6267-.3958-.3958-.6047-.8906-.6267-1.4844V2.1111Z" stroke-width="0"/></svg> Estació Servei</div>
+            </div>
+            <h4>Esbarjo</h4>
+            <div class="legend-column"> 
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M128 127.7C128 74.9 170.9 32 223.7 32c48.3 0 89 36 95 83.9l1 8.2c2.2 17.5-10.2 33.5-27.8 35.7s-33.5-10.2-35.7-27.8l-1-8.2c-2-15.9-15.5-27.8-31.5-27.8c-17.5 0-31.7 14.2-31.7 31.7V224H384V127.7C384 74.9 426.9 32 479.7 32c48.3 0 89 36 95 83.9l1 8.2c2.2 17.5-10.2 33.5-27.8 35.7s-33.5-10.2-35.7-27.8l-1-8.2c-2-15.9-15.5-27.8-31.5-27.8c-17.5 0-31.7 14.2-31.7 31.7V361c-1.6 1-3.3 2-4.8 3.1c-18 12.4-40.1 20.3-59.2 20.3h0V288H192v96.5c-19 0-41.2-7.9-59.1-20.3c-1.6-1.1-3.2-2.2-4.9-3.1V127.7zM306.5 389.9C329 405.4 356.5 416 384 416c26.9 0 55.4-10.8 77.4-26.1l0 0c11.9-8.5 28.1-7.8 39.2 1.7c14.4 11.9 32.5 21 50.6 25.2c17.2 4 27.9 21.2 23.9 38.4s-21.2 27.9-38.4 23.9c-24.5-5.7-44.9-16.5-58.2-25C449.5 469.7 417 480 384 480c-31.9 0-60.6-9.9-80.4-18.9c-5.8-2.7-11.1-5.3-15.6-7.7c-4.5 2.4-9.7 5.1-15.6 7.7c-19.8 9-48.5 18.9-80.4 18.9c-33 0-65.5-10.3-94.5-25.8c-13.4 8.4-33.7 19.3-58.2 25c-17.2 4-34.4-6.7-38.4-23.9s6.7-34.4 23.9-38.4c18.1-4.2 36.2-13.3 50.6-25.2c11.1-9.4 27.3-10.1 39.2-1.7l0 0C136.7 405.2 165.1 416 192 416c27.5 0 55-10.6 77.5-26.1c11.1-7.9 25.9-7.9 37 0z"/></svg> Piscina</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M32 192V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V88c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V88c0 4.4 3.6 8 8 8h32c4.4 0 8-3.6 8-8V48c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16V192c0 10.1-4.7 19.6-12.8 25.6L352 256l16 144H80L96 256 44.8 217.6C36.7 211.6 32 202.1 32 192zm176 96h32c8.8 0 16-7.2 16-16V224c0-17.7-14.3-32-32-32s-32 14.3-32 32v48c0 8.8 7.2 16 16 16zM22.6 473.4L64 432H384l41.4 41.4c4.2 4.2 6.6 10 6.6 16c0 12.5-10.1 22.6-22.6 22.6H38.6C26.1 512 16 501.9 16 489.4c0-6 2.4-11.8 6.6-16z"/></svg> Parc infantil</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M320 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM125.7 175.5c9.9-9.9 23.4-15.5 37.5-15.5c1.9 0 3.8 .1 5.6 .3L137.6 254c-9.3 28 1.7 58.8 26.8 74.5l86.2 53.9-25.4 88.8c-4.9 17 5 34.7 22 39.6s34.7-5 39.6-22l28.7-100.4c5.9-20.6-2.6-42.6-20.7-53.9L238 299l30.9-82.4 5.1 12.3C289 264.7 323.9 288 362.7 288H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H362.7c-12.9 0-24.6-7.8-29.5-19.7l-6.3-15c-14.6-35.1-44.1-61.9-80.5-73.1l-48.7-15c-11.1-3.4-22.7-5.2-34.4-5.2c-31 0-60.8 12.3-82.7 34.3L57.4 153.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l23.1-23.1zM91.2 352H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h69.6c19 0 36.2-11.2 43.9-28.5L157 361.6l-9.5-6c-17.5-10.9-30.5-26.8-37.9-44.9L91.2 352z"/></svg> Camp d'esports</div>
+            </div>       
+             <h4>Allotjaments</h4>
+             <div class="legend-column">   
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-10 0 533 512"><path d="M237 -33q19 -12 38 0l109 78v0v-20v0q0 -14 9 -23t23 -9h32v0q14 0 23 9t9 23v89v0l19 13v0q17 14 12 36q-8 21 -31 22h-32h-416q-22 -1 -30 -22q-6 -22 11 -36l224 -160v0zM32 241q2 -22 24 -24h112v0q22 2 24 24v16v0q-2 22 -24 24h-112v0q-22 -2 -24 -24v-16v0z M56 313h112h-112h112q22 2 24 24v16v0q-2 22 -24 24h-112v0q-22 -2 -24 -24v-16v0q2 -22 24 -24v0zM56 409h112h-112h112q22 2 24 24v16v0q-2 22 -24 24h-112v0q-22 -2 -24 -24v-16v0q2 -22 24 -24v0zM320 241q2 -22 24 -24h112v0q22 2 24 24v16v0q-2 22 -24 24h-112v0 q-22 -2 -24 -24v-16v0zM344 409h112h-112h112q22 2 24 24v16v0q-2 22 -24 24h-112v0q-22 -2 -24 -24v-16v0q2 -22 24 -24v0zM320 337q2 -22 24 -24h112v0q22 2 24 24v16v0q-2 22 -24 24h-112v0q-22 -2 -24 -24v-16v0zM256 121q14 0 23 -9v0v0q9 -9 9 -23t-9 -23t-23 -9 t-23 9t-9 23t9 23t23 9v0z" /></svg> Cabana de fusta</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M36.8 192H603.2c20.3 0 36.8-16.5 36.8-36.8c0-7.3-2.2-14.4-6.2-20.4L558.2 21.4C549.3 8 534.4 0 518.3 0H121.7c-16 0-31 8-39.9 21.4L6.2 134.7c-4 6.1-6.2 13.2-6.2 20.4C0 175.5 16.5 192 36.8 192zM64 224V384v80c0 26.5 21.5 48 48 48H336c26.5 0 48-21.5 48-48V384 224H320V384H128V224H64zm448 0V480c0 17.7 14.3 32 32 32s32-14.3 32-32V224H512z"/></svg> Bungalou</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M269.4 6C280.5-2 295.5-2 306.6 6l224 160c7.4 5.3 12.2 13.5 13.2 22.5l32 288c1 9-1.9 18.1-8 24.9s-14.7 10.7-23.8 10.7H464 435.8c-12.1 0-23.2-6.8-28.6-17.7L306.7 293.5c-1.7-3.4-5.1-5.5-8.8-5.5c-5.5 0-9.9 4.4-9.9 9.9V480c0 17.7-14.3 32-32 32H240 32c-9.1 0-17.8-3.9-23.8-10.7s-9-15.8-8-24.9l32-288c1-9 5.8-17.2 13.2-22.5L269.4 6z"/></svg> Safari Tent</div>
+             </div>    
+            <h4>Edifici central</h4>
+            <div class="legend-column">    
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M24 0C10.7 0 0 10.7 0 24S10.7 48 24 48h8V196.9c-1.9 1.4-3.8 2.9-5.6 4.4C10.9 214.5 0 232.9 0 256c0 46.9 14.3 84.1 37 112.5c14.2 17.7 31.1 31.3 48.5 41.8L65.6 469.9c-3.3 9.8-1.6 20.5 4.4 28.8s15.7 13.3 26 13.3H352c10.3 0 19.9-4.9 26-13.3s7.7-19.1 4.4-28.8l-19.8-59.5c17.4-10.5 34.3-24.1 48.5-41.8c22.7-28.4 37-65.5 37-112.5c0-23.1-10.9-41.5-26.4-54.6c-1.8-1.5-3.7-3-5.6-4.4V48h8c13.3 0 24-10.7 24-24s-10.7-24-24-24H24zM384 256.3c0 1-.3 2.6-3.8 5.6c-4.8 4.1-14 9-29.3 13.4C320.5 284 276.1 288 224 288s-96.5-4-126.9-12.8c-15.3-4.4-24.5-9.3-29.3-13.4c-3.5-3-3.8-4.6-3.8-5.6l0-.3 0-.1c0-1 0-2.5 3.8-5.8c4.8-4.1 14-9 29.3-13.4C127.5 228 171.9 224 224 224s96.5 4 126.9 12.8c15.3 4.4 24.5 9.3 29.3 13.4c3.8 3.2 3.8 4.8 3.8 5.8l0 .1 0 .3zM328.2 384l-.2 .5 0-.5h.2zM112 64h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H112c-8.8 0-16-7.2-16-16s7.2-16 16-16z"/></svg> Lavabo</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 131.9C64 112.1 80.1 96 99.9 96c9.5 0 18.6 3.8 25.4 10.5l16.2 16.2c-21 38.9-17.4 87.5 10.9 123L151 247c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0L345 121c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-1.3 1.3c-35.5-28.3-84.2-31.9-123-10.9L170.5 61.3C151.8 42.5 126.4 32 99.9 32C44.7 32 0 76.7 0 131.9V448c0 17.7 14.3 32 32 32s32-14.3 32-32V131.9zM256 352a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm64 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm64 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-128a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm64 64a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm32-32a32 32 0 1 0 0-64 32 32 0 1 0 0 64z"/></svg> Dutxes</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M152 88a72 72 0 1 1 144 0A72 72 0 1 1 152 88zM39.7 144.5c13-17.9 38-21.8 55.9-8.8L131.8 162c26.8 19.5 59.1 30 92.2 30s65.4-10.5 92.2-30l36.2-26.4c17.9-13 42.9-9 55.9 8.8s9 42.9-8.8 55.9l-36.2 26.4c-13.6 9.9-28.1 18.2-43.3 25V288H128V251.7c-15.2-6.7-29.7-15.1-43.3-25L48.5 200.3c-17.9-13-21.8-38-8.8-55.9zm89.8 184.8l60.6 53-26 37.2 24.3 24.3c15.6 15.6 15.6 40.9 0 56.6s-40.9 15.6-56.6 0l-48-48C70 438.6 68.1 417 79.2 401.1l50.2-71.8zm128.5 53l60.6-53 50.2 71.8c11.1 15.9 9.2 37.5-4.5 51.2l-48 48c-15.6 15.6-40.9 15.6-56.6 0s-15.6-40.9 0-56.6L284 419.4l-26-37.2z"/></svg> Bany per nadons</div>
+                <div class="legend_item"><svg id="uuid-ffa6716e-c802-44ba-a5cc-abfda864dee7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.44559 17.65332"><path d="M.00108,8.82589c.00002-2.17122-.00319-4.34246.00136-6.51367C.00476,1.20252.63164.36476,1.66751.08883,1.88676.03043,2.12108.0048,2.34851.00447,5.92783-.00063,9.50717-.00122,13.0865.00196c1.37552.00122,2.34583.93545,2.34976,2.31136.01239,4.34241.01251,8.6849-.00008,13.0273-.00399,1.37583-.97469,2.30912-2.35075,2.31032-3.57933.00313-7.15866.00321-10.73799-.00003-1.39358-.00126-2.34299-.94936-2.34539-2.33896-.00375-2.16202-.00099-4.32405-.00097-6.48607ZM2.74474,10.48609c.00387,2.76425,2.22469,4.98027,4.98248,4.97172,2.74436-.0085,4.95605-2.2175,4.97091-4.96484.01481-2.73807-2.22594-4.98231-4.97782-4.98559-2.7584-.00328-4.97944,2.21915-4.97557,4.9787ZM2.19764,3.02157c-.00583.44233.36555.82688.81105.83979.43904.01273.85372-.39669.84789-.83712-.00578-.43643-.39522-.82315-.83149-.82567-.43893-.00253-.82158.37805-.82744.82299ZM5.51048,3.03059c.0006.4442.37778.82627.82005.83067.43293.00431.82578-.37902.83889-.81856.01306-.43774-.39769-.85042-.84051-.84448-.44295.00595-.81903.38843-.81843.83237Z" stroke-width="0"/><path d="M11.52389,10.98252c-.48226,3.2512-4.06638,4.20608-6.16399,2.54644-1.3368-1.05768-1.8628-2.90258-1.24757-4.40893.06173-.15113.13534-.22234.30998-.24706,1.01615-.14384,1.89977.18479,2.7367.71757.53465.34035,1.07721.66845,1.61991.99595.73475.44339,1.54009.51107,2.37123.43085.11713-.0113.23432-.02186.37374-.03483Z" stroke-width="0"/></svg> Rentador</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M211.8 0c7.8 0 14.3 5.7 16.7 13.2C240.8 51.9 277.1 80 320 80s79.2-28.1 91.5-66.8C413.9 5.7 420.4 0 428.2 0h12.6c22.5 0 44.2 7.9 61.5 22.3L628.5 127.4c6.6 5.5 10.7 13.5 11.4 22.1s-2.1 17.1-7.8 23.6l-56 64c-11.4 13.1-31.2 14.6-44.6 3.5L480 197.7V448c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64V197.7l-51.5 42.9c-13.3 11.1-33.1 9.6-44.6-3.5l-56-64c-5.7-6.5-8.5-15-7.8-23.6s4.8-16.6 11.4-22.1L137.7 22.3C155 7.9 176.7 0 199.2 0h12.6z"/></svg> Estenedors</div>
+                <div class="legend_item"><svg id="uuid-814be0bc-c310-421c-9651-5f8617c698e7" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15.21735 17.41613"><path d="M3.85346,12.5247c-.46804-.30172-.94286-.55664-1.35941-.8854C.88736,10.37123.07485,8.6904.00138,6.65175c-.02862-.7941.38983-1.20825,1.19426-1.20872,2.68683-.00158,5.37365-.00062,8.06048-.00062,1.57034,0,3.14068-.00057,4.71103.00022.90819.00046,1.306.43772,1.24394,1.34455-.17607,2.57273-1.4124,4.44232-3.70669,5.61474-.03217.01644-.06384.0344-.09358.05481-.01408.00966-.02304.0268-.05075.06058.24742.57956.49939,1.16996.75151,1.76031.2848.66685.5768,1.33075.8514,2.00178.12305.30069.12788.60687-.11739.86346-.23369.24448-.52663.34208-.84101.21423-.16541-.06727-.29966-.2197-.43555-.34696-.05639-.0528-.10021-.13622-.11585-.21265-.13415-.65582-.53903-.78188-1.17122-.7607-1.58672.05316-3.17641.01997-4.76489.01428-.18139-.00065-.28508.03926-.37416.22006-.3571.72475-1.20975,1.20713-1.95977,1.13854-.96409-.08817-1.71288-.6548-1.97928-1.49777-.26688-.84447-.01233-1.74267.64137-2.29528.45891-.38794.9857-.55386,1.5824-.53339.0753.00258.18442-.05558.22379-.11912.08892-.14349.144-.30795.20204-.43939ZM10.44689,14.43418c-.21597-.49094-.40773-.9384-.61393-1.37911-.02244-.04797-.12856-.08152-.19516-.08037-1.14053.01955-2.28091.04846-3.42144.06821-.27186.00471-.61544-.12091-.79689.00284-.19458.13269-.23686.4888-.34558.74742-.00351.00834-.00727.0166-.01019.02514-.08959.26192.15705.61526.43167.61558.7343.00085,1.4686.0003,2.2029.0003.89654,0,1.79309,0,2.74863,0ZM2.43555,15.23256c-.00827.43575.35568.81591.79673.83222.43194.01596.8423-.38563.84032-.82237-.00195-.42973-.38417-.81268-.81695-.81851-.43203-.00581-.81174.3686-.8201.80866Z" stroke-width="0"/><path d="M3.26371.97369c.00255-.36858.08023-.68629.42335-.86531.29962-.15632.6188-.15431.85828.077.15579.15047.28798.39036.30809.60185.03397.35722.21207.55194.49737.7168.71159.4112,1.10449,1.03262,1.15227,1.85633.02044.35237-.07243.67132-.40941.85561-.30732.16806-.63007.15957-.88204-.07841-.1455-.13742-.27818-.36114-.28904-.55323-.02226-.39354-.22845-.59697-.53803-.77922-.69886-.41143-1.07017-1.03447-1.12085-1.83142Z"  stroke-width="0"/><path d="M10.32649,3.44244c-.0023.48505-.32528.85252-.77927.8866-.41793.03138-.79744-.31245-.8243-.79732-.01783-.32186-.17045-.5163-.42756-.67252-.62312-.37859-1.0759-.89017-1.18567-1.63673-.02956-.20104-.02046-.41739.01957-.61694C7.20128.24658,7.54959-.01101,7.89448.00042c.36555.01211.72.26434.74345.6299.03151.49131.29682.745.68757.98053.63159.3807,1.00438,1.11701,1.00099,1.83159Z" stroke-width="0"/></svg> Barbacoa</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 0H160 128C110.3 0 96 14.3 96 32s14.3 32 32 32V196.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512H378.6c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5V64c17.7 0 32-14.3 32-32s-14.3-32-32-32H288zM192 196.8V64h64V196.8c0 23.7 6.6 46.9 19 67.1L309.5 320h-171L173 263.9c12.4-20.2 19-43.4 19-67.1z"/></svg> Buidatge vàters químic</div>
+            </div>   
+            <h4>En tot el càmping</h4>
+            <div class="legend-column"> 
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M500.3 7.3C507.7 13.3 512 22.4 512 32v96c0 9.6-4.3 18.7-11.7 24.7s-17.2 8.5-26.6 6.6l-160-32C301.5 124.9 292 115.7 289 104H224v34.8c37.8 18 64 56.5 64 101.2V384H64V240c0-44.7 26.2-83.2 64-101.2V110c-36.2 11.1-66 36.9-82.3 70.5c-5.8 11.9-20.2 16.9-32.1 11.1S-3.3 171.4 2.5 159.5C26.7 109.8 72.7 72.6 128 60.4V32c0-17.7 14.3-32 32-32h32c17.7 0 32 14.3 32 32V56h65c3-11.7 12.5-20.9 24.7-23.4l160-32c9.4-1.9 19.1 .6 26.6 6.6zM288 416v32c0 35.3-28.7 64-64 64H128c-35.3 0-64-28.7-64-64V416H288zM176 96a16 16 0 1 0 0-32 16 16 0 1 0 0 32z"/></svg> Extintors</div>
+                <div class="legend_item"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M224 0c17.7 0 32 14.3 32 32V44l96-12c17.7 0 32 14.3 32 32s-14.3 32-32 32L256 84l-31-3.9-1-.1-1 .1L192 84 96 96C78.3 96 64 81.7 64 64s14.3-32 32-32l96 12V32c0-17.7 14.3-32 32-32zM0 224c0-17.7 14.3-32 32-32h96l22.6-22.6c6-6 14.1-9.4 22.6-9.4H192V116.2l32-4 32 4V160h18.7c8.5 0 16.6 3.4 22.6 9.4L320 192h32c88.4 0 160 71.6 160 160c0 17.7-14.3 32-32 32H416c-17.7 0-32-14.3-32-32s-14.3-32-32-32H315.9c-20.2 29-53.9 48-91.9 48s-71.7-19-91.9-48H32c-17.7 0-32-14.3-32-32V224zM436.8 423.4c1.9-4.5 6.3-7.4 11.2-7.4s9.2 2.9 11.2 7.4l18.2 42.4c1.8 4.1 2.7 8.6 2.7 13.1V480c0 17.7-14.3 32-32 32s-32-14.3-32-32v-1.2c0-4.5 .9-8.9 2.7-13.1l18.2-42.4z"/></svg> Aixeta</div>
+            </div>    
+        </div>
+    </div>
     <script src="/static/leaflet@1.9.4/leaflet.js"></script>
     <script src="/static/map.js?v={{ camperVersion }}"></script>
 {{- end }}