diff --git a/index.html b/index.html index ac28613..0102405 100644 --- a/index.html +++ b/index.html @@ -4,6 +4,24 @@ International Fixed Calendar Converter + + + + + + + + + + + + + + + + + + @@ -440,6 +767,7 @@
+
@@ -519,6 +847,42 @@ + +
+
+
+ + + +
+ + - + + +
+
+ +
+ +
+ +
+
+
+ Gregorian Calendar +
+
+
+ International Fixed Calendar +
+
+
+ Today +
+
+
+
+
@@ -694,6 +1058,12 @@ event.target.classList.add('active'); if (tabId === 'calendar') renderCalendar(); + if (tabId === 'overlap') { + if (!overlapState.selectedDate) { + overlapState.selectedDate = new Date(); + } + renderOverlapView(); + } } // Single date converter @@ -868,6 +1238,376 @@ document.getElementById('ifc-day').addEventListener('input', updateGregorianResult); document.getElementById('calendar-year').addEventListener('change', renderCalendar); + // ==================== VISUAL OVERLAP FUNCTIONS ==================== + + let overlapState = { + zoom: 'month', // 'month', 'week', 'day' + centerDate: new Date(), // Current center date for navigation + selectedDate: null // Currently selected date for detail view + }; + + const GREG_MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', + 'July', 'August', 'September', 'October', 'November', 'December']; + const WEEKDAYS_SHORT = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; + + function setOverlapZoom(zoom) { + overlapState.zoom = zoom; + document.querySelectorAll('.zoom-btn').forEach(btn => btn.classList.remove('active')); + document.getElementById(`zoom-${zoom}`).classList.add('active'); + renderOverlapView(); + } + + function navigateOverlap(delta) { + const d = overlapState.centerDate; + switch (overlapState.zoom) { + case 'month': + d.setMonth(d.getMonth() + delta); + break; + case 'week': + d.setDate(d.getDate() + (delta * 7)); + break; + case 'day': + d.setDate(d.getDate() + delta); + break; + } + renderOverlapView(); + } + + function overlapToToday() { + overlapState.centerDate = new Date(); + overlapState.selectedDate = new Date(); + renderOverlapView(); + } + + function selectOverlapDate(dateStr) { + overlapState.selectedDate = new Date(dateStr + 'T12:00:00'); + renderOverlapView(); + } + + function formatGregorianShort(date) { + return `${GREG_MONTHS[date.getMonth()].substring(0, 3)} ${date.getDate()}`; + } + + function formatIFCShort(ifc) { + if (ifc.special) return ifc.special; + return `${ifc.monthName.substring(0, 3)} ${ifc.day}`; + } + + function renderOverlapView() { + const container = document.getElementById('overlap-view'); + const dateLabel = document.getElementById('overlap-current-date'); + + switch (overlapState.zoom) { + case 'month': + renderMonthOverlap(container, dateLabel); + break; + case 'week': + renderWeekOverlap(container, dateLabel); + break; + case 'day': + renderDayOverlap(container, dateLabel); + break; + } + } + + function renderMonthOverlap(container, dateLabel) { + const center = overlapState.centerDate; + const year = center.getFullYear(); + const month = center.getMonth(); + const today = new Date(); + + dateLabel.textContent = `${GREG_MONTHS[month]} ${year}`; + + // Get first and last day of the Gregorian month + const firstDay = new Date(year, month, 1); + const lastDay = new Date(year, month + 1, 0); + const startPadding = firstDay.getDay(); // Day of week (0-6) + + let html = ` +
+ ${WEEKDAYS_SHORT.map(d => `${d}`).join('')} +
+
+ `; + + // Add padding for first week + for (let i = 0; i < startPadding; i++) { + html += '
'; + } + + // Add each day of the month + for (let day = 1; day <= lastDay.getDate(); day++) { + const date = new Date(year, month, day); + const ifc = gregorianToIFC(date); + const isToday = date.toDateString() === today.toDateString(); + const isSelected = overlapState.selectedDate && + date.toDateString() === overlapState.selectedDate.toDateString(); + const dateStr = date.toISOString().split('T')[0]; + + const ifcDisplay = ifc.special + ? `${ifc.special}` + : `${ifc.monthName.substring(0, 3)} ${ifc.day}`; + + html += ` +
+
${GREG_MONTHS[month].substring(0, 3)} ${day}
+
+
${ifcDisplay}
+
+ `; + } + + html += '
'; + + // Add day detail if a date is selected + if (overlapState.selectedDate) { + html += renderDayDetail(overlapState.selectedDate); + } + + container.innerHTML = html; + } + + function renderWeekOverlap(container, dateLabel) { + const center = overlapState.centerDate; + const today = new Date(); + + // Get the week centered on the current date (3 days before, selected, 3 days after) + const days = []; + for (let i = -3; i <= 3; i++) { + const d = new Date(center); + d.setDate(center.getDate() + i); + days.push(d); + } + + dateLabel.textContent = `Week of ${formatGregorianShort(days[3])}`; + + let html = ` +
+
+ Gregorian Calendar +
+
+ `; + + // Gregorian track + days.forEach((date, idx) => { + const isToday = date.toDateString() === today.toDateString(); + const isCenter = idx === 3; + const dateStr = date.toISOString().split('T')[0]; + + html += ` +
+
${date.getDate()}
+
${WEEKDAYS_SHORT[date.getDay()]}
+
${GREG_MONTHS[date.getMonth()].substring(0, 3)}
+
+ `; + }); + + html += ` +
+
+ +
+
+ International Fixed Calendar +
+
+ `; + + // IFC track + days.forEach((date, idx) => { + const ifc = gregorianToIFC(date); + const isToday = date.toDateString() === today.toDateString(); + const isCenter = idx === 3; + const isSpecial = !!ifc.special; + const dateStr = date.toISOString().split('T')[0]; + + const dayNum = ifc.special ? '★' : ifc.day; + const dayName = ifc.special ? '' : IFC_WEEKDAYS_SHORT[(ifc.day - 1) % 7]; + const monthLabel = ifc.special ? ifc.special : ifc.monthName.substring(0, 3); + + html += ` +
+
${dayNum}
+
${dayName}
+
${monthLabel}
+
+ `; + }); + + html += ` +
+
+ `; + + // Add day detail + html += renderDayDetail(days[3]); + + container.innerHTML = html; + + // Draw connector lines + setTimeout(() => drawConnectorLines(), 10); + } + + function renderDayOverlap(container, dateLabel) { + const center = overlapState.centerDate; + const today = new Date(); + + // Get 7 consecutive days centered on selected + const days = []; + for (let i = -3; i <= 3; i++) { + const d = new Date(center); + d.setDate(center.getDate() + i); + days.push(d); + } + + const ifc = gregorianToIFC(center); + if (ifc.special) { + dateLabel.textContent = `${ifc.special}, ${center.getFullYear()}`; + } else { + dateLabel.textContent = `${ifc.monthName} ${ifc.day}, ${center.getFullYear()}`; + } + + // Build detailed day view with navigation + let html = ` +
+ `; + + days.forEach((date, idx) => { + const dayIfc = gregorianToIFC(date); + const isToday = date.toDateString() === today.toDateString(); + const isCenter = idx === 3; + const isSpecial = !!dayIfc.special; + const dateStr = date.toISOString().split('T')[0]; + + html += ` +
+
${date.getDate()}
+
${WEEKDAYS_SHORT[date.getDay()]}
+
${GREG_MONTHS[date.getMonth()].substring(0, 3)}
+
+ `; + }); + + html += '
'; + + // Full detail for center date + html += renderDayDetail(center, true); + + container.innerHTML = html; + } + + function renderDayDetail(date, expanded = false) { + const ifc = gregorianToIFC(date); + const gregFormatted = date.toLocaleDateString('en-US', { + weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' + }); + + let ifcFormatted, ifcWeekday; + if (ifc.special) { + ifcFormatted = `${ifc.special}, ${ifc.year}`; + ifcWeekday = 'Outside weekly cycle'; + } else { + ifcFormatted = `${ifc.monthName} ${ifc.day}, ${ifc.year}`; + ifcWeekday = ifc.weekday; + } + + const dayOfYear = getDayOfYear(date); + const daysRemaining = (isLeapYear(date.getFullYear()) ? 366 : 365) - dayOfYear; + + let extraInfo = ''; + if (expanded) { + extraInfo = ` +
+
+
+
Day of Year
+
${dayOfYear}
+
+
+
Days Remaining
+
${daysRemaining}
+
+
+
Leap Year
+
${isLeapYear(date.getFullYear()) ? 'Yes' : 'No'}
+
+
+
+ `; + } + + return ` +
+
+

