Main

🏠 Home

⚡ Magic Meeting Finder

Tools

⏱️ Countdown Timer

📅 Date Calculator

💻 Unix Timestamp

🌞 DST Checker

Settings

Dark Mode

Advanced Mode

Global TimeSync

Your intuitive dashboard for global collaboration and time planning.

Your Local Time Zone

Add a Time Zone:

Tracked Time Zones

Select a time zone above to start tracking.

Quick Time Converter

From Zone

To Zone

Date

Time

Meeting Planner & Invites

// ======================================== // BUG FIX #1: DATE CALCULATION (CRITICAL) // ======================================== // Override the existing date calculation functions (function fixDateCalculations() { const calculateDateBtn = document.getElementById('calculateDate'); const calculateDiffBtn = document.getElementById('calculateDiff'); if (calculateDateBtn) { // Remove old listener by cloning const newCalcBtn = calculateDateBtn.cloneNode(true); calculateDateBtn.parentNode.replaceChild(newCalcBtn, calculateDateBtn); newCalcBtn.addEventListener('click', () => { const dateStr = document.getElementById('dateCalcStart').value; const days = parseInt(document.getElementById('dateCalcDays').value); if (!dateStr || isNaN(days)) return; // FIX: Parse date correctly to avoid timezone issues const [year, month, day] = dateStr.split('-').map(Number); const start = new Date(year, month - 1, day); const result = new Date(start); result.setDate(result.getDate() + days); document.getElementById('dateCalcResult').style.display = 'block'; document.getElementById('dateCalcResult').innerHTML = ` Result: ${result.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })} `; gtag('event', 'date_calculated_fixed'); }); } if (calculateDiffBtn) { const newDiffBtn = calculateDiffBtn.cloneNode(true); calculateDiffBtn.parentNode.replaceChild(newDiffBtn, calculateDiffBtn); newDiffBtn.addEventListener('click', () => { const fromStr = document.getElementById('dateDiffFrom').value; const toStr = document.getElementById('dateDiffTo').value; if (!fromStr || !toStr) return; // FIX: Parse dates correctly const [y1, m1, d1] = fromStr.split('-').map(Number); const [y2, m2, d2] = toStr.split('-').map(Number); const from = new Date(y1, m1 - 1, d1); const to = new Date(y2, m2 - 1, d2); const diff = Math.abs(to - from); const days = Math.floor(diff / (1000 * 60 * 60 * 24)); const weeks = Math.floor(days / 7); const months = Math.floor(days / 30); document.getElementById('dateDiffResult').style.display = 'block'; document.getElementById('dateDiffResult').innerHTML = ` Difference:
${days} days
${weeks} weeks
${months} months (approx) `; gtag('event', 'date_difference_calculated_fixed'); }); } })(); // ======================================== // FEATURE #1: .ICS FILE GENERATION // ======================================== function generateICS(title, startDate, duration, timezones) { // Format date to ICS format (YYYYMMDDTHHMMSSZ) function formatICSDate(date) { const pad = (n) => n.toString().padStart(2, '0'); return date.getUTCFullYear() + pad(date.getUTCMonth() + 1) + pad(date.getUTCDate()) + 'T' + pad(date.getUTCHours()) + pad(date.getUTCMinutes()) + pad(date.getUTCSeconds()) + 'Z'; } const start = new Date(startDate); const end = new Date(start.getTime() + duration * 60000); let description = `Meeting across ${timezones.length} timezones:\\n`; timezones.forEach(tz => { const localTime = start.toLocaleString('en-US', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: true }); description += `${tz}: ${localTime}\\n`; }); const ics = `BEGIN:VCALENDAR VERSION:2.0 PRODID:-//WhatsTheTime//EN CALSCALE:GREGORIAN METHOD:PUBLISH BEGIN:VEVENT UID:${Date.now()}@whatsthetime.io DTSTAMP:${formatICSDate(new Date())} DTSTART:${formatICSDate(start)} DTEND:${formatICSDate(end)} SUMMARY:${title} DESCRIPTION:${description} STATUS:CONFIRMED SEQUENCE:0 END:VEVENT END:VCALENDAR`; // Create download const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.href = url; link.download = `${title.replace(/[^a-z0-9]/gi, '_')}.ics`; document.body.appendChild(link); link.click(); document.body.removeChild(link); URL.revokeObjectURL(url); gtag('event', 'ics_generated', { title, duration, timezone_count: timezones.length }); } // Update generate invite button const generateBtn = document.getElementById('generateInviteBtn'); if (generateBtn) { const newGenBtn = generateBtn.cloneNode(true); generateBtn.parentNode.replaceChild(newGenBtn, generateBtn); newGenBtn.addEventListener('click', () => { const title = document.getElementById('meetingTitle') ? document.getElementById('meetingTitle').value : 'Meeting'; const date = document.getElementById('plannerDate').value; const time = document.getElementById('plannerTime').value; const duration = document.getElementById('meetingDuration') ? parseInt(document.getElementById('meetingDuration').value) : 60; if (!date || !time) { alert('Please select date and time'); return; } const datetime = new Date(date + 'T' + time); // Use tracked timezones if available const timezones = window.userTimezones || ['America/New_York', 'Europe/London']; generateICS(title || 'Meeting', datetime, duration, timezones); alert('Calendar invite (.ics) downloaded! Open it to add to your calendar.'); }); } // ======================================== // FEATURE #2: AUTOCOMPLETE SEARCH // ======================================== function setupAutocomplete(inputId, onSelect) { const input = document.getElementById(inputId); if (!input) return; // Change placeholder input.placeholder = "Select a timezone or type to search..."; const container = document.createElement('div'); container.className = 'autocomplete-suggestions'; container.style.cssText = ` position: absolute; top: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background: var(--bg-secondary, #161b22); border: 1px solid var(--border-color, #30363d); border-top: none; border-radius: 0 0 0.5rem 0.5rem; z-index: 10; display: none; `; input.parentElement.style.position = 'relative'; input.parentElement.appendChild(container); const timezones = Intl.supportedValuesOf('timeZone'); let selectedTimezone = ''; input.addEventListener('input', (e) => { const query = e.target.value.toLowerCase().trim(); if (query.length === 0) { container.style.display = 'none'; return; } const matches = timezones.filter(tz => tz.toLowerCase().includes(query) || tz.replace(/_/g, ' ').toLowerCase().includes(query) ).slice(0, 10); if (matches.length === 0) { container.style.display = 'none'; return; } container.innerHTML = matches.map(tz => `

