If you find this simple tool helpful, feel free to support us on Patreon!
- - < - +If you find this simple tool helpful, feel free to support us on Patreon!
+ + + diff --git a/script.js b/script.js index 4e34178..1cd7305 100644 --- a/script.js +++ b/script.js @@ -5,19 +5,19 @@ const yourTimeInput = document.getElementById('yourTime'); const theirLocationInput = document.getElementById('theirLocation'); const directionSelect = document.getElementById('direction'); + const toggleButton = document.getElementById('toggleDirection'); const zonesList = document.getElementById('zones'); const yourTimeDisplay = document.getElementById('yourTimeDisplay'); const theirTimeDisplay = document.getElementById('theirTimeDisplay'); const clockEls = document.querySelectorAll('.clock'); + const clockZoneInputs = document.querySelectorAll('.clock-zone'); + const editButton = document.getElementById('editClocks'); - // Populate datalist with time zones - const timeInputLabel = document.getElementById('timeInputLabel'); const leftLabel = document.getElementById('leftLabel'); const rightLabel = document.getElementById('rightLabel'); -const timeLabelText = document.getElementById('timeLabelText'); - const timeZones = (Intl.supportedValuesOf && Intl.supportedValuesOf('timeZone')) || [ - + const timeLabelText = document.getElementById('timeLabelText'); + const timeZones = (Intl.supportedValuesOf && Intl.supportedValuesOf('timeZone')) || [ 'America/New_York', 'America/Chicago', 'America/Denver', @@ -38,9 +38,32 @@ const timeLabelText = document.getElementById('timeLabelText'); zonesList.appendChild(option); }); + // Load clock preferences from cookie + function loadClockPrefs() { + const match = document.cookie.match(/clockZones=([^;]+)/); + if (match) { + return decodeURIComponent(match[1]).split('|'); + } + return null; + } + + function saveClockPrefs(zones) { + document.cookie = `clockZones=${encodeURIComponent(zones.join('|'))}; path=/; max-age=${60 * 60 * 24 * 365}`; + } + // Default your time input to now (rounded to minute) const now = DateTime.local().startOf('minute'); yourTimeInput.value = now.toISO({ suppressSeconds: true, includeOffset: false }); + theirLocationInput.value = Intl.DateTimeFormat().resolvedOptions().timeZone; + + // Apply saved clock zones + const savedZones = loadClockPrefs(); + if (savedZones && savedZones.length === clockEls.length) { + clockEls.forEach((el, idx) => { + el.dataset.tz = savedZones[idx]; + el.querySelector('h3').textContent = savedZones[idx]; + }); + } function updateResult() { const yourZone = Intl.DateTimeFormat().resolvedOptions().timeZone; @@ -49,25 +72,26 @@ const timeLabelText = document.getElementById('timeLabelText'); let baseDT; - if (direction === 'yourToTheir'yourToTheir') { - // Update UI labels - timeLabelText.textContent = 'Your Time:'; - leftLabel.textContent = 'Your Time:'; - rightLabel.textContent = 'Their Time:'; - - baseDT = DateTime.fromISO(yourTimeInput.value, { zone: yourZone }); - yourTimeDisplay.textContent = baseDT.setZone(yourZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); - theirTimeDisplay.textContent = baseDT.setZone(theirZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); - } else { - // Update UI labels -timeLabelText.textContent = 'Their Time:'; - leftLabel.textContent = 'Their Time:'; - rightLabel.textContent = 'Your Time:'; - - baseDT = DateTime.fromISO(yourTimeInput.value, { zone: theirZone }); - theirTimeDisplay.textContent = baseDT.setZone(theirZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); - yourTimeDisplay.textContent = baseDT.setZone(yourZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); - }} + if (direction === 'yourToTheir') { + // Update UI labels + timeLabelText.textContent = 'Your Time:'; + leftLabel.textContent = 'Your Time:'; + rightLabel.textContent = 'Their Time:'; + + baseDT = DateTime.fromISO(yourTimeInput.value, { zone: yourZone }); + yourTimeDisplay.textContent = baseDT.setZone(yourZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); + theirTimeDisplay.textContent = baseDT.setZone(theirZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); + } else { + // Update UI labels + timeLabelText.textContent = 'Their Time:'; + leftLabel.textContent = 'Their Time:'; + rightLabel.textContent = 'Your Time:'; + + baseDT = DateTime.fromISO(yourTimeInput.value, { zone: theirZone }); + theirTimeDisplay.textContent = baseDT.setZone(theirZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); + yourTimeDisplay.textContent = baseDT.setZone(yourZone).toLocaleString(DateTime.DATETIME_MED_WITH_SECONDS); + } + } // Update clocks function updateClocks() { @@ -78,6 +102,47 @@ timeLabelText.textContent = 'Their Time:'; }); } + // Edit clock zones + let editing = false; + editButton.addEventListener('click', () => { + editing = !editing; + editButton.textContent = editing ? 'Save' : '⚙️'; + clockEls.forEach((el, idx) => { + const input = clockZoneInputs[idx]; + if (editing) { + input.style.display = 'block'; + input.value = el.dataset.tz; + } else { + input.style.display = 'none'; + const zone = input.value || el.dataset.tz; + el.dataset.tz = zone; + el.querySelector('h3').textContent = zone; + } + }); + if (!editing) { + const zones = Array.from(clockEls, el => el.dataset.tz); + saveClockPrefs(zones); + } + }); + + clockZoneInputs.forEach((input, idx) => { + input.addEventListener('change', () => { + const zone = input.value || 'UTC'; + clockEls[idx].dataset.tz = zone; + clockEls[idx].querySelector('h3').textContent = zone; + saveClockPrefs(Array.from(clockEls, el => el.dataset.tz)); + }); + }); + + // Toggle direction with button + toggleButton.addEventListener('click', () => { + directionSelect.value = directionSelect.value === 'yourToTheir' ? 'theirToYour' : 'yourToTheir'; + theirLocationInput.value = Intl.DateTimeFormat().resolvedOptions().timeZone; + const nowISO = DateTime.local().startOf('minute').toISO({ suppressSeconds: true, includeOffset: false }); + yourTimeInput.value = nowISO; + updateResult(); + }); + // Event listeners yourTimeInput.addEventListener('input', updateResult); theirLocationInput.addEventListener('input', updateResult); diff --git a/style.css b/style.css index 91fec36..39a90cb 100644 --- a/style.css +++ b/style.css @@ -19,6 +19,17 @@ h1 { flex-wrap: wrap; } +.edit-btn { + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; + cursor: pointer; + padding: 6px 10px; + margin-right: 10px; + height: fit-content; + align-self: center; +} + .clock { background: #fff; border-radius: 8px; @@ -30,9 +41,18 @@ h1 { .clock h3 { margin: 0 0 10px; - font-size: 1rem; - +} + +.clock-zone { + display: none; + margin-bottom: 8px; + padding: 4px 6px; + border: 1px solid #ccc; + border-radius: 4px; + font-size: 0.9rem; +} + /* --- 2025 visual enhancements --- */ /* Floating effect for clocks */ @@ -75,8 +95,6 @@ body { background: linear-gradient(135deg, #eef2f7 0%, #f9fbfc 100%); } -} - .clock .time { font-size: 1.2rem; font-weight: bold; @@ -97,6 +115,16 @@ form#converter label { font-weight: bold; } +.toggle-btn { + align-self: center; + padding: 8px 12px; + font-size: 1.5rem; + cursor: pointer; + background: #fff; + border: 1px solid #ccc; + border-radius: 4px; +} + form#converter input { margin-top: 5px; padding: 8px 10px; @@ -143,9 +171,14 @@ form#converter input { /* Patreon footer */ .patreon { text-align: center; - margin-top: 30px; + margin: 30px auto 0; font-size: 0.95rem; color: #555; + background: #fff; + padding: 12px 20px; + border-radius: 8px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + display: inline-block; } .patreon a {