Zeitzonen: Korrekturn der Berechnung mit Auswahl der Zeitzonen

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;
+            }
         }
     </style>
 </head>
@@ -345,13 +378,22 @@
                     <input type="hidden" id="custom-time">
                 </div>
                 <div class="input-group">
-                    <label for="custom-timezone">Zeitzone</label>
+                    <label for="source-timezone">Quell-Zeitzone</label>
-                    <select id="custom-timezone"></select>
+                    <select id="source-timezone"></select>
+                </div>
+                <div class="input-group">
+                    <label for="target-timezone">Ziel-Zeitzone</label>
+                    <select id="target-timezone"></select>
                 </div>
             </div>
             <button id="calculate-btn">Berechnen</button>
         </div>
 
+        <h2>Ergebnis der Umrechnung</h2>
+        <div class="timezone-list" id="timezone-result">
+            <!-- Result cards will be generated here -->
+        </div>
+
         <h2>Weltzeiten</h2>
         <div class="timezone-list" id="timezone-list">
             <!-- Timezone cards will be generated here -->
@@ -406,13 +448,22 @@
             { label: "Neuseeland (Auckland)", id: "Pacific/Auckland", offset: 12 }
         ];
 
-        // Populate timezone dropdown
+        // Populate timezone dropdowns
-        const timezoneSelect = document.getElementById('custom-timezone');
+        const sourceTimezoneSelect = document.getElementById('source-timezone');
+        const targetTimezoneSelect = document.getElementById('target-timezone');
+        
         majorTimezones.forEach(tz => {
-            const option = document.createElement('option');
+            // Für Quell-Zeitzone
-            option.value = tz.id;
+            const sourceOption = document.createElement('option');
-            option.textContent = tz.label;
+            sourceOption.value = tz.id;
-            timezoneSelect.appendChild(option);
+            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++) {
+        for (let i = 0; i < sourceTimezoneSelect.options.length; i++) {
-            if (timezoneSelect.options[i].value === localTimezone) {
+            if (sourceTimezoneSelect.options[i].value === localTimezone) {
-                timezoneSelect.selectedIndex = i;
+                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 @@
                     <h3>${tz.label}</h3>
                     <div class="time">${dateInTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
                     <div class="date">${dateInTimezone.toLocaleDateString()}</div>
-                    <div class="timezone-offset">${getTimezoneOffsetString(dateInTimezone)}</div>
+                    <div class="timezone-offset">${getTimezoneOffsetString(dateInTimezone, tz.id)}</div>
                 `;
                 
                 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
+            // Erstelle ein Datum im lokalen Format
-            const dateInSelectedTimezone = new Date(Date.UTC(
+            const inputDate = new Date(year, month - 1, day, hours, minutes);
-                year, 
-                month - 1, // JavaScript months are 0-indexed
-                day,
-                hours - getTimezoneOffsetHours(selectedTimezone),
-                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 = `
+                <h3>${sourceTz.label}</h3>
+                <div class="time">${dateInSourceTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
+                <div class="date">${dateInSourceTimezone.toLocaleDateString()}</div>
+                <div class="timezone-offset">${getTimezoneOffsetString(dateInSourceTimezone, sourceTimezone)}</div>
+            `;
+            
+            // Ziel-Zeitzone Karte
+            const targetCard = document.createElement('div');
+            targetCard.className = 'timezone-card';
+            const dateInTargetTimezone = getDateInTimezone(referenceDate, targetTimezone);
+            
+            targetCard.innerHTML = `
+                <h3>${targetTz.label}</h3>
+                <div class="time">${dateInTargetTimezone.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</div>
+                <div class="date">${dateInTargetTimezone.toLocaleDateString()}</div>
+                <div class="timezone-offset">${getTimezoneOffsetString(dateInTargetTimezone, targetTimezone)}</div>
+            `;
+            
+            container.appendChild(sourceCard);
+            
+            // Pfeil zwischen den Karten
+            const arrowContainer = document.createElement('div');
+            arrowContainer.className = 'timezone-card arrow-container';
+            arrowContainer.innerHTML = `<div class="conversion-arrow">→</div>`;
+            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) {
+        function getTimezoneOffsetString(date, timezone) {
-            const offset = date.getTimezoneOffset() * -1;
+            if (timezone) {
-            const hours = Math.floor(Math.abs(offset) / 60);
+                // 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