${tz.replace(/_/g, ' ')}

🔔 Enable hourly time notifications

`; const localTimeCard = document.querySelector('#local-time').closest('.card'); if (localTimeCard) { localTimeCard.appendChild(toggle.firstElementChild); } const notifToggle = document.getElementById('notificationToggle'); if (notifToggle) { notifToggle.addEventListener('click', async () => { if (!notificationsEnabled) { if ('Notification' in window) { const permission = await Notification.requestPermission(); if (permission === 'granted') { notificationsEnabled = true; notifToggle.classList.add('active'); startHourlyNotifications(); gtag('event', 'notifications_enabled'); } } } else { notificationsEnabled = false; notifToggle.classList.remove('active'); gtag('event', 'notifications_disabled'); } }); } } function startHourlyNotifications() { if (!notificationsEnabled) return; setInterval(() => { if (!notificationsEnabled || !window.userTimezones || window.userTimezones.length === 0) return; window.userTimezones.forEach(tz => { const now = new Date(); const localTime = now.toLocaleTimeString('en-US', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: true }); const hour = now.toLocaleTimeString('en-US', { timeZone: tz, hour: 'numeric', hour12: false }); if (hour === '9') { new Notification('Time Update', { body: `It's ${localTime} in ${tz.replace(/_/g, ' ')} - Good morning!`, icon: '/favicon.png' }); } }); }, 3600000); // Every hour } setTimeout(setupNotifications, 1000); // ======================================== // FEATURE #4: ANALYTICS TRACKING // ======================================== const analytics = { totalMeetings: 0, savedMeetings: [], timezoneUsage: {}, trackMeeting() { this.totalMeetings++; this.save(); gtag('event', 'meeting_tracked'); }, trackTimezone(tz) { this.timezoneUsage[tz] = (this.timezoneUsage[tz] || 0) + 1; this.save(); }, save() { localStorage.setItem('wtt_analytics', JSON.stringify({ totalMeetings: this.totalMeetings, savedMeetings: this.savedMeetings, timezoneUsage: this.timezoneUsage })); }, load() { const data = localStorage.getItem('wtt_analytics'); if (data) { const parsed = JSON.parse(data); this.totalMeetings = parsed.totalMeetings || 0; this.savedMeetings = parsed.savedMeetings || []; this.timezoneUsage = parsed.timezoneUsage || {}; } } }; analytics.load(); // Track when meetings are generated if (generateBtn) { generateBtn.addEventListener('click', () => { analytics.trackMeeting(); }); } // ======================================== // FEATURE #5: RECURRING MEETINGS // ======================================== function saveMeetingTemplate() { const title = document.getElementById('meetingTitle')?.value; const duration = document.getElementById('meetingDuration')?.value; if (!title) { alert('Please enter a meeting title'); return; } const template = { id: Date.now(), title, duration: parseInt(duration) || 60, timezones: window.userTimezones || [], created: new Date().toISOString() }; analytics.savedMeetings.push(template); analytics.save(); alert(`Meeting template "${title}" saved!`); updateRecurringMeetingsList(); gtag('event', 'meeting_template_saved', { title }); } function updateRecurringMeetingsList() { const select = document.getElementById('recurringMeetingSelect'); if (!select) { // Create the select if it doesn't exist const meetingCard = document.querySelector('#meetingTitle')?.closest('.card'); if (meetingCard) { const container = document.createElement('div'); container.style.marginBottom = '1rem'; container.innerHTML = ` Load Saved Meeting `; meetingCard.insertBefore(container, meetingCard.firstChild); } } const selectEl = document.getElementById('recurringMeetingSelect'); if (selectEl) { selectEl.innerHTML = '' + analytics.savedMeetings.map(t => ``).join(''); selectEl.addEventListener('change', (e) => { const template = analytics.savedMeetings.find(t => t.id == e.target.value); if (template) { if (document.getElementById('meetingTitle')) { document.getElementById('meetingTitle').value = template.title; } if (document.getElementById('meetingDuration')) { document.getElementById('meetingDuration').value = template.duration; } gtag('event', 'recurring_meeting_loaded', { title: template.title }); } }); } } // Add save button if meeting planner exists const meetingTitleInput = document.getElementById('meetingTitle'); if (meetingTitleInput) { const saveBtn = document.createElement('button'); saveBtn.className = 'btn btn-secondary'; saveBtn.textContent = '💾 Save as Template'; saveBtn.style.flex = '1'; saveBtn.onclick = saveMeetingTemplate; const generateBtnParent = document.getElementById('generateInviteBtn')?.parentElement; if (generateBtnParent) { generateBtnParent.appendChild(saveBtn); generateBtnParent.style.display = 'flex'; generateBtnParent.style.gap = '0.5rem'; } updateRecurringMeetingsList(); } console.log('✅ All features loaded successfully!'); console.log('📊 Analytics:', analytics); console.log('🔔 Notifications:', notificationsEnabled ? 'Enabled' : 'Disabled'); // ======================================== // FEATURE: INTERACTIVE WORLD MAP // ======================================== // // INSTRUCTIONS: // 1. Make sure Leaflet CSS/JS is in (already done if you followed previous steps) // 2. Add the HTML structure (see below) // 3. Add this JavaScript before // // ======================================== // Major cities with their coordinates and timezones const majorCities = [ // North America { name: 'New York', lat: 40.7128, lng: -74.0060, timezone: 'America/New_York', country: 'USA' }, { name: 'Los Angeles', lat: 34.0522, lng: -118.2437, timezone: 'America/Los_Angeles', country: 'USA' }, { name: 'Chicago', lat: 41.8781, lng: -87.6298, timezone: 'America/Chicago', country: 'USA' }, { name: 'Toronto', lat: 43.6532, lng: -79.3832, timezone: 'America/Toronto', country: 'Canada' }, { name: 'Mexico City', lat: 19.4326, lng: -99.1332, timezone: 'America/Mexico_City', country: 'Mexico' }, { name: 'Vancouver', lat: 49.2827, lng: -123.1207, timezone: 'America/Vancouver', country: 'Canada' }, // South America { name: 'São Paulo', lat: -23.5505, lng: -46.6333, timezone: 'America/Sao_Paulo', country: 'Brazil' }, { name: 'Buenos Aires', lat: -34.6037, lng: -58.3816, timezone: 'America/Argentina/Buenos_Aires', country: 'Argentina' }, { name: 'Lima', lat: -12.0464, lng: -77.0428, timezone: 'America/Lima', country: 'Peru' }, // Europe { name: 'London', lat: 51.5074, lng: -0.1278, timezone: 'Europe/London', country: 'UK' }, { name: 'Paris', lat: 48.8566, lng: 2.3522, timezone: 'Europe/Paris', country: 'France' }, { name: 'Berlin', lat: 52.5200, lng: 13.4050, timezone: 'Europe/Berlin', country: 'Germany' }, { name: 'Madrid', lat: 40.4168, lng: -3.7038, timezone: 'Europe/Madrid', country: 'Spain' }, { name: 'Rome', lat: 41.9028, lng: 12.4964, timezone: 'Europe/Rome', country: 'Italy' }, { name: 'Amsterdam', lat: 52.3676, lng: 4.9041, timezone: 'Europe/Amsterdam', country: 'Netherlands' }, { name: 'Stockholm', lat: 59.3293, lng: 18.0686, timezone: 'Europe/Stockholm', country: 'Sweden' }, { name: 'Moscow', lat: 55.7558, lng: 37.6173, timezone: 'Europe/Moscow', country: 'Russia' }, // Asia { name: 'Tokyo', lat: 35.6762, lng: 139.6503, timezone: 'Asia/Tokyo', country: 'Japan' }, { name: 'Singapore', lat: 1.3521, lng: 103.8198, timezone: 'Asia/Singapore', country: 'Singapore' }, { name: 'Hong Kong', lat: 22.3193, lng: 114.1694, timezone: 'Asia/Hong_Kong', country: 'Hong Kong' }, { name: 'Shanghai', lat: 31.2304, lng: 121.4737, timezone: 'Asia/Shanghai', country: 'China' }, { name: 'Beijing', lat: 39.9042, lng: 116.4074, timezone: 'Asia/Shanghai', country: 'China' }, { name: 'Seoul', lat: 37.5665, lng: 126.9780, timezone: 'Asia/Seoul', country: 'South Korea' }, { name: 'Mumbai', lat: 19.0760, lng: 72.8777, timezone: 'Asia/Kolkata', country: 'India' }, { name: 'Delhi', lat: 28.6139, lng: 77.2090, timezone: 'Asia/Kolkata', country: 'India' }, { name: 'Bangalore', lat: 12.9716, lng: 77.5946, timezone: 'Asia/Kolkata', country: 'India' }, { name: 'Dubai', lat: 25.2048, lng: 55.2708, timezone: 'Asia/Dubai', country: 'UAE' }, { name: 'Bangkok', lat: 13.7563, lng: 100.5018, timezone: 'Asia/Bangkok', country: 'Thailand' }, { name: 'Jakarta', lat: -6.2088, lng: 106.8456, timezone: 'Asia/Jakarta', country: 'Indonesia' }, // Oceania { name: 'Sydney', lat: -33.8688, lng: 151.2093, timezone: 'Australia/Sydney', country: 'Australia' }, { name: 'Melbourne', lat: -37.8136, lng: 144.9631, timezone: 'Australia/Melbourne', country: 'Australia' }, { name: 'Auckland', lat: -36.8485, lng: 174.7633, timezone: 'Pacific/Auckland', country: 'New Zealand' }, // Africa { name: 'Cairo', lat: 30.0444, lng: 31.2357, timezone: 'Africa/Cairo', country: 'Egypt' }, { name: 'Lagos', lat: 6.5244, lng: 3.3792, timezone: 'Africa/Lagos', country: 'Nigeria' }, { name: 'Johannesburg', lat: -26.2041, lng: 28.0473, timezone: 'Africa/Johannesburg', country: 'South Africa' }, { name: 'Nairobi', lat: -1.2921, lng: 36.8219, timezone: 'Africa/Nairobi', country: 'Kenya' }, ]; let timezoneMap = null; let mapVisible = false; function initializeMap() { if (timezoneMap) return; // Already initialized // Create map centered on the world timezoneMap = L.map('timezoneMap', { center: [20, 0], zoom: 2, minZoom: 2, maxZoom: 8, worldCopyJump: true }); // Add tile layer (OpenStreetMap) L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap contributors', maxZoom: 19 }).addTo(timezoneMap); // Custom icon for markers const customIcon = L.divIcon({ className: 'custom-marker', html: '

