Moon Phase Compatibility Calculator
Analyzing Your Details...
Finding your moon phase...
`;printWindow.document.write(printContent);
printWindow.document.close();// Wait for content to load then print
printWindow.onload = function () {
printWindow.print();
printWindow.close();
};
}// Share functionality
function shareResults() {
try {
// Extract moon phase information from the current results
const moonImages = moonVisualization.querySelectorAll('.moon-image');
const reportContent = reportSection.querySelector('.report-content');let moonPhases = [];
let description = '';if (currentMode === 'single') {
// Single mode - extract one moon phase
const moonImage = moonImages[0];
if (moonImage && moonImage.alt) {
const altText = moonImage.alt;
const moonPhaseMatch = altText.match(/(\w+(?:\s+\w+)*)\s+moon phase/);
if (moonPhaseMatch) {
moonPhases.push(moonPhaseMatch[1]);
}
}// Extract description from report content
const firstParagraph = reportContent.querySelector('p');
if (firstParagraph) {
description = firstParagraph.textContent.trim();
// Limit to 1-2 lines (approximately 150 characters)
if (description.length > 150) {
description = description.substring(0, 150) + '...';
}
}
} else {
// Couple mode - extract both moon phases
moonImages.forEach((moonImage, index) => {
if (moonImage && moonImage.alt) {
const altText = moonImage.alt;
const moonPhaseMatch = altText.match(/(\w+(?:\s+\w+)*)\s+moon phase/);
if (moonPhaseMatch) {
moonPhases.push(moonPhaseMatch[1]);
}
}
});// Extract description from compatibility score or first paragraph
const compatibilityScore = reportContent.querySelector('.compatibility-score');
if (compatibilityScore) {
const scoreText = compatibilityScore.textContent.trim();
description = scoreText;
if (description.length > 150) {
description = description.substring(0, 150) + '...';
}
} else {
const firstParagraph = reportContent.querySelector('p');
if (firstParagraph) {
description = firstParagraph.textContent.trim();
if (description.length > 150) {
description = description.substring(0, 150) + '...';
}
}
}
}// Create share text
let shareText = '';
if (moonPhases.length > 0) {
if (currentMode === 'single') {
shareText = `My moon phase: ${moonPhases[0]}. ${description}`;
} else {
shareText = `Our moon phases: ${moonPhases[0]} & ${moonPhases[1]}. ${description}`;
}
} else {
shareText = description || 'Check out my moon phase compatibility results!';
}shareText += `\n\nCalculated using: ${window.location.href}`;// Try Web Share API first
if (navigator.share) {
navigator.share({
title: 'Moon Phase Compatibility Results',
text: shareText,
url: window.location.href
}).catch((error) => {
console.log('Web Share API failed:', error);
fallbackCopy(shareText);
});
} else {
// Fallback to copy functionality
fallbackCopy(shareText);
}
} catch (error) {
console.error('Share error:', error);
alert('Error sharing results. Please try again.');
}
}// Social Media Card Generator// Social Media Card Generator
const generateCardBtn = document.getElementById('generateCardBtn');
if (generateCardBtn) {
// Show/hide button with other action buttons
const observer = new MutationObserver(() => {
if (savePdfBtn.style.display !== 'none') {
generateCardBtn.style.display = 'inline-block';
} else {
generateCardBtn.style.display = 'none';
}
});
observer.observe(savePdfBtn, { attributes: true, attributeFilter: ['style'] });generateCardBtn.addEventListener('click', generateSocialCard);
}function generateSocialCard() {
const canvas = document.createElement('canvas');
canvas.width = 1200;
canvas.height = 630;
const ctx = canvas.getContext('2d');// Background gradient
const gradient = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
gradient.addColorStop(0, '#663399');
gradient.addColorStop(1, '#FF3366');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);// Get names from the profile headers
const personNames = moonVisualization.querySelectorAll('.person-name');
const name1 = personNames[0]?.textContent.trim() || '';
const name2 = personNames[1]?.textContent.trim() || '';// Title
ctx.fillStyle = '#FFFFFF';
ctx.font = 'bold 60px Arial';
ctx.textAlign = 'center';
ctx.fillText('Moon Phase Compatibility', canvas.width / 2, 100);// Add names if present
if (name1 && name2 && currentMode === 'couple') {
ctx.font = '40px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.fillText(`${name1} & ${name2}`, canvas.width / 2, 170);
} else if (name1 && currentMode === 'single') {
ctx.font = '40px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.9)';
ctx.fillText(name1, canvas.width / 2, 170);
}// Get score
const scoreElement = reportSection.querySelector('.compatibility-score h2');
if (scoreElement) {
ctx.font = 'bold 120px Arial';
ctx.fillStyle = '#FFFFFF';
ctx.fillText(scoreElement.textContent, canvas.width / 2, 320);const labelElement = reportSection.querySelector('.compatibility-label');
if (labelElement) {
ctx.font = '36px Arial';
ctx.fillText(labelElement.textContent, canvas.width / 2, 380);
}
}// Get moon phases and display them
const moonDetails = moonVisualization.querySelectorAll('.moon-details');
if (moonDetails.length > 0) {
ctx.font = '28px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
let yPos = 470;moonDetails.forEach((detail, index) => {
const divs = detail.querySelectorAll('div');
if (divs.length >= 2) {
const moonPhase = divs[0].textContent.trim();
const zodiacSign = divs[1].textContent.trim();
const personName = personNames[index]?.textContent.trim() || `Person ${index + 1}`;if (currentMode === 'couple') {
ctx.fillText(`${personName}: ${moonPhase} • ${zodiacSign}`, canvas.width / 2, yPos);
yPos += 45;
} else if (index === 0) {
// Single mode - only show first person
ctx.fillText(`${moonPhase} • ${zodiacSign}`, canvas.width / 2, yPos);
}
}
});
}// Footer
ctx.font = '24px Arial';
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
ctx.fillText('couplesuite.com', canvas.width / 2, canvas.height - 40);// Download
canvas.toBlob((blob) => {
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'moon-compatibility-card.png';
a.click();
URL.revokeObjectURL(url);
alert('✓ Share card downloaded!');
});
}// Fallback copy function
function fallbackCopy(text) {
if (navigator.clipboard) {
navigator.clipboard.writeText(text).then(() => {
alert('Results copied to clipboard!');
}).catch(() => {
// Final fallback - create temporary textarea
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('Results copied to clipboard!');
});
} else {
// Final fallback - create temporary textarea
const textarea = document.createElement('textarea');
textarea.value = text;
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
alert('Results copied to clipboard!');
}
}// Initialize the calculator
resetDisplay();// Preload moon phase images for better UX
Object.values(moonPhaseImages).forEach(url => {
const img = new Image();
img.src = url;
});
});
