From 973af6138d91b33b852f644da5ea71254d39cf67 Mon Sep 17 00:00:00 2001 From: Akamaru Date: Sat, 29 Mar 2025 15:44:41 +0100 Subject: [PATCH] Zeitzonen: Korrekturn der Berechnung mit Auswahl der Zeitzonen --- zeitzonen/index.html | 186 ++++++++++++++++++++++++++++++++++++------- 1 file changed, 159 insertions(+), 27 deletions(-) diff --git a/zeitzonen/index.html b/zeitzonen/index.html index 6c0a616..9da9803 100644 --- a/zeitzonen/index.html +++ b/zeitzonen/index.html @@ -228,6 +228,30 @@ margin-top: 30px; } + #timezone-result { + display: flex; + justify-content: center; + align-items: center; + gap: 20px; + margin-top: 30px; + } + + .arrow-container { + display: flex; + justify-content: center; + align-items: center; + background: transparent; + box-shadow: none; + border: none; + min-width: 80px; + } + + .conversion-arrow { + font-size: 2.5rem; + color: var(--secondary-color); + animation: pulse 1.5s infinite; + } + .timezone-card { background-color: var(--card-bg); border-radius: 10px; @@ -296,6 +320,15 @@ .input-group { min-width: 100%; } + + #timezone-result { + flex-direction: column; + } + + .arrow-container { + transform: rotate(90deg); + margin: 10px 0; + } } @@ -345,13 +378,22 @@
- - + + +
+
+ +
+

Ergebnis der Umrechnung

+
+ +
+

Weltzeiten

@@ -406,13 +448,22 @@ { label: "Neuseeland (Auckland)", id: "Pacific/Auckland", offset: 12 } ]; - // Populate timezone dropdown - const timezoneSelect = document.getElementById('custom-timezone'); + // Populate timezone dropdowns + const sourceTimezoneSelect = document.getElementById('source-timezone'); + const targetTimezoneSelect = document.getElementById('target-timezone'); + majorTimezones.forEach(tz => { - const option = document.createElement('option'); - option.value = tz.id; - option.textContent = tz.label; - timezoneSelect.appendChild(option); + // Für Quell-Zeitzone + const sourceOption = document.createElement('option'); + sourceOption.value = tz.id; + sourceOption.textContent = tz.label; + sourceTimezoneSelect.appendChild(sourceOption); + + // Für Ziel-Zeitzone + const targetOption = document.createElement('option'); + targetOption.value = tz.id; + targetOption.textContent = tz.label; + targetTimezoneSelect.appendChild(targetOption); }); // Set default values for date and time inputs @@ -524,12 +575,20 @@ // Detect user's timezone const localTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone; document.getElementById('local-timezone').textContent = - `Deine Zeitzone: ${localTimezone} (${getTimezoneOffsetString(now)})`; + `Deine Zeitzone: ${localTimezone} (${getTimezoneOffsetString(now, localTimezone)})`; // Set initial timezone selection to match user's timezone, if possible - for (let i = 0; i < timezoneSelect.options.length; i++) { - if (timezoneSelect.options[i].value === localTimezone) { - timezoneSelect.selectedIndex = i; + for (let i = 0; i < sourceTimezoneSelect.options.length; i++) { + if (sourceTimezoneSelect.options[i].value === localTimezone) { + sourceTimezoneSelect.selectedIndex = i; + break; + } + } + + // Set target timezone initially to different timezone (e.g., New York) + for (let i = 0; i < targetTimezoneSelect.options.length; i++) { + if (targetTimezoneSelect.options[i].value === "America/New_York") { + targetTimezoneSelect.selectedIndex = i; break; } } @@ -569,7 +628,7 @@

${tz.label}

${dateInTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
${dateInTimezone.toLocaleDateString()}
-
${getTimezoneOffsetString(dateInTimezone)}
+
${getTimezoneOffsetString(dateInTimezone, tz.id)}
`; container.appendChild(card); @@ -580,7 +639,8 @@ document.getElementById('calculate-btn').addEventListener('click', () => { const dateStr = dateInput.value; const timeStr = timeInput.value; - const selectedTimezone = timezoneSelect.value; + const sourceTimezone = sourceTimezoneSelect.value; + const targetTimezone = targetTimezoneSelect.value; if (!dateStr || !timeStr) { alert('Bitte gib ein Datum und eine Zeit ein'); @@ -591,20 +651,66 @@ const [year, month, day] = dateStr.split('-').map(Number); const [hours, minutes] = timeStr.split(':').map(Number); - // Create date in the selected timezone - const dateInSelectedTimezone = new Date(Date.UTC( - year, - month - 1, // JavaScript months are 0-indexed - day, - hours - getTimezoneOffsetHours(selectedTimezone), - minutes - )); + // Erstelle ein Datum im lokalen Format + const inputDate = new Date(year, month - 1, day, hours, minutes); - generateTimezoneCards(dateInSelectedTimezone); + // Wir erstellen eine Referenzzeit, die der Eingabe in der Quell-Zeitzone entspricht + const utcMilliseconds = Date.UTC(year, month - 1, day, hours, minutes); + const sourceOffset = getTimezoneOffsetHours(sourceTimezone) * 60 * 60 * 1000; + const referenceDate = new Date(utcMilliseconds - sourceOffset); + + // Zeige nur die Quell- und Zielzeitzone an + displayConversionResult(referenceDate, sourceTimezone, targetTimezone); }); + // Display conversion result between source and target timezone + function displayConversionResult(referenceDate, sourceTimezone, targetTimezone) { + const container = document.getElementById('timezone-result'); + container.innerHTML = ''; + + const sourceTz = majorTimezones.find(tz => tz.id === sourceTimezone); + const targetTz = majorTimezones.find(tz => tz.id === targetTimezone); + + if (!sourceTz || !targetTz) return; + + // Quell-Zeitzone Karte + const sourceCard = document.createElement('div'); + sourceCard.className = 'timezone-card'; + const dateInSourceTimezone = getDateInTimezone(referenceDate, sourceTimezone); + + sourceCard.innerHTML = ` +

${sourceTz.label}

+
${dateInSourceTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
${dateInSourceTimezone.toLocaleDateString()}
+
${getTimezoneOffsetString(dateInSourceTimezone, sourceTimezone)}
+ `; + + // Ziel-Zeitzone Karte + const targetCard = document.createElement('div'); + targetCard.className = 'timezone-card'; + const dateInTargetTimezone = getDateInTimezone(referenceDate, targetTimezone); + + targetCard.innerHTML = ` +

${targetTz.label}

+
${dateInTargetTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+
${dateInTargetTimezone.toLocaleDateString()}
+
${getTimezoneOffsetString(dateInTargetTimezone, targetTimezone)}
+ `; + + container.appendChild(sourceCard); + + // Pfeil zwischen den Karten + const arrowContainer = document.createElement('div'); + arrowContainer.className = 'timezone-card arrow-container'; + arrowContainer.innerHTML = `
→
`; + container.appendChild(arrowContainer); + + container.appendChild(targetCard); + } + // Helper function to get a date object in a specific timezone function getDateInTimezone(date, timezone) { + // Nutze die eingebaute Zeitzonenunterstützung von JavaScript const options = { timeZone: timezone }; const formatter = new Intl.DateTimeFormat('en-US', { ...options, @@ -637,11 +743,37 @@ } // Helper function to get timezone offset string (e.g., GMT+1) - function getTimezoneOffsetString(date) { - const offset = date.getTimezoneOffset() * -1; - const hours = Math.floor(Math.abs(offset) / 60); + function getTimezoneOffsetString(date, timezone) { + if (timezone) { + // Ermittle den tatsächlichen Offset für das Datum in der Zeitzone + const testDate = new Date(date); // Wir erstellen eine Kopie + + // Formatiere das Datum in der angegebenen Zeitzone und hole den Offset + const formatter = new Intl.DateTimeFormat('en-US', { + timeZone: timezone, + timeZoneName: 'longOffset' + }); + + // Extrahiere den GMT-Offset-String aus der formatierten Ausgabe + const formattedDate = formatter.format(testDate); + const offsetMatch = formattedDate.match(/GMT([-+]\d+)/); + + if (offsetMatch) { + return `GMT${offsetMatch[1]}`; + } + + // Fallback: Verwende den statischen Offset aus majorTimezones + const tz = majorTimezones.find(t => t.id === timezone); + if (tz) { + const sign = tz.offset >= 0 ? '+' : '-'; + return `GMT${sign}${Math.abs(tz.offset)}`; + } + } + + // Wenn keine Zeitzone angegeben oder gefunden wurde, verwende den lokalen Offset + const offset = date.getTimezoneOffset() * -1 / 60; const sign = offset >= 0 ? '+' : '-'; - return `GMT${sign}${hours}`; + return `GMT${sign}${Math.abs(offset)}`; } // Helper function to get timezone offset in hours