Feed additional hikes details (if any) from Google Sheet

assets/css/custom-styles.css

@@ -39,6 +39,22 @@
   font-style: italic;
   font-weight: lighter;
 }
+
+/* Style for additional hikes details */
+
+#cards {
+    border: 1px solid #fde5cb;
+    border-left-width: 0.3125rem;
+    border-radius: 0.3125rem 0.1875rem 0.1875rem 0.3125rem;
+    border-left-color: #fff;
+    padding: 0rem 0.9375rem 0rem 0.625rem;
+    margin: 0 1.25rem 0 0.3125rem;
+}
+
+.card p {
+    margin: 0 5px 18px 5px;
+}
+
 /*!
  * Font Awesome Free 5.12.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)

deutsch.html

@@ -6,7 +6,7 @@
 language: de
 ---
 <div class="welcome">
-   <div style="align:right;padding: 0 1.5rem 0">
+   <div style="padding: 0 1.5rem 0">
     Hello<br>
     Ciao<br>
     Bonjour<br>
@@ -45,6 +45,14 @@ <h2 id="nextMeeting"></h2>
 <br><strong>Nehmen Sie auch ausreichend Wasser mit</strong>, da es entlang der Wanderwege auf dem Salève keine Quellen gibt.</p>
 </div>
 
+<h2>Zusätzliche Wanderungen</h2>
+        <p>Manchmal organisieren wir eine zusätzlichen Treffpunkt, um den Süden des Salève fernab von der Seilbahn zu erkunden.
+         <strong>Nur für erfahrene Wanderer, die bereits mit uns den Salève bestiegen haben.</strong>
+         Einzelheiten werden 1-2 Tage im voraus hier angekündigt, je nach Wetterbedingungen. 
+      </p>
+
+  <div id="cards"></div>
+
 <div class="box-error">
 Der Verein lehnt jede Verantwortung für Unfälle ab.
 </div>
@@ -59,4 +67,38 @@ <h2 id="nextMeeting"></h2>
 var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit', 'year': 'numeric'};
 var date = d.toLocaleString('de-DE', options);
 document.getElementById('nextMeeting').innerHTML = "Nächste Wanderung: "+date.toString();
+
+   const scriptUrl = "https://script.google.com/macros/s/AKfycbxrDnesoYawPLQHClhvAdgQ99RgiN-gSm2uwStbYuDarsovduTptgTzfamoxxQPuR5X/exec"; 
+
+    async function loadHikes() {
+      const container = document.getElementById("cards");
+      container.innerHTML = "<p>Einen Moment...</p>";
+
+      try {
+        const response = await fetch(scriptUrl);
+        const hikes = await response.json();
+
+        container.innerHTML = "";
+
+        hikes.forEach(hike => {
+          const card = document.createElement("div");
+          card.className = "card";
+
+          card.innerHTML = `
+            <p><strong> ${hike.Rdv || ""}</strong><br>
+            ${hike.Stops || ""}<br>
+            ${hike.Details || ""}</p>
+          `;
+
+          container.appendChild(card);
+        });
+
+      } catch (err) {
+        console.error(err);
+        container.innerHTML = "<p>Oops.</p>";
+      }
+    }
+
+    loadHikes();
+
 </script>

english.html

@@ -7,7 +7,7 @@
 language: en
 ---
 <div class="welcome">
-   <div style="align:right;padding: 0 1.5rem 0">
+   <div style="padding: 0 1.5rem 0">
     Hello<br>
     Ciao<br>
     Bonjour<br>
@@ -42,6 +42,14 @@ <h2 id="nextMeeting"></h2>
 <br><strong>Be sure to bring enough water</strong> as there are no sources along the hiking paths on the Salève.</p>
 </div>
 
+<h2>Additional hikes </h2>
+        <p>Sometimes we organise a second meet-up point to explore the south of Mont Salève, far from the cable car.
+         <strong>These hikes are for experienced hikers only, who have walked up the Salève with us before</strong>.
+         Details are announced here 1-2 days in advance, depending on weather conditions. 
+      </p>
+
+      <div id="cards"></div>
+
 <div class="box-error">
 The association declines all responsibility in the event of an accident.
 </div>
@@ -56,4 +64,38 @@ <h2 id="nextMeeting"></h2>
 var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit', 'year': 'numeric'};
 var date = d.toLocaleString('en-US', options);
 document.getElementById('nextMeeting').innerHTML = "Next hike: "+date.toString();
+
+    const scriptUrl = "https://script.google.com/macros/s/AKfycbxrDnesoYawPLQHClhvAdgQ99RgiN-gSm2uwStbYuDarsovduTptgTzfamoxxQPuR5X/exec"; 
+
+    async function loadHikes() {
+      const container = document.getElementById("cards");
+      container.innerHTML = "<p>Loading ...</p>";
+
+      try {
+        const response = await fetch(scriptUrl);
+        const hikes = await response.json();
+
+        container.innerHTML = "";
+
+        hikes.forEach(hike => {
+          const card = document.createElement("div");
+          card.className = "card";
+
+          card.innerHTML = `
+            <p><strong> ${hike.Rdv || ""}</strong><br>
+            ${hike.Stops || ""}<br>
+            ${hike.Details || ""}</p>
+          `;
+
+          container.appendChild(card);
+        });
+
+      } catch (err) {
+        console.error(err);
+        container.innerHTML = "<p>Oops.</p>";
+      }
+    }
+
+    loadHikes();
+
 </script>

espagnol.html

@@ -6,7 +6,7 @@
 language: es
 ---
 <div class="welcome">
-   <div style="align:right;padding: 0 1.5rem 0">
+   <div style="padding: 0 1.5rem 0">
     Hello<br>
     Ciao<br>
     Bonjour<br>
@@ -43,6 +43,14 @@ <h2 id="nextMeeting"></h2>
 <br><strong>Lleve también suficiente agua</strong>, ya que no hay manantiales en los senderos de la Salève.</p>
 </div>
 
+<h2>Excursiones adicionales</h2>
+        <p>En ocasiones, organizamos un segundo punto de encuentro para explorar la zona sur del Mont Salève, lejos del teleférico. 
+    <strong>Estas excursiones son solo para excursionistas experimentados que ya hayan subido al Salève con nosotros</strong>. 
+    Los detalles se anuncian aquí con 1-2 días de antelación, dependiendo de la previsión meteorológica.
+      </p>
+
+  <div id="cards"></div>
+
 <div class="box-error">
 La asociación declina toda responsabilidad en caso de accidente.
 </div>
@@ -56,5 +64,39 @@ <h2 id="nextMeeting"></h2>
 }
 var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit', 'year': 'numeric'};
 var date = d.toLocaleString('es-ES', options);
-document.getElementById('nextMeeting').innerHTML = "Próximo senderismo: "+date.toString();
+document.getElementById('nextMeeting').innerHTML = "Próxima excursión: "+date.toString();
+
+    const scriptUrl = "https://script.google.com/macros/s/AKfycbxrDnesoYawPLQHClhvAdgQ99RgiN-gSm2uwStbYuDarsovduTptgTzfamoxxQPuR5X/exec"; 
+
+    async function loadHikes() {
+      const container = document.getElementById("cards");
+      container.innerHTML = "<p>Cargando ...</p>";
+
+      try {
+        const response = await fetch(scriptUrl);
+        const hikes = await response.json();
+
+        container.innerHTML = "";
+
+        hikes.forEach(hike => {
+          const card = document.createElement("div");
+          card.className = "card";
+
+          card.innerHTML = `
+            <p><strong> ${hike.Rdv || ""}</strong><br>
+            ${hike.Stops || ""}<br>
+            ${hike.Details || ""}</p>
+          `;
+
+          container.appendChild(card);
+        });
+
+      } catch (err) {
+        console.error(err);
+        container.innerHTML = "<p>Oops.</p>";
+      }
+    }
+
+    loadHikes();
+
 </script>

index.html

@@ -45,6 +45,15 @@ <h2 id="nextMeeting"></h2>
 <br><strong>Emportez également suffisament d'eau</strong> car il n'y a pas de sources le long des sentiers du Salève.</p>
 </div>
 
+
+<h2>Randos alternatives</h2>
+<p>Parfois nous organisons un rendez-vous supplémentaire pour explorer le sud du Salève, loin du téléphérique. 
+  Les détails sont confirmés ici 1-2 jours avant, selon la météo. Ces sorties sont 
+  <strong>réservées aux randonneurs initiés qui sont déjà montés au Salève avec nous</strong>.
+</p>
+
+<div id="cards"></div>
+
 <script>
 var d = new Date();
 var today = new Date();
@@ -55,4 +64,38 @@ <h2 id="nextMeeting"></h2>
 var options = {'weekday': 'long', 'month': 'long', 'day': '2-digit', 'year': 'numeric'};
 var date = d.toLocaleString('fr-CH', options);
 document.getElementById('nextMeeting').innerHTML = "Prochaine rando: "+date.toString()+" à 10h00";
+
+    const scriptUrl = "https://script.google.com/macros/s/AKfycbxrDnesoYawPLQHClhvAdgQ99RgiN-gSm2uwStbYuDarsovduTptgTzfamoxxQPuR5X/exec"; 
+
+    async function loadHikes() {
+      const container = document.getElementById("cards");
+      container.innerHTML = "<p>Un instant...</p>";
+
+      try {
+        const response = await fetch(scriptUrl);
+        const hikes = await response.json();
+
+        container.innerHTML = "";
+
+        hikes.forEach(hike => {
+          const card = document.createElement("div");
+          card.className = "card";
+
+          card.innerHTML = `
+            <p><strong> ${hike.Rdv || ""}</strong><br>
+            ${hike.Stops || ""}<br>
+            ${hike.Details || ""}</p>
+          `;
+
+          container.appendChild(card);
+        });
+
+      } catch (err) {
+        console.error(err);
+        container.innerHTML = "<p>Oups.</p>";
+      }
+    }
+
+    loadHikes();
+
 </script>