feat: new hotel and genuss

backend/templates/info.html

@@ -45,7 +45,12 @@
     </div>
   {% elif page == 'hotels' %}
     <p>{{ t('hotels_intro') }}</p>
-    <div class="hotel-list">
+    <div
+      class="hotel-list"
+      data-hotel-routes
+      data-route-denied="{{ t('route_location_denied') }}"
+      data-route-unavailable="{{ t('route_location_unavailable') }}"
+    >
       {% for hotel in hotels %}
         <article class="hotel-card">
           <h2>{{ hotel.name }}</h2>
@@ -57,6 +62,14 @@
           </div>
           <div class="hotel-actions">
             <a class="btn" href="{{ hotel.website_url }}" target="_blank" rel="noopener">{{ t('hotel_visit_website') }}</a>
+            <a
+              class="btn btn-ghost"
+              href="{{ hotel.current_route_url }}"
+              target="_blank"
+              rel="noopener"
+              data-hotel-route-live
+              data-hotel-destination="{{ hotel.address }}"
+            >{{ t('hotel_route_from_current') }}</a>
             <a
               class="btn btn-ghost"
               href="{{ hotel.drive_route_url }}"
@@ -77,6 +90,46 @@
         </article>
       {% endfor %}
     </div>
+    <script>
+      (() => {
+        const wrapper = document.querySelector("[data-hotel-routes]");
+        if (!wrapper) return;
+        const routeLinks = wrapper.querySelectorAll("[data-hotel-route-live][data-hotel-destination]");
+        const deniedMsg = wrapper.dataset.routeDenied || "";
+        const unavailableMsg = wrapper.dataset.routeUnavailable || "";
+
+        routeLinks.forEach((link) => {
+          link.addEventListener("click", (event) => {
+            event.preventDefault();
+            if (!navigator.geolocation) {
+              if (unavailableMsg) window.alert(unavailableMsg);
+              return;
+            }
+
+            const destination = link.dataset.hotelDestination;
+            navigator.geolocation.getCurrentPosition(
+              ({ coords }) => {
+                const query = new URLSearchParams({
+                  api: "1",
+                  origin: `${coords.latitude},${coords.longitude}`,
+                  destination,
+                  travelmode: "driving",
+                });
+                window.open(`https://www.google.com/maps/dir/?${query.toString()}`, "_blank", "noopener");
+              },
+              (geoError) => {
+                if (geoError && geoError.code === 1 && deniedMsg) {
+                  window.alert(deniedMsg);
+                  return;
+                }
+                if (unavailableMsg) window.alert(unavailableMsg);
+              },
+              { enableHighAccuracy: false, timeout: 10000, maximumAge: 300000 }
+            );
+          });
+        });
+      })();
+    </script>
     <div class="route-modal" data-route-modal hidden>
       <div class="route-modal-backdrop" data-route-close></div>
       <section class="route-modal-panel" role="dialog" aria-modal="true" aria-label="{{ t('hotel_route_modal_title') }}">
@@ -133,15 +186,6 @@
       })();
     </script>
   {% elif page == 'taxi' %}
-    <div class="taxi-coming-soon{% if lang == 'en' %} taxi-coming-soon--en{% else %} taxi-coming-soon--de{% endif %}">
-      <img
-        src="{{ url_for('static', filename='assets/bauerbeiter-eng-sticker.png' if lang == 'en' else 'assets/bauarbeiter-sticker.png') }}"
-        class="{% if lang == 'en' %}taxi-sticker--en{% endif %}"
-        alt="{{ t('taxi_sticker_alt') }}"
-        loading="lazy"
-        decoding="async"
-      >
-    </div>
     <p>{{ t('taxi_text') }}</p>
   {% elif page == 'gifts' %}
     <section class="gift-fun" data-gift-fun>