', iconSize: [12, 12], iconAnchor: [6, 6] }); // Add markers for each city majorCities.forEach(city => { const marker = L.marker([city.lat, city.lng], { icon: customIcon }) .addTo(timezoneMap); // Create popup content with current time const updatePopup = () => { const now = new Date(); const localTime = now.toLocaleTimeString('en-US', { timeZone: city.timezone, hour: '2-digit', minute: '2-digit', hour12: true }); return `

${city.name}
${city.country}
${localTime}

`; }; marker.bindPopup(updatePopup()); // Update time in popup every second when open marker.on('popupopen', () => { const interval = setInterval(() => { if (marker.isPopupOpen()) { marker.setPopupContent(updatePopup()); } else { clearInterval(interval); } }, 1000); }); }); console.log('✓ Map initialized with', majorCities.length, 'cities'); } function toggleMap() { const mapContainer = document.getElementById('mapContainer'); const dropdownContainer = document.getElementById('dropdownContainer'); const mapBtn = document.getElementById('toggleMapBtn'); const mapBtnText = document.getElementById('mapBtnText'); if (!mapContainer || !dropdownContainer) { console.error('Map containers not found. Add HTML first!'); return; } mapVisible = !mapVisible; if (mapVisible) { mapContainer.style.display = 'block'; dropdownContainer.style.display = 'none'; if (mapBtnText) mapBtnText.textContent = '📝 Show Dropdown'; // Initialize map if first time if (!timezoneMap) { setTimeout(() => { initializeMap(); timezoneMap.invalidateSize(); // Fix sizing issues }, 100); } else { timezoneMap.invalidateSize(); // Refresh map } gtag('event', 'map_view_opened'); } else { mapContainer.style.display = 'none'; dropdownContainer.style.display = 'block'; if (mapBtnText) mapBtnText.textContent = '🗺️ Show Map'; gtag('event', 'dropdown_view_opened'); } } function addTimezoneFromMap(timezone, cityName) { // Check if timezone already added if (window.userTimezones && window.userTimezones.includes(timezone)) { alert(`${cityName} (${timezone}) is already in your tracked timezones!`); return; } // Add to user timezones if (!window.userTimezones) window.userTimezones = []; window.userTimezones.push(timezone); // Re-render timezone list (calls your existing function) if (typeof renderTimezones === 'function') { renderTimezones(); } // Save to Firebase (calls your existing function) if (typeof saveTimezones === 'function') { saveTimezones(); } // Track analytics if (typeof analytics !== 'undefined') { analytics.trackTimezone(timezone); } gtag('event', 'timezone_added_from_map', { timezone, city: cityName }); // Close popup if (timezoneMap) { timezoneMap.closePopup(); } // Show success message const successMsg = document.createElement('div'); successMsg.style.cssText = ` position: fixed; top: 20px; right: 20px; background: var(--accent-green, #20c997); color: #0d1117; padding: 1rem 1.5rem; border-radius: 0.5rem; font-weight: 600; z-index: 10000; box-shadow: 0 4px 6px rgba(0,0,0,0.2); animation: slideIn 0.3s ease; `; successMsg.textContent = `✓ ${cityName} added!`; document.body.appendChild(successMsg); setTimeout(() => { successMsg.remove(); }, 3000); } // Setup toggle button document.addEventListener('DOMContentLoaded', () => { const toggleBtn = document.getElementById('toggleMapBtn'); if (toggleBtn) { toggleBtn.addEventListener('click', toggleMap); } }); // Make function globally available window.addTimezoneFromMap = addTimezoneFromMap; console.log('✓ Interactive Map feature loaded'); console.log('✓ Cities available:', majorCities.length); // ======================================== // FEATURE: MAGIC MEETING FINDER // ======================================== // // This finds the BEST meeting times across multiple timezones // Uses business hours (9 AM - 5 PM) optimization // // ======================================== const MagicMeetingFinder = { participants: [], // Find best meeting times across all participant timezones findBestTimes(timezones, dateRange) { if (!timezones || timezones.length === 0) { return []; } const results = []; const startDate = new Date(dateRange.start); const endDate = new Date(dateRange.end); // Check each day in range for (let d = new Date(startDate); d <= endDate; d.setDate(d.getDate() + 1)) { // Check each hour (0-23) for (let hour = 0; hour < 24; hour++) { const testDate = new Date(d); testDate.setHours(hour, 0, 0, 0); const score = this.scoreTimeSlot(testDate, timezones); results.push({ date: new Date(testDate), hour, score: score.total, inBusinessHours: score.inBusinessHours, acceptable: score.acceptable, poor: score.poor, details: score.details }); } } // Sort by score (highest first) and return top 5 return results .sort((a, b) => b.score - a.score) .slice(0, 5); }, // Score a specific time slot across all timezones scoreTimeSlot(date, timezones) { let totalScore = 0; let inBusinessHours = 0; let acceptable = 0; let poor = 0; const details = []; timezones.forEach(tz => { const localHour = parseInt(date.toLocaleString('en-US', { timeZone: tz, hour: 'numeric', hour12: false })); const localTime = date.toLocaleString('en-US', { timeZone: tz, hour: '2-digit', minute: '2-digit', hour12: true }); let score = 0; let category = ''; // Optimal: 9 AM - 5 PM (business hours) if (localHour >= 9 && localHour < 17) { score = 10; category = 'optimal'; inBusinessHours++; } // Acceptable: 8-9 AM or 5-6 PM else if (localHour === 8 || localHour === 17) { score = 5; category = 'acceptable'; acceptable++; } // Early/Late: 7 AM or 6-7 PM else if (localHour === 7 || localHour === 18) { score = 2; category = 'early-late'; poor++; } // Poor: Outside reasonable hours else { score = -5; category = 'poor'; poor++; } totalScore += score; details.push({ timezone: tz, localTime, localHour, score, category }); }); return { total: totalScore, inBusinessHours, acceptable, poor, details }; }, // Render results in the UI renderResults(results, container) { if (!results || results.length === 0) { container.innerHTML = `

No good meeting times found. Try expanding your date range or reducing the number of timezones.

`; return; } let html = '

'; html += '

🎯 Top Meeting Time Suggestions

'; results.forEach((result, index) => { const percentage = Math.round((result.inBusinessHours / result.details.length) * 100); const rank = index + 1; let badgeColor = ''; let badgeText = ''; if (percentage === 100) { badgeColor = 'var(--accent-green)'; badgeText = '🌟 Perfect Match'; } else if (percentage >= 75) { badgeColor = 'var(--accent-blue)'; badgeText = '👍 Great Option'; } else if (percentage >= 50) { badgeColor = 'var(--accent-yellow)'; badgeText = '⚠️ Compromise'; } else { badgeColor = '#f87171'; badgeText = '❌ Difficult'; } html += `

Option ${rank}

${result.date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}

${badgeText}

${result.inBusinessHours} of ${result.details.length} participants in business hours (${percentage}%)

${percentage}%

`; result.details.forEach(detail => { let bgColor = ''; let emoji = ''; if (detail.category === 'optimal') { bgColor = 'rgba(32, 201, 151, 0.15)'; emoji = '✅'; } else if (detail.category === 'acceptable') { bgColor = 'rgba(96, 165, 250, 0.15)'; emoji = '👍'; } else if (detail.category === 'early-late') { bgColor = 'rgba(251, 191, 36, 0.15)'; emoji = '⚠️'; } else { bgColor = 'rgba(248, 113, 113, 0.15)'; emoji = '❌'; } html += `

${detail.timezone.replace(/_/g, ' ')}

${emoji} ${detail.localTime}

`; }); html += `

`; }); html += '

'; container.innerHTML = html; } }; // Initialize Magic Finder if page exists function initMagicFinder() { const addParticipantBtn = document.getElementById('addParticipantBtn'); const findBestTimesBtn = document.getElementById('findBestTimesBtn'); if (addParticipantBtn) { addParticipantBtn.addEventListener('click', () => { const container = document.getElementById('participantZones'); const newInput = document.createElement('div'); newInput.className = 'autocomplete-container'; newInput.style.marginBottom = '0.5rem'; newInput.innerHTML = ` `; container.appendChild(newInput); // Setup autocomplete for new input setupAutocompleteForElement(newInput.querySelector('input')); }); } if (findBestTimesBtn) { findBestTimesBtn.addEventListener('click', () => { const participantInputs = document.querySelectorAll('.participant-tz-input'); const timezones = []; participantInputs.forEach(input => { const tz = input.getAttribute('data-selected-tz') || input.value; if (tz && tz.trim()) { // Try to match to valid timezone const allTimezones = Intl.supportedValuesOf('timeZone'); const match = allTimezones.find(t => t.toLowerCase() === tz.toLowerCase() || t.replace(/_/g, ' ').toLowerCase() === tz.toLowerCase() ); if (match) timezones.push(match); } }); if (timezones.length < 2) { alert('Please add at least 2 participant timezones'); return; } const startDate = document.getElementById('magicStartDate').value; const endDate = document.getElementById('magicEndDate').value; if (!startDate || !endDate) { alert('Please select a date range'); return; } const results = MagicMeetingFinder.findBestTimes(timezones, { start: startDate, end: endDate }); const resultsContainer = document.getElementById('magicResults'); MagicMeetingFinder.renderResults(results, resultsContainer); gtag('event', 'magic_finder_used', { participant_count: timezones.length, date_range_days: Math.ceil((new Date(endDate) - new Date(startDate)) / (1000 * 60 * 60 * 24)) }); }); } // Set default dates (today to 7 days from now) const today = new Date(); const weekFromNow = new Date(); weekFromNow.setDate(today.getDate() + 7); const startInput = document.getElementById('magicStartDate'); const endInput = document.getElementById('magicEndDate'); if (startInput) startInput.value = today.toISOString().split('T')[0]; if (endInput) endInput.value = weekFromNow.toISOString().split('T')[0]; } // Helper to setup autocomplete for dynamically added inputs function setupAutocompleteForElement(input) { const container = document.createElement('div'); container.className = 'autocomplete-suggestions'; container.style.cssText = ` position: absolute; top: 100%; left: 0; right: 0; max-height: 250px; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-color); border-top: none; border-radius: 0 0 0.5rem 0.5rem; z-index: 10; display: none; `; input.parentElement.style.position = 'relative'; input.parentElement.appendChild(container); const timezones = Intl.supportedValuesOf('timeZone'); input.addEventListener('input', (e) => { const query = e.target.value.toLowerCase().trim(); if (query.length === 0) { container.style.display = 'none'; return; } const matches = timezones.filter(tz => tz.toLowerCase().includes(query) || tz.replace(/_/g, ' ').toLowerCase().includes(query) ).slice(0, 10); if (matches.length === 0) { container.style.display = 'none'; return; } container.innerHTML = matches.map(tz => `

