Add destination time difference and live local times on trip pages

Closes #208

templates/trip_page.html

@@ -99,6 +99,31 @@
     <div class="mb-3">
     {# <div>Countries: {{ trip.countries_str }}</div> #}
     <div>Locations: {{ trip.locations_str }}</div>
+    {% if destination_times %}
+      <div class="mt-2">
+        <strong>Destination time zones</strong>
+        <table class="table table-sm table-hover w-auto mb-0">
+          <thead>
+            <tr>
+              <th>Destination</th>
+              <th>Timezone</th>
+              <th>Difference from UK</th>
+              <th>Current local time</th>
+            </tr>
+          </thead>
+          <tbody>
+          {% for item in destination_times %}
+            <tr>
+              <td>{{ item.location }} ({{ item.country_name }}) {{ item.country_flag if trip.show_flags }}</td>
+              <td>{{ item.timezone or "Unknown" }}</td>
+              <td class="destination-offset" {% if item.timezone %}data-timezone="{{ item.timezone }}"{% endif %}>{{ item.offset_display }}</td>
+              <td class="destination-time" {% if item.timezone %}data-timezone="{{ item.timezone }}"{% endif %}>{{ item.current_time or "Unknown" }}</td>
+            </tr>
+          {% endfor %}
+          </tbody>
+        </table>
+      </div>
+    {% endif %}
 
     {% if total_distance %}
       <div>Total distance:
@@ -465,5 +490,46 @@ var routes = {{ routes | tojson }};
 
 build_map("map", coordinates, routes);
 
+function timezoneOffsetLabel(offsetMinutes) {
+  if (offsetMinutes === 0) {
+    return "Same time as Bristol";
+  }
+  const sign = offsetMinutes > 0 ? "+" : "-";
+  const abs = Math.abs(offsetMinutes);
+  const hours = String(Math.floor(abs / 60)).padStart(2, "0");
+  const minutes = String(abs % 60).padStart(2, "0");
+  return `${sign}${hours}:${minutes} vs Bristol`;
+}
+
+function getOffsetMinutes(timeZone) {
+  const now = new Date();
+  const localInZone = new Date(now.toLocaleString("en-US", { timeZone }));
+  const localInBristol = new Date(now.toLocaleString("en-US", { timeZone: "Europe/London" }));
+  return Math.round((localInZone - localInBristol) / 60000);
+}
+
+function updateDestinationTimes() {
+  for (const el of document.querySelectorAll(".destination-time[data-timezone]")) {
+    const tz = el.dataset.timezone;
+    el.textContent = new Intl.DateTimeFormat("en-GB", {
+      timeZone: tz,
+      weekday: "short",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+      hour12: false
+    }).format(new Date());
+  }
+
+  for (const el of document.querySelectorAll(".destination-offset[data-timezone]")) {
+    const tz = el.dataset.timezone;
+    const offset = getOffsetMinutes(tz);
+    el.textContent = timezoneOffsetLabel(offset);
+  }
+}
+
+updateDestinationTimes();
+setInterval(updateDestinationTimes, 1000);
+
 </script>
 {% endblock %}