`; }// Share results function shareResults() { if (!testResults) { showNotification('Please run a test first', 'error'); return; } const shareData = { title: 'Mobile-Friendly Test Results', text: `I tested ${testResults.url} and got ${testResults.overallScore}/100 on mobile-friendliness!`, url: window.location.href }; if (navigator.share) { navigator.share(shareData) .then(() => showNotification('Results shared successfully!')) .catch(() => copyToClipboard(shareData.text)); } else { copyToClipboard(shareData.text); } }// Copy to clipboard function copyToClipboard(text) { navigator.clipboard.writeText(text) .then(() => showNotification('Results copied to clipboard!')) .catch(() => showNotification('Failed to copy to clipboard', 'error')); }// Generate recommendations function generateRecommendations() { const recommendations = []; const scores = testResults.metrics; if (scores.loadTime < 70) { recommendations.push('Optimize images and minify CSS/JavaScript files to improve load time'); recommendations.push('Consider using a Content Delivery Network (CDN)'); recommendations.push('Enable browser caching for static resources'); } if (scores.responsive < 70) { recommendations.push('Implement responsive design using CSS media queries'); recommendations.push('Test your website on different screen sizes and devices'); recommendations.push('Use relative units (%, em, rem) instead of fixed pixels'); } if (scores.tapTargets < 70) { recommendations.push('Increase tap target sizes to at least 44x44px for better touch interaction'); recommendations.push('Add adequate spacing between interactive elements (minimum 8px)'); recommendations.push('Ensure buttons and links have clear visual feedback on touch'); } if (scores.fonts < 70) { recommendations.push('Use font sizes of at least 16px for better mobile readability'); recommendations.push('Ensure sufficient contrast between text and background (minimum 4.5:1 ratio)'); recommendations.push('Use line spacing of 1.5 times the font size for better readability'); } if (scores.viewport < 100) { recommendations.push('Add viewport meta tag:'); recommendations.push('Test your website with different viewport configurations'); } if (scores.images < 70) { recommendations.push('Optimize images using srcset attribute for different screen sizes'); recommendations.push('Implement lazy loading for images below the fold'); recommendations.push('Compress images and use modern formats like WebP'); } if (scores.seo < 70) { recommendations.push('Add mobile-friendly meta tags (theme-color, apple-mobile-web-app-capable)'); recommendations.push('Create a mobile sitemap and submit to search engines'); recommendations.push('Ensure your site loads quickly on mobile networks'); } if (recommendations.length === 0) { return '🎉 Excellent! Your website is well optimized for mobile devices.\n\nContinue monitoring performance regularly to maintain these great results.'; } return recommendations.join('\n'); }// Get key findings function getKeyFindings() { const findings = []; const scores = testResults.metrics; const data = testResults.analysisData; if (testResults.overallScore >= 90) { findings.push('Excellent mobile performance across all metrics'); findings.push('Well-optimized for all device types'); findings.push('Meets industry standards for mobile usability'); } else if (testResults.overallScore >= 70) { findings.push('Good mobile performance with room for improvement'); findings.push('Generally responsive across devices'); findings.push('Most mobile usability requirements met'); } else if (testResults.overallScore >= 50) { findings.push('Average mobile performance - needs optimization'); findings.push('Some mobile usability issues detected'); findings.push('Improvements needed for better user experience'); } else { findings.push('Poor mobile performance - significant improvements needed'); findings.push('Major mobile usability issues detected'); findings.push('Immediate action required for mobile optimization'); } // Add specific findings based on scores Object.entries(scores).forEach(([metricId, score]) => { const metric = metrics.find(m => m.id === metricId); if (metric && score < 60) { findings.push(`${metric.name} needs attention (score: ${score}/100)`); } }); // Add data-based findings if (data.loadTime > 3000) { findings.push(`Slow load time detected (${Math.round(data.loadTime)}ms)`); } if (!data.hasViewport) { findings.push('Missing viewport meta tag - essential for mobile rendering'); } if (data.domSize > 2000) { findings.push(`Large DOM size (${data.domSize} elements) may affect performance`); } return findings; }// Get score description function getScoreDescription(score) { if (score >= 90) return 'Excellent - Your website provides an outstanding mobile experience with optimal performance across all devices.'; if (score >= 70) return 'Good - Your website offers a solid mobile experience with minor areas for improvement.'; if (score >= 50) return 'Fair - Your website works on mobile but needs significant improvements for better user experience.'; return 'Poor - Your website needs major improvements to provide an acceptable mobile experience.'; }// Reset test function resetTest() { testInProgress = false; analysisComplete = false; currentTest = null; testResults = null; websitePreviewLoaded = false; // Reset UI elements.loading.style.display = 'none'; elements.devicePreview.style.display = 'none'; elements.performanceSection.style.display = 'none'; elements.actionButtons.style.display = 'none'; // Reset scores elements.overallScore.textContent = '0'; elements.scoreStatus.textContent = 'Calculating...'; elements.scoreFill.style.width = '0%'; // Reset metric cards metrics.forEach(metric => { const scoreElement = document.getElementById(`${metric.id}Score`); const barElement = document.getElementById(`${metric.id}Bar`); if (scoreElement) scoreElement.textContent = '-'; if (barElement) { barElement.style.width = '0%'; barElement.style.background = ''; } }); // Reset iframes and loading indicators [elements.mobileScreen, elements.tabletScreen, elements.desktopScreen].forEach(iframe => { iframe.src = 'about:blank'; iframe.style.display = 'none'; }); [elements.mobileLoading, elements.tabletLoading, elements.desktopLoading].forEach(loading => { loading.style.display = 'block'; loading.innerHTML = '

Loading preview...

'; }); [elements.mobileError, elements.tabletError, elements.desktopError].forEach(error => { error.style.display = 'none'; }); // Reset device tabs document.querySelectorAll('.device-tab').forEach((tab, index) => { if (index === 0) { tab.classList.add('active'); } else { tab.classList.remove('active'); } }); document.querySelectorAll('.device-frame').forEach((frame, index) => { if (index === 0) { frame.classList.add('active'); } else { frame.classList.remove('active'); } }); // Reset test button elements.testBtn.disabled = false; elements.testBtn.innerHTML = 'Start Real Test'; // Focus URL input with example URL elements.urlInput.value = 'https://www.google.com'; elements.urlInput.focus(); showNotification('Ready for new test. Enter a website URL above.'); }// Reset test state function resetTestState() { testInProgress = false; elements.testBtn.disabled = false; elements.testBtn.innerHTML = 'Start Real Test'; elements.loading.style.display = 'none'; }// Helper functions function animateValue(element, start, end, duration) { if (!element) return; let startTimestamp = null; const step = (timestamp) => { if (!startTimestamp) startTimestamp = timestamp; const progress = Math.min((timestamp - startTimestamp) / duration, 1); const value = Math.floor(progress * (end - start) + start); element.textContent = value; if (progress < 1) { window.requestAnimationFrame(step); } }; window.requestAnimationFrame(step); }function getScoreStatus(score) { if (score >= 90) return 'Excellent'; if (score >= 70) return 'Good'; if (score >= 50) return 'Fair'; return 'Needs Improvement'; }function getScoreGradient(score) { if (score >= 90) return 'linear-gradient(135deg, #27ae60 0%, #229954 100%)'; if (score >= 70) return 'linear-gradient(135deg, #f39c12 0%, #d68910 100%)'; if (score >= 50) return 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)'; return 'linear-gradient(135deg, #c0392b 0%, #922b21 100%)'; }function getScoreColor(score) { if (score >= 90) return '#27ae60'; if (score >= 70) return '#f39c12'; if (score >= 50) return '#e74c3c'; return '#c0392b'; }function getMetricColor(score) { if (score >= 80) return '#27ae60'; if (score >= 60) return '#f39c12'; if (score >= 40) return '#e74c3c'; return '#c0392b'; }function showNotification(message, type = 'success') { elements.notificationText.textContent = message; elements.notification.className = 'notification'; if (type === 'error') { elements.notification.classList.add('error'); elements.notification.querySelector('i').className = 'fas fa-exclamation-circle'; } else if (type === 'warning') { elements.notification.classList.add('warning'); elements.notification.querySelector('i').className = 'fas fa-exclamation-triangle'; } else { elements.notification.querySelector('i').className = 'fas fa-check-circle'; } elements.notification.style.display = 'flex'; setTimeout(() => { elements.notification.style.display = 'none'; }, 3000); }function isValidUrl(string) { try { new URL(string); return true; } catch (_) { return false; } }// Initialize the tool init(); // Auto-start test for demo setTimeout(() => { if (!testInProgress) { startTest(); } }, 1000);