import { aiHelper } from 'utils/AIHelper.js'; export class JournalApp { constructor() { this.calendarContainer = document.getElementById('calendarContainer'); this.journalInterface = document.getElementById('journalInterface'); this.currentDate = new Date(); this.entries = this.loadEntries(); this.connectionsViewData = this.loadConnectionsViewData(); this.init(); this.addDebugKeyListener(); } init() { this.renderCalendar(); this.renderJournalButton(); this.renderSettingsButton(); } addDebugKeyListener() { document.addEventListener('keydown', (event) => { // Debug key: Cmd+Shift+, (Mac) or Ctrl+Shift+, (Windows/Linux) to clear all journal data if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === ',') { event.preventDefault(); this.clearAllData(); } }); } renderSettingsButton() { const header = document.querySelector('.header'); if (!header) return; const settingsButton = document.createElement('button'); settingsButton.className = 'settings-button'; settingsButton.innerHTML = ` `; settingsButton.title = 'Clear all journal data'; settingsButton.addEventListener('click', () => this.clearAllData()); header.appendChild(settingsButton); this.addSettingsButtonStyles(); } addSettingsButtonStyles() { if (document.getElementById('settingsButtonStyles')) return; const styles = document.createElement('style'); styles.id = 'settingsButtonStyles'; styles.textContent = ` .header { position: relative; } .settings-button { position: absolute; top: -2rem; left: 0; background: none; border: none; color: #d4a5d9; cursor: pointer; padding: 0.5rem; border-radius: 50%; transition: all 0.2s ease; } .settings-button:hover { color: #b678c9; background: rgba(255, 255, 255, 0.5); } .settings-button svg { display: block; } `; document.head.appendChild(styles); } clearAllData() { this.showDebugConfirmModal(); } showDebugConfirmModal() { // Create modal overlay const modalOverlay = document.createElement('div'); modalOverlay.style.cssText = ` position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; transition: opacity 0.3s ease; `; // Create modal content const modal = document.createElement('div'); modal.style.cssText = ` background: linear-gradient(135deg, #fef5f8 0%, #f5e8f3 100%); border: 2px solid rgba(182, 120, 201, 0.3); border-radius: 20px; padding: 2rem; max-width: 400px; margin: 1rem; text-align: center; transform: scale(0.9); transition: transform 0.3s ease; box-shadow: 0 10px 40px rgba(182, 120, 201, 0.2); `; const title = document.createElement('h3'); title.textContent = '✨ Clear All Journal Data? ✨'; title.style.cssText = ` color: #7e5a8c; font-family: 'Playfair Display', serif; font-size: 1.3rem; margin-bottom: 1rem; font-weight: 500; `; const message = document.createElement('p'); message.innerHTML = `This will delete all journal entries and connections data.

This action cannot be undone.`; message.style.cssText = ` color: #8a5d99; font-size: 0.95rem; line-height: 1.5; margin-bottom: 2rem; `; const buttonContainer = document.createElement('div'); buttonContainer.style.cssText = ` display: flex; gap: 1rem; justify-content: center; `; const cancelButton = document.createElement('button'); cancelButton.textContent = 'Cancel'; cancelButton.style.cssText = ` background: rgba(255, 255, 255, 0.6); color: #7e5a8c; border: 2px solid rgba(182, 120, 201, 0.3); padding: 0.75rem 1.5rem; border-radius: 12px; font-family: inherit; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; `; const clearButton = document.createElement('button'); clearButton.textContent = 'Clear Data'; clearButton.style.cssText = ` background: linear-gradient(135deg, #e89bb9, #d67fa2); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.5); padding: 0.75rem 1.5rem; border-radius: 12px; font-family: inherit; font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; `; // Add hover effects cancelButton.addEventListener('mouseenter', () => { cancelButton.style.background = 'rgba(255, 255, 255, 0.8)'; }); cancelButton.addEventListener('mouseleave', () => { cancelButton.style.background = 'rgba(255, 255, 255, 0.6)'; }); clearButton.addEventListener('mouseenter', () => { clearButton.style.background = 'linear-gradient(135deg, #f2adc5, #e28fb0)'; }); clearButton.addEventListener('mouseleave', () => { clearButton.style.background = 'linear-gradient(135deg, #e89bb9, #d67fa2)'; }); // Add event listeners cancelButton.addEventListener('click', () => { this.closeDebugModal(modalOverlay); }); clearButton.addEventListener('click', () => { this.performDataClear(); this.closeDebugModal(modalOverlay); }); // Close on overlay click modalOverlay.addEventListener('click', (e) => { if (e.target === modalOverlay) { this.closeDebugModal(modalOverlay); } }); // Assemble modal buttonContainer.appendChild(cancelButton); buttonContainer.appendChild(clearButton); modal.appendChild(title); modal.appendChild(message); modal.appendChild(buttonContainer); modalOverlay.appendChild(modal); document.body.appendChild(modalOverlay); // Animate in setTimeout(() => { modalOverlay.style.opacity = '1'; modal.style.transform = 'scale(1)'; }, 10); } closeDebugModal(modalOverlay) { modalOverlay.style.opacity = '0'; modalOverlay.querySelector('div').style.transform = 'scale(0.9)'; setTimeout(() => { if (modalOverlay.parentNode) { modalOverlay.parentNode.removeChild(modalOverlay); } }, 300); } performDataClear() { // Clear localStorage localStorage.removeItem('rosebud-ai-journal-entries'); localStorage.removeItem('rosebud-ai-connections-view'); // Reset instance data this.entries = {}; this.connectionsViewData = {}; // Refresh UI this.renderCalendar(); this.renderJournalButton(); // Log success console.log('🧹 Debug: All journal data cleared successfully'); // Show temporary visual feedback this.showDebugMessage('All journal data cleared'); } showDebugMessage(message) { const debugAlert = document.createElement('div'); debugAlert.style.cssText = ` position: fixed; top: 20px; right: 20px; background: linear-gradient(135deg, #fef5f8, #f5e8f3); color: #7e5a8c; padding: 1rem 1.5rem; border-radius: 12px; font-family: inherit; font-size: 0.9rem; z-index: 9999; opacity: 0; transform: translateX(100px); transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); border: 2px solid rgba(182, 120, 201, 0.3); box-shadow: 0 4px 20px rgba(182, 120, 201, 0.3); `; debugAlert.textContent = `✨ ${message}`; document.body.appendChild(debugAlert); // Animate in setTimeout(() => { debugAlert.style.opacity = '1'; debugAlert.style.transform = 'translateX(0)'; }, 100); // Auto remove after 3 seconds setTimeout(() => { debugAlert.style.opacity = '0'; debugAlert.style.transform = 'translateX(100px)'; setTimeout(() => { if (debugAlert.parentNode) { debugAlert.parentNode.removeChild(debugAlert); } }, 300); }, 3000); } loadEntries() { try { return JSON.parse(localStorage.getItem('rosebud-ai-journal-entries') || '{}'); } catch { return {}; } } loadConnectionsViewData() { try { return JSON.parse(localStorage.getItem('rosebud-ai-connections-view') || '{}'); } catch { return {}; } } saveConnectionsViewData(data) { localStorage.setItem('rosebud-ai-connections-view', JSON.stringify(data)); } saveEntries() { localStorage.setItem('rosebud-ai-journal-entries', JSON.stringify(this.entries)); } renderCalendar() { const calendar = this.createCalendarElement(); this.calendarContainer.innerHTML = ''; this.calendarContainer.appendChild(calendar); this.addCalendarStyles(); } createCalendarElement() { const now = new Date(); const year = now.getFullYear(); const month = now.getMonth(); // Create calendar container const calendar = document.createElement('div'); calendar.className = 'calendar'; // Create month/year header const header = document.createElement('div'); header.className = 'calendar-header'; header.textContent = now.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); calendar.appendChild(header); // Create days of week const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']; const weekHeader = document.createElement('div'); weekHeader.className = 'calendar-week-header'; daysOfWeek.forEach(day => { const dayElement = document.createElement('div'); dayElement.className = 'calendar-day-header'; dayElement.textContent = day; weekHeader.appendChild(dayElement); }); calendar.appendChild(weekHeader); // Create calendar grid const grid = document.createElement('div'); grid.className = 'calendar-grid'; // Get first day of month and number of days const firstDay = new Date(year, month, 1).getDay(); const lastDay = new Date(year, month + 1, 0).getDate(); const today = now.getDate(); // Add empty cells for days before the first day of the month for (let i = 0; i < firstDay; i++) { const emptyDay = document.createElement('div'); emptyDay.className = 'calendar-day empty'; grid.appendChild(emptyDay); } // Add days of the month const todayDate = new Date(); todayDate.setHours(23, 59, 59, 999); // Set to end of today for (let day = 1; day <= lastDay; day++) { const dayElement = document.createElement('div'); dayElement.className = 'calendar-day'; dayElement.textContent = day; const dayDate = new Date(year, month, day); const formattedDate = this.formatDate(dayDate); // Check if this day is in the future const isFutureDate = dayDate > todayDate; // Highlight current day if (day === today && month === todayDate.getMonth() && year === todayDate.getFullYear()) { dayElement.classList.add('current-day'); } // Check if this day has a journal entry if (this.entries[formattedDate]) { dayElement.classList.add('has-entry'); } // Disable future dates if (isFutureDate) { dayElement.classList.add('future-date'); dayElement.title = 'Future dates are not available for journaling'; } else { // Add click handler for day selection (only for past/present dates) dayElement.addEventListener('click', () => { this.selectDate(dayDate); }); } grid.appendChild(dayElement); } calendar.appendChild(grid); return calendar; } addCalendarStyles() { if (!document.getElementById('calendarStyles')) { const styles = document.createElement('style'); styles.id = 'calendarStyles'; styles.textContent = ` .calendar { max-width: 320px; margin: 0 auto; opacity: 0; transform: translateY(20px); animation: calendarFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards; } @keyframes calendarFadeIn { to { opacity: 1; transform: translateY(0); } } .calendar-header { text-align: center; font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 500; margin-bottom: 1.5rem; color: #7e5a8c; letter-spacing: 0.02em; } .calendar-week-header { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 0.5rem; } .calendar-day-header { text-align: center; font-size: 0.75rem; font-weight: 500; color: #b084bb; padding: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .calendar-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); position: relative; background: rgba(255, 255, 255, 0.4); color: #7e5a8c; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); } .calendar-day:not(.empty):hover { background: rgba(255, 255, 255, 0.7); color: #6b4778; transform: scale(1.1); box-shadow: 0 4px 15px rgba(201, 75, 125, 0.2); } .calendar-day.current-day { background: linear-gradient(135deg, #dda3e6, #c989d8); color: #ffffff; font-weight: 600; box-shadow: 0 4px 15px rgba(201, 75, 125, 0.3); border: 2px solid rgba(255, 255, 255, 0.8); } .calendar-day.current-day:hover { background: linear-gradient(135deg, #e8b3f0, #d79ae3); transform: scale(1.1); } .calendar-day.has-entry { background: linear-gradient(135deg, #f5c9e1, #e4b3d6); color: #9b4d7f; position: relative; } .calendar-day.has-entry::after { content: '✨'; position: absolute; bottom: 2px; right: 2px; font-size: 0.5rem; opacity: 0.8; } .calendar-day.has-entry:hover { background: linear-gradient(135deg, #ffd9ec, #f0c3e1); color: #8a3d6f; } .calendar-day.current-day.has-entry { background: linear-gradient(135deg, #e099d3, #c97bb8); color: #ffffff; } .calendar-day.empty { cursor: default; pointer-events: none; background: transparent; border: none; } .calendar-day.future-date { color: #d4c4d9; cursor: not-allowed; pointer-events: none; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); } .calendar-day.future-date:hover { background: rgba(255, 255, 255, 0.2); color: #d4c4d9; transform: none; } @media (min-width: 768px) { .calendar { max-width: 360px; } .calendar-header { font-size: 1.2rem; margin-bottom: 2rem; } .calendar-day-header { font-size: 0.85rem; padding: 0.75rem; } .calendar-day { font-size: 1rem; } } `; document.head.appendChild(styles); } } selectDate(date) { // Prevent selecting future dates const today = new Date(); today.setHours(23, 59, 59, 999); // Set to end of today if (date > today) { return; // Don't allow selection of future dates } this.currentDate = date; this.renderJournalButton(); // Update calendar to reflect new selection const formattedDate = this.formatDate(date); this.openJournalEntry(formattedDate); } renderJournalButton() { const today = this.formatDate(new Date()); // Always use actual today, not selected date const hasEntry = this.entries[today]; // Create button container const buttonContainer = document.createElement('div'); buttonContainer.className = 'button-container'; // Create journal button const journalButton = document.createElement('button'); journalButton.className = 'journal-button'; journalButton.textContent = hasEntry ? '✨ Adjust journal entry' : "✨ Write down today's thoughts"; journalButton.addEventListener('click', () => this.openJournalEntry(today)); buttonContainer.appendChild(journalButton); // Check if current month has any entries const monthlyEntries = this.getMonthlyEntries(this.currentDate); if (monthlyEntries.length > 0) { const connectionsButton = document.createElement('button'); connectionsButton.className = 'connections-button'; // Check if there are new entries since last connections view const hasNewEntries = this.hasNewEntriesSinceLastView(); if (hasNewEntries) { connectionsButton.classList.add('has-notification'); } // Create button content with notification indicator const buttonContent = document.createElement('div'); buttonContent.className = 'connections-button-content'; buttonContent.textContent = '🌙 View Connections'; if (hasNewEntries) { const indicator = document.createElement('div'); indicator.className = 'notification-indicator'; buttonContent.appendChild(indicator); } connectionsButton.appendChild(buttonContent); connectionsButton.addEventListener('click', () => this.showMonthlyConnections()); buttonContainer.appendChild(connectionsButton); } this.journalInterface.innerHTML = ''; this.journalInterface.appendChild(buttonContainer); // Add button styles this.addJournalButtonStyles(); } addJournalButtonStyles() { if (!document.getElementById('journalButtonStyles')) { const styles = document.createElement('style'); styles.id = 'journalButtonStyles'; styles.textContent = ` .button-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; opacity: 0; transform: translateY(20px); animation: buttonContainerFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.2s forwards; } @keyframes buttonContainerFadeIn { to { opacity: 1; transform: translateY(0); } } .journal-button, .connections-button { background: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)); color: #7e5a8c; border: 2px solid rgba(182, 120, 201, 0.4); padding: 1rem 2rem; border-radius: 20px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); min-width: 320px; max-width: 380px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: fit-content; margin: 0 auto; backdrop-filter: blur(10px); box-shadow: 0 4px 15px rgba(182, 120, 201, 0.2); } .journal-button:hover, .connections-button:hover { background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7)); border-color: rgba(182, 120, 201, 0.6); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(182, 120, 201, 0.3); } .journal-button:active, .connections-button:active { transform: translateY(0); } .connections-button { background: linear-gradient(135deg, #dda3e6, #c989d8); border-color: rgba(255, 255, 255, 0.5); color: #ffffff; position: relative; overflow: hidden; } .connections-button:hover { background: linear-gradient(135deg, #e8b3f0, #d79ae3); border-color: rgba(255, 255, 255, 0.7); } .connections-button-content { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .connections-button.has-notification { animation: connectionsPulse 2s ease-in-out infinite; } @keyframes connectionsPulse { 0%, 100% { box-shadow: 0 4px 15px rgba(201, 75, 125, 0.3); } 50% { box-shadow: 0 0 0 8px rgba(201, 75, 125, 0), 0 4px 15px rgba(201, 75, 125, 0.3); } } .notification-indicator { width: 8px; height: 8px; background: linear-gradient(135deg, #ff94b8, #ff6b9d); border-radius: 50%; position: relative; animation: indicatorPulse 1.5s ease-in-out infinite; box-shadow: 0 2px 8px rgba(255, 107, 157, 0.5); } @keyframes indicatorPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(1.2); } } @media (min-width: 768px) { .button-container { flex-direction: row; justify-content: center; gap: 1.5rem; } .journal-button, .connections-button { min-width: 260px; max-width: 320px; } } @media (max-width: 480px) { .journal-button, .connections-button { min-width: 100%; max-width: 100%; font-size: 0.95rem; padding: 0.9rem 1.5rem; white-space: normal; line-height: 1.3; } } `; document.head.appendChild(styles); } } openJournalEntry(date) { const existingEntry = this.entries[date]; const entryInterface = this.createJournalEntryInterface(date, existingEntry); // Smooth transition out of calendar view this.calendarContainer.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.calendarContainer.style.opacity = '0'; this.calendarContainer.style.transform = 'translateY(-20px)'; this.journalInterface.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.journalInterface.style.opacity = '0'; this.journalInterface.style.transform = 'translateY(-20px)'; setTimeout(() => { this.calendarContainer.style.display = 'none'; this.journalInterface.innerHTML = ''; this.journalInterface.appendChild(entryInterface); this.addJournalEntryStyles(); // Smooth transition into journal entry view setTimeout(() => { this.journalInterface.style.opacity = '1'; this.journalInterface.style.transform = 'translateY(0)'; // Focus the text area after transition setTimeout(() => { const textarea = entryInterface.querySelector('.journal-textarea'); if (textarea && !existingEntry) { textarea.focus(); } }, 200); }, 50); }, 500); } createJournalEntryInterface(date, existingEntry = null) { const container = document.createElement('div'); container.className = 'journal-entry-container'; // Create header with date and back button const header = document.createElement('div'); header.className = 'journal-entry-header'; const backButton = document.createElement('button'); backButton.className = 'back-button'; backButton.innerHTML = '← Back'; backButton.addEventListener('click', () => this.closeJournalEntry()); const dateTitle = document.createElement('h2'); dateTitle.className = 'journal-date-title'; dateTitle.textContent = new Date(date).toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); header.appendChild(backButton); header.appendChild(dateTitle); container.appendChild(header); // Create main content area const content = document.createElement('div'); content.className = 'journal-content'; // Create text area const textarea = document.createElement('textarea'); textarea.className = 'journal-textarea'; textarea.placeholder = existingEntry ? '' : 'What\'s on your heart today? Let your thoughts flow freely... ✨'; textarea.value = existingEntry?.text || ''; textarea.setAttribute('rows', '12'); content.appendChild(textarea); // Create complete button (only show if there's text) const completeButton = document.createElement('button'); completeButton.className = 'complete-button'; completeButton.textContent = existingEntry ? '✨ Update journal entry' : '✨ I\'ve completed this journal entry'; completeButton.style.opacity = (existingEntry || textarea.value.trim()) ? '1' : '0'; completeButton.style.transform = (existingEntry || textarea.value.trim()) ? 'translateY(0)' : 'translateY(20px)'; completeButton.addEventListener('click', () => this.completeJournalEntry(date, textarea.value)); // Monitor text changes to show/hide complete button textarea.addEventListener('input', () => { const hasText = textarea.value.trim().length > 0; completeButton.style.opacity = hasText ? '1' : '0'; completeButton.style.transform = hasText ? 'translateY(0)' : 'translateY(20px)'; }); content.appendChild(completeButton); container.appendChild(content); return container; } addJournalEntryStyles() { if (!document.getElementById('journalEntryStyles')) { const styles = document.createElement('style'); styles.id = 'journalEntryStyles'; styles.textContent = ` .journal-entry-container { width: 100%; max-width: 800px; margin: 0 auto; opacity: 0; transform: translateY(20px); animation: journalEntryFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s forwards; } @keyframes journalEntryFadeIn { to { opacity: 1; transform: translateY(0); } } .journal-entry-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding: 0 0.5rem; } .back-button { background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(182, 120, 201, 0.3); color: #7e5a8c; font-family: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; align-items: center; gap: 0.5rem; z-index: 10; backdrop-filter: blur(10px); } .back-button:hover { background: rgba(255, 255, 255, 0.8); color: #6b4778; border-color: rgba(182, 120, 201, 0.5); } .journal-date-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; font-weight: 500; color: #7e5a8c; text-align: center; letter-spacing: 0.02em; margin: 0; } .journal-content { display: flex; flex-direction: column; gap: 2rem; } .journal-textarea { width: 100%; background: rgba(255, 255, 255, 0.6); border: 2px solid rgba(182, 120, 201, 0.3); outline: none; color: #5a3d63; font-family: inherit; font-size: 1rem; line-height: 1.8; resize: none; padding: 2rem; border-radius: 20px; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); min-height: 400px; box-sizing: border-box; backdrop-filter: blur(10px); } .journal-textarea:focus { background: rgba(255, 255, 255, 0.8); border-color: rgba(182, 120, 201, 0.5); box-shadow: 0 0 0 3px rgba(182, 120, 201, 0.1), 0 4px 20px rgba(182, 120, 201, 0.2); } .journal-textarea::placeholder { color: #b08ab8; font-style: italic; } .complete-button { background: linear-gradient(135deg, #dda3e6, #c989d8); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.5); padding: 1rem 2rem; border-radius: 20px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); align-self: center; min-width: 250px; box-shadow: 0 4px 15px rgba(182, 120, 201, 0.3); } .complete-button:hover { background: linear-gradient(135deg, #e8b3f0, #d79ae3); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(182, 120, 201, 0.4); } .complete-button:active { transform: translateY(0); } @media (min-width: 768px) { .journal-entry-header { padding: 0; } .journal-date-title { font-size: 1.1rem; } .journal-textarea { font-size: 1.1rem; padding: 2.5rem; min-height: 450px; } } @media (max-width: 480px) { .journal-entry-header { flex-direction: column; align-items: flex-start; gap: 1rem; } .journal-date-title { text-align: left; font-size: 0.9rem; } .complete-button { min-width: 100%; } } `; document.head.appendChild(styles); } } closeJournalEntry() { // Smooth transition back to calendar view this.journalInterface.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.journalInterface.style.opacity = '0'; this.journalInterface.style.transform = 'translateY(-20px)'; setTimeout(() => { this.calendarContainer.style.display = 'block'; this.renderCalendar(); this.renderJournalButton(); // Smooth transition back into calendar setTimeout(() => { this.calendarContainer.style.opacity = '1'; this.calendarContainer.style.transform = 'translateY(0)'; this.journalInterface.style.opacity = '1'; this.journalInterface.style.transform = 'translateY(0)'; }, 50); }, 500); } async completeJournalEntry(date, text) { if (!text.trim()) return; // Additional check: prevent saving entries for future dates const entryDate = new Date(date); const today = new Date(); today.setHours(23, 59, 59, 999); if (entryDate > today) { console.warn('Cannot save journal entry for future date'); return; } // Save entry this.entries[date] = { text: text.trim(), timestamp: Date.now(), date: date }; this.saveEntries(); // Show AI analysis interface await this.showAIAnalysis(date, text.trim()); } async showAIAnalysis(currentDate, currentText) { // Create AI analysis interface const analysisInterface = this.createAIAnalysisInterface(); // Smooth transition to analysis view this.journalInterface.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.journalInterface.style.opacity = '0'; this.journalInterface.style.transform = 'translateY(-20px)'; setTimeout(async () => { this.journalInterface.innerHTML = ''; this.journalInterface.appendChild(analysisInterface); this.addAIAnalysisStyles(); // Smooth transition into analysis view setTimeout(() => { this.journalInterface.style.opacity = '1'; this.journalInterface.style.transform = 'translateY(0)'; }, 50); // Generate AI insights await this.generateAIInsights(currentDate, currentText, analysisInterface); }, 500); } createAIAnalysisInterface() { const container = document.createElement('div'); container.className = 'ai-analysis-container'; // Create header const header = document.createElement('div'); header.className = 'ai-analysis-header'; const title = document.createElement('h2'); title.className = 'ai-analysis-title'; title.textContent = '✨ Reflecting on your thoughts... ✨'; header.appendChild(title); const subtitle = document.createElement('p'); subtitle.className = 'ai-analysis-subtitle'; subtitle.textContent = 'Your gentle AI companion is analyzing your recent entries'; header.appendChild(subtitle); container.appendChild(header); // Create loading indicator const loadingSection = document.createElement('div'); loadingSection.className = 'ai-loading-section'; const loadingDots = document.createElement('div'); loadingDots.className = 'loading-dots'; for (let i = 0; i < 3; i++) { const dot = document.createElement('div'); dot.className = 'loading-dot'; loadingDots.appendChild(dot); } loadingSection.appendChild(loadingDots); container.appendChild(loadingSection); // Create insights section (initially empty) const insightsSection = document.createElement('div'); insightsSection.className = 'ai-insights-section'; insightsSection.style.display = 'none'; container.appendChild(insightsSection); // Create continue button (initially hidden) const continueButton = document.createElement('button'); continueButton.className = 'continue-button'; continueButton.textContent = 'Continue to calendar'; continueButton.style.display = 'none'; continueButton.addEventListener('click', () => this.closeJournalEntry()); container.appendChild(continueButton); return container; } async generateAIInsights(currentDate, currentText, analysisInterface) { try { // Get recent entries for context (last 7 days) const recentEntries = this.getRecentEntries(currentDate, 7); // Create AI prompt for mindful analysis const prompt = this.createAnalysisPrompt(currentText, recentEntries); console.log('Requesting AI analysis for entry...'); // Get AI insights with longer timeout const insights = await Promise.race([ aiHelper.ask(prompt), new Promise((_, reject) => setTimeout(() => reject(new Error('AI request timeout')), 15000) ) ]); if (insights && insights.trim().length > 0) { console.log('AI insights received successfully'); this.displayAIInsights(insights, analysisInterface); } else { console.log('AI returned empty response, showing fallback'); this.displayFallbackMessage(analysisInterface); } } catch (error) { console.error('AI analysis failed:', error); this.displayFallbackMessage(analysisInterface); } } getRecentEntries(currentDate, days) { const entries = []; const current = new Date(currentDate); for (let i = 1; i <= days; i++) { const pastDate = new Date(current); pastDate.setDate(pastDate.getDate() - i); const dateKey = this.formatDate(pastDate); if (this.entries[dateKey]) { entries.push({ date: dateKey, text: this.entries[dateKey].text, daysAgo: i }); } } return entries; } createAnalysisPrompt(currentText, recentEntries) { let prompt = `As an AI companion, you are a calm, insightful, and gentle listener. Your role is to help the user explore their thoughts by asking open-ended questions. Today's journal entry: "${currentText}" `; if (recentEntries.length > 0) { prompt += `For context, here are some recent entries from the past week:\n`; recentEntries.forEach(entry => { prompt += `${entry.daysAgo} days ago: "${entry.text.substring(0, 200)}${entry.text.length > 200 ? '...' : ''}"\n`; }); prompt += '\n'; } prompt += `Your task: 1. **Listen and Reflect**: Start by acknowledging a key theme or feeling from their entry. Use phrases like, "It sounds like you're navigating..." or "I hear you exploring the idea of..." 2. **Be Gently Curious**: Ask one or two thoughtful, open-ended questions that invite them to look deeper into their own words. For example: "What did that feel like for you?" or "I wonder what that brings up for you?" 3. **Subtly Reference, Don't Quote**: Allude to their specific words (like 'luxurious' or 'grounding') to show you're paying attention, but avoid putting them in quotation marks. 4. **Avoid Praise and Advice**: Do not praise them or tell them what to do. Your job is to ask, not to answer. Write a response between 150-200 words that feels like a calm, therapeutic conversation, guiding them to their own insights.`; return prompt; } displayAIInsights(insights, analysisInterface) { const loadingSection = analysisInterface.querySelector('.ai-loading-section'); const insightsSection = analysisInterface.querySelector('.ai-insights-section'); const continueButton = analysisInterface.querySelector('.continue-button'); const title = analysisInterface.querySelector('.ai-analysis-title'); // Update title title.textContent = '✨ Your reflection insights ✨'; // Hide loading, show insights loadingSection.style.display = 'none'; // Create insights content const insightsText = document.createElement('div'); insightsText.className = 'insights-text'; insightsText.textContent = insights; insightsSection.appendChild(insightsText); // Show with animation insightsSection.style.display = 'block'; insightsSection.style.opacity = '0'; insightsSection.style.transform = 'translateY(20px)'; setTimeout(() => { insightsSection.style.transition = 'all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1)'; insightsSection.style.opacity = '1'; insightsSection.style.transform = 'translateY(0)'; // Show continue button after insights appear setTimeout(() => { continueButton.style.display = 'block'; continueButton.style.opacity = '0'; continueButton.style.transform = 'translateY(20px)'; setTimeout(() => { continueButton.style.transition = 'all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)'; continueButton.style.opacity = '1'; continueButton.style.transform = 'translateY(0)'; }, 100); }, 800); }, 100); } displayFallbackMessage(analysisInterface) { const loadingSection = analysisInterface.querySelector('.ai-loading-section'); const insightsSection = analysisInterface.querySelector('.ai-insights-section'); const continueButton = analysisInterface.querySelector('.continue-button'); const title = analysisInterface.querySelector('.ai-analysis-title'); title.textContent = '✨ Thank you for sharing ✨'; loadingSection.style.display = 'none'; const fallbackText = document.createElement('div'); fallbackText.className = 'insights-text'; fallbackText.textContent = 'Your thoughts have been safely saved. Taking time to reflect through writing is a meaningful practice for understanding yourself better. Each entry is a step in your journey of self-discovery.'; insightsSection.appendChild(fallbackText); insightsSection.style.display = 'block'; continueButton.style.display = 'block'; } addAIAnalysisStyles() { if (!document.getElementById('aiAnalysisStyles')) { const styles = document.createElement('style'); styles.id = 'aiAnalysisStyles'; styles.textContent = ` .ai-analysis-container { width: 100%; max-width: 600px; margin: 0 auto; text-align: center; opacity: 0; transform: translateY(20px); animation: aiAnalysisFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s forwards; } @keyframes aiAnalysisFadeIn { to { opacity: 1; transform: translateY(0); } } .ai-analysis-header { margin-bottom: 3rem; } .ai-analysis-title { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 500; color: #7e5a8c; margin-bottom: 0.5rem; letter-spacing: 0.02em; } .ai-analysis-subtitle { font-size: 0.95rem; color: #9b7fa6; font-weight: 300; margin: 0; font-style: italic; } .ai-loading-section { display: flex; justify-content: center; margin: 3rem 0; } .loading-dots { display: flex; gap: 0.5rem; } .loading-dot { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(135deg, #dda3e6, #c989d8); animation: loadingPulse 1.4s infinite ease-in-out; box-shadow: 0 2px 8px rgba(182, 120, 201, 0.3); } .loading-dot:nth-child(1) { animation-delay: -0.32s; } .loading-dot:nth-child(2) { animation-delay: -0.16s; } .loading-dot:nth-child(3) { animation-delay: 0; } @keyframes loadingPulse { 0%, 80%, 100% { transform: scale(0.8); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } } .ai-insights-section { margin: 2rem 0; text-align: left; } .insights-text { background: rgba(255, 255, 255, 0.6); border: 2px solid rgba(182, 120, 201, 0.3); border-radius: 20px; padding: 2rem; font-size: 1rem; line-height: 1.8; color: #5a3d63; font-weight: 300; backdrop-filter: blur(10px); } .continue-button { background: linear-gradient(135deg, #dda3e6, #c989d8); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.5); padding: 1rem 2rem; border-radius: 20px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); margin-top: 2rem; min-width: 200px; box-shadow: 0 4px 15px rgba(182, 120, 201, 0.3); } .continue-button:hover { background: linear-gradient(135deg, #e8b3f0, #d79ae3); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(182, 120, 201, 0.4); } .continue-button:active { transform: translateY(0); } @media (min-width: 768px) { .ai-analysis-title { font-size: 1.8rem; } .ai-analysis-subtitle { font-size: 1rem; } .insights-text { font-size: 1.1rem; padding: 2.5rem; } } @media (max-width: 480px) { .insights-text { padding: 1.5rem; } .continue-button { min-width: 100%; } } `; document.head.appendChild(styles); } } hasNewEntriesSinceLastView() { const currentMonth = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth()}`; const lastViewTime = this.connectionsViewData[currentMonth] || 0; // Get monthly entries and check if any are newer than last view const monthlyEntries = this.getMonthlyEntries(this.currentDate); return monthlyEntries.some(entry => entry.timestamp > lastViewTime); } getMonthlyEntries(date) { const entries = []; const year = date.getFullYear(); const month = date.getMonth(); // Get all entries for the current month Object.keys(this.entries).forEach(dateKey => { const entryDate = new Date(dateKey); if (entryDate.getFullYear() === year && entryDate.getMonth() === month) { entries.push({ date: dateKey, text: this.entries[dateKey].text, timestamp: this.entries[dateKey].timestamp }); } }); // Sort by date (oldest first) entries.sort((a, b) => new Date(a.date) - new Date(b.date)); return entries; } async showMonthlyConnections() { const monthlyEntries = this.getMonthlyEntries(this.currentDate); // Mark connections as viewed for current month const currentMonth = `${this.currentDate.getFullYear()}-${this.currentDate.getMonth()}`; this.connectionsViewData[currentMonth] = Date.now(); this.saveConnectionsViewData(this.connectionsViewData); // Create connections interface const connectionsInterface = this.createConnectionsInterface(); // Smooth transition to connections view this.calendarContainer.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.calendarContainer.style.opacity = '0'; this.calendarContainer.style.transform = 'translateY(-20px)'; this.journalInterface.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.journalInterface.style.opacity = '0'; this.journalInterface.style.transform = 'translateY(-20px)'; setTimeout(async () => { this.calendarContainer.style.display = 'none'; this.journalInterface.innerHTML = ''; this.journalInterface.appendChild(connectionsInterface); this.addConnectionsStyles(); // Smooth transition into connections view setTimeout(() => { this.journalInterface.style.opacity = '1'; this.journalInterface.style.transform = 'translateY(0)'; }, 50); // Generate AI connections analysis await this.generateConnectionsAnalysis(monthlyEntries, connectionsInterface); }, 500); } createConnectionsInterface() { const container = document.createElement('div'); container.className = 'connections-interface-container'; // Create header const header = document.createElement('div'); header.className = 'connections-header'; const backButton = document.createElement('button'); backButton.className = 'back-button'; backButton.innerHTML = '← Back to calendar'; backButton.addEventListener('click', () => this.closeConnectionsView()); header.appendChild(backButton); const title = document.createElement('h2'); title.className = 'connections-title'; title.textContent = '✨ Discovering your patterns... ✨'; header.appendChild(title); const subtitle = document.createElement('p'); subtitle.className = 'connections-subtitle'; const monthName = this.currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); subtitle.textContent = `Weaving together the threads of your ${monthName} journey`; header.appendChild(subtitle); container.appendChild(header); // Create loading section const loadingSection = document.createElement('div'); loadingSection.className = 'connections-loading-section'; const loadingAnimation = document.createElement('div'); loadingAnimation.className = 'connections-loading-animation'; // Create animated connection nodes for (let i = 0; i < 5; i++) { const node = document.createElement('div'); node.className = 'connection-node'; node.style.animationDelay = `${i * 0.2}s`; loadingAnimation.appendChild(node); } // Create connecting lines for (let i = 0; i < 4; i++) { const line = document.createElement('div'); line.className = 'connection-line'; line.style.animationDelay = `${0.5 + i * 0.15}s`; loadingAnimation.appendChild(line); } loadingSection.appendChild(loadingAnimation); const loadingText = document.createElement('p'); loadingText.className = 'connections-loading-text'; loadingText.textContent = 'Finding the meaningful patterns woven through your reflections...'; loadingSection.appendChild(loadingText); container.appendChild(loadingSection); // Create insights section (initially hidden) const insightsSection = document.createElement('div'); insightsSection.className = 'connections-insights-section'; insightsSection.style.display = 'none'; container.appendChild(insightsSection); // Create continue button (initially hidden) const continueButton = document.createElement('button'); continueButton.className = 'connections-continue-button'; continueButton.textContent = 'Return to calendar'; continueButton.style.display = 'none'; continueButton.addEventListener('click', () => this.closeConnectionsView()); container.appendChild(continueButton); return container; } closeConnectionsView() { // Smooth transition back to calendar view this.journalInterface.style.transition = 'all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)'; this.journalInterface.style.opacity = '0'; this.journalInterface.style.transform = 'translateY(-20px)'; setTimeout(() => { this.calendarContainer.style.display = 'block'; this.renderCalendar(); this.renderJournalButton(); // Smooth transition back into calendar setTimeout(() => { this.calendarContainer.style.opacity = '1'; this.calendarContainer.style.transform = 'translateY(0)'; this.journalInterface.style.opacity = '1'; this.journalInterface.style.transform = 'translateY(0)'; }, 50); }, 500); } addConnectionsStyles() { if (!document.getElementById('connectionsStyles')) { const styles = document.createElement('style'); styles.id = 'connectionsStyles'; styles.textContent = ` .connections-interface-container { width: 100%; max-width: 700px; margin: 0 auto; opacity: 0; transform: translateY(20px); animation: connectionsInterfaceFadeIn 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) 0.1s forwards; } @keyframes connectionsInterfaceFadeIn { to { opacity: 1; transform: translateY(0); } } .connections-header { text-align: center; margin-bottom: 3rem; padding-top: 3rem; position: relative; } .connections-header .back-button { position: absolute; left: 0; top: 0; background: rgba(255, 255, 255, 0.5); border: 2px solid rgba(182, 120, 201, 0.3); color: #7e5a8c; font-family: inherit; font-size: 0.9rem; cursor: pointer; padding: 0.5rem 1rem; border-radius: 12px; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); display: flex; align-items: center; gap: 0.5rem; z-index: 10; backdrop-filter: blur(10px); } .connections-header .back-button:hover { background: rgba(255, 255, 255, 0.8); color: #6b4778; border-color: rgba(182, 120, 201, 0.5); } .connections-title { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 500; color: #7e5a8c; margin: 0 0 0.5rem 0; letter-spacing: 0.02em; position: relative; } .connections-subtitle { font-size: 1rem; color: #9b7fa6; font-weight: 300; margin: 0; max-width: 500px; margin-left: auto; margin-right: auto; font-style: italic; } .connections-loading-section { display: flex; flex-direction: column; align-items: center; gap: 2rem; margin: 4rem 0; } .connections-loading-animation { position: relative; width: 200px; height: 120px; margin: 0 auto; } .connection-node { position: absolute; width: 14px; height: 14px; background: linear-gradient(45deg, #dda3e6, #c989d8); border-radius: 50%; animation: nodeFloat 2s ease-in-out infinite; box-shadow: 0 0 20px rgba(182, 120, 201, 0.5), 0 0 40px rgba(201, 75, 125, 0.3); } .connection-node:nth-child(1) { top: 20px; left: 30px; } .connection-node:nth-child(2) { top: 10px; right: 40px; } .connection-node:nth-child(3) { bottom: 30px; left: 20px; } .connection-node:nth-child(4) { bottom: 20px; right: 30px; } .connection-node:nth-child(5) { top: 50%; left: 50%; transform: translate(-50%, -50%); } @keyframes nodeFloat { 0%, 100% { transform: translateY(0) scale(1); opacity: 0.7; } 50% { transform: translateY(-8px) scale(1.1); opacity: 1; } } .connection-line { position: absolute; height: 2px; background: linear-gradient(90deg, transparent, rgba(201, 75, 125, 0.6), transparent); animation: lineGlow 2.5s ease-in-out infinite; opacity: 0; border-radius: 2px; } .connection-line:nth-child(6) { top: 25px; left: 42px; right: 52px; transform: rotate(-5deg); } .connection-line:nth-child(7) { top: 60px; left: 32px; right: 45px; transform: rotate(15deg); } .connection-line:nth-child(8) { bottom: 35px; left: 32px; right: 42px; transform: rotate(-10deg); } .connection-line:nth-child(9) { top: 35px; bottom: 50px; left: 90px; width: 2px; height: auto; background: linear-gradient(180deg, transparent, rgba(201, 75, 125, 0.6), transparent); transform: rotate(0deg); border-radius: 2px; } @keyframes lineGlow { 0%, 100% { opacity: 0; filter: blur(1px); } 50% { opacity: 0.6; filter: blur(0px); } } .connections-loading-text { font-size: 1rem; color: #9b7fa6; text-align: center; font-weight: 300; margin: 0; animation: textPulse 2s ease-in-out infinite; font-style: italic; } @keyframes textPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } } .connections-insights-section { margin: 2rem 0; text-align: left; } .connections-insights-text { background: rgba(255, 255, 255, 0.6); border: 2px solid rgba(182, 120, 201, 0.3); border-radius: 20px; padding: 2rem; font-size: 1rem; line-height: 1.8; color: #5a3d63; font-weight: 300; margin: 0; backdrop-filter: blur(10px); } .connections-continue-button { background: linear-gradient(135deg, #dda3e6, #c989d8); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.5); padding: 1rem 2rem; border-radius: 20px; font-family: inherit; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1); margin: 2rem auto 0; min-width: 200px; display: block; box-shadow: 0 4px 15px rgba(182, 120, 201, 0.3); } .connections-continue-button:hover { background: linear-gradient(135deg, #e8b3f0, #d79ae3); border-color: rgba(255, 255, 255, 0.7); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(182, 120, 201, 0.4); } .connections-continue-button:active { transform: translateY(0); } @media (min-width: 768px) { .connections-title { font-size: 1.9rem; } .connections-subtitle { font-size: 1.05rem; } .connections-loading-animation { width: 250px; height: 140px; } .connection-node { width: 14px; height: 14px; } .connections-loading-text { font-size: 1.1rem; } .connections-insights-text { font-size: 1.1rem; padding: 2.5rem; } } @media (max-width: 680px) { .connections-header { padding-top: 3rem; } .connections-header .back-button { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .connections-loading-animation { width: 180px; height: 100px; } .connection-node { width: 10px; height: 10px; } } @media (max-width: 480px) { .connections-interface-container { padding: 0 1rem; } .connections-title { font-size: 1.4rem; } .connections-subtitle { font-size: 0.9rem; } .connections-loading-animation { width: 160px; height: 90px; } .connections-loading-text { font-size: 0.95rem; } .connections-insights-text { font-size: 0.95rem; padding: 1.5rem; } .connections-continue-button { min-width: 100%; font-size: 0.95rem; padding: 0.9rem 1.5rem; } } `; document.head.appendChild(styles); } } async generateConnectionsAnalysis(monthlyEntries, connectionsInterface) { try { if (monthlyEntries.length === 0) { this.displayConnectionsFallback(connectionsInterface); return; } // Create AI prompt for pattern analysis const prompt = this.createConnectionsPrompt(monthlyEntries); console.log('Requesting AI connections analysis...'); // Get AI insights with longer timeout for complex analysis const insights = await Promise.race([ aiHelper.ask(prompt), new Promise((_, reject) => setTimeout(() => reject(new Error('AI request timeout')), 20000) ) ]); if (insights && insights.trim().length > 0) { console.log('AI connections analysis received successfully'); this.displayConnectionsInsights(insights, connectionsInterface); } else { console.log('AI returned empty response for connections, showing fallback'); this.displayConnectionsFallback(connectionsInterface); } } catch (error) { console.error('AI connections analysis failed:', error); this.displayConnectionsFallback(connectionsInterface); } } createConnectionsPrompt(monthlyEntries) { const monthName = this.currentDate.toLocaleDateString('en-US', { month: 'long', year: 'numeric' }); let prompt = `As an AI companion, you are a calm, insightful, and gentle listener. You are reviewing a person's journal entries for a month to help them see their own journey. Here are the entries for ${monthName} (${monthlyEntries.length} entries): `; monthlyEntries.forEach((entry, index) => { const entryDate = new Date(entry.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); const excerpt = entry.text.length > 300 ? entry.text.substring(0, 300) + '...' : entry.text; prompt += `\n${entryDate}: "${excerpt}"\n`; }); prompt += ` Your task is to act as a thoughtful mirror. 1. **Identify a Core Theme**: Read through the entries and find a central theme, feeling, or journey that emerges over the month. 2. **Reflect it Back**: Begin by stating what you've noticed. For example, "Reading through your month, I see a thread about you creating more intentional space for yourself..." 3. **Ask a Gentle, Open-Ended Question**: Pose a single, thoughtful question that invites them to reflect on this theme. For instance, "Looking back, what do you think was the most significant part of that journey for you?" or "How does seeing that pattern now land with you?" 4. **Be Subtle**: Allude to their experiences and feelings without excessive quoting. Let your reflection show you've listened, rather than proving it with quotes. 5. **No Praise, No Advice**: Your role is to be an observant, curious partner. Do not praise their progress or offer solutions. Please write a calm, reflective response of 150-200 words that helps them see the patterns in their own thoughts.`; return prompt; } displayConnectionsInsights(insights, connectionsInterface) { const loadingSection = connectionsInterface.querySelector('.connections-loading-section'); const insightsSection = connectionsInterface.querySelector('.connections-insights-section'); const continueButton = connectionsInterface.querySelector('.connections-continue-button'); const title = connectionsInterface.querySelector('.connections-title'); // Update title const monthName = this.currentDate.toLocaleDateString('en-US', { month: 'long' }); title.textContent = `✨ Your ${monthName} patterns ✨`; // Hide loading, show insights loadingSection.style.display = 'none'; // Create insights content const insightsText = document.createElement('div'); insightsText.className = 'connections-insights-text'; insightsText.textContent = insights; insightsSection.appendChild(insightsText); // Show with animation insightsSection.style.display = 'block'; insightsSection.style.opacity = '0'; insightsSection.style.transform = 'translateY(20px)'; setTimeout(() => { insightsSection.style.transition = 'all 0.6s cubic-bezier(0.25, 0.1, 0.25, 1)'; insightsSection.style.opacity = '1'; insightsSection.style.transform = 'translateY(0)'; // Show continue button after insights appear setTimeout(() => { continueButton.style.display = 'block'; continueButton.style.opacity = '0'; continueButton.style.transform = 'translateY(20px)'; setTimeout(() => { continueButton.style.transition = 'all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1)'; continueButton.style.opacity = '1'; continueButton.style.transform = 'translateY(0)'; }, 100); }, 1000); }, 100); } displayConnectionsFallback(connectionsInterface) { const loadingSection = connectionsInterface.querySelector('.connections-loading-section'); const insightsSection = connectionsInterface.querySelector('.connections-insights-section'); const continueButton = connectionsInterface.querySelector('.connections-continue-button'); const title = connectionsInterface.querySelector('.connections-title'); const monthName = this.currentDate.toLocaleDateString('en-US', { month: 'long' }); title.textContent = `Your ${monthName} reflection journey`; loadingSection.style.display = 'none'; const fallbackText = document.createElement('div'); fallbackText.className = 'connections-insights-text'; fallbackText.textContent = `Your commitment to regular journaling this month shows meaningful self-reflection. Each entry represents a moment of mindfulness and personal growth. The patterns in your thoughts and feelings, while unique to you, demonstrate the beautiful complexity of human experience and the value of taking time to understand yourself better.`; insightsSection.appendChild(fallbackText); insightsSection.style.display = 'block'; continueButton.style.display = 'block'; } formatDate(date) { // Use local date instead of UTC to prevent timezone issues const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); return `${year}-${month}-${day}`; } }