Gregorian

+
${GREG_MONTHS[date.getMonth()]} ${date.getDate()}
+
${gregFormatted}
+
+
=
+
+

International Fixed Calendar

+
${ifc.special ? ifc.special : ifc.monthName + ' ' + ifc.day}
+
${ifcWeekday}
+
+
+ ${extraInfo} + `; + } + + function drawConnectorLines() { + const svg = document.getElementById('connector-svg'); + if (!svg) return; + + const tracks = document.querySelectorAll('.track-days'); + if (tracks.length < 2) return; + + const topDays = tracks[0].querySelectorAll('.track-day'); + const bottomDays = tracks[1].querySelectorAll('.track-day'); + + if (topDays.length === 0 || bottomDays.length === 0) return; + + const svgRect = svg.getBoundingClientRect(); + let lines = ''; + + topDays.forEach((topDay, idx) => { + if (idx >= bottomDays.length) return; + + const bottomDay = bottomDays[idx]; + const topRect = topDay.getBoundingClientRect(); + const bottomRect = bottomDay.getBoundingClientRect(); + + const x1 = topRect.left + topRect.width / 2 - svgRect.left; + const y1 = 0; + const x2 = bottomRect.left + bottomRect.width / 2 - svgRect.left; + const y2 = 60; + + const isSelected = topDay.classList.contains('selected'); + const color = isSelected ? 'var(--highlight)' : 'var(--accent)'; + const width = isSelected ? 2 : 1; + const opacity = isSelected ? 1 : 0.5; + + lines += ``; + }); + + svg.innerHTML = lines; + } + + // Handle window resize for connector lines + window.addEventListener('resize', () => { + if (overlapState.zoom === 'week') { + drawConnectorLines(); + } + }); + // Initialize setToday(); updateGregorianResult(); diff --git a/og-image.jpg b/og-image.jpg new file mode 100644 index 0000000..81886ec Binary files /dev/null and b/og-image.jpg differ