${tz.replace(/_/g, ' ')}

`).join(''); container.style.display = 'block'; container.querySelectorAll('.autocomplete-item').forEach(item => { item.addEventListener('click', () => { const tz = item.getAttribute('data-tz'); input.value = tz.replace(/_/g, ' '); input.setAttribute('data-selected-tz', tz); container.style.display = 'none'; }); }); }); input.addEventListener('blur', () => { setTimeout(() => container.style.display = 'none', 200); }); } // Function to use selected time window.selectMagicTime = function(dateISO, index) { const date = new Date(dateISO); // Fill in meeting planner if available const plannerDate = document.getElementById('plannerDate'); const plannerTime = document.getElementById('plannerTime'); if (plannerDate) { plannerDate.value = date.toISOString().split('T')[0]; } if (plannerTime) { const hours = date.getHours().toString().padStart(2, '0'); const minutes = date.getMinutes().toString().padStart(2, '0'); plannerTime.value = `${hours}:${minutes}`; } // Switch to home page document.querySelectorAll('.nav-item').forEach(item => { if (item.getAttribute('data-page') === 'home') { item.click(); } }); // Scroll to meeting planner setTimeout(() => { const meetingCard = document.getElementById('plannerDate')?.closest('.card'); if (meetingCard) { meetingCard.scrollIntoView({ behavior: 'smooth', block: 'center' }); meetingCard.style.border = '2px solid var(--accent-green)'; setTimeout(() => { meetingCard.style.border = ''; }, 2000); } }, 300); alert(`✓ Time selected! Check the Meeting Planner to generate your invite.`); gtag('event', 'magic_time_selected', { option: index + 1 }); }; // Initialize on page load document.addEventListener('DOMContentLoaded', () => { setTimeout(initMagicFinder, 500); }); console.log('✓ Magic Meeting Finder loaded'); console.log('✅ All features loaded successfully!');

Global TimeSync

Tracked Time Zones

Quick Time Converter

Meeting Planner & Invites

⏱️ Countdown Timer

📅 Date Calculator

Add/Subtract Days

Date Difference

💻 Unix Timestamp Converter

Unix → Date

Date → Unix

🌞 DST Checker

Daylight Saving Time Status

⚡ Magic Meeting Finder

🤖 How It Works

🎯 Top Meeting Time Suggestions

${result.date.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' })}