Your screen is now being tested in fullscreen mode.
Look for any display issues, dead pixels, or color problems.
Think of an eye exam for your monitor - that's screen resolution testing! It checks how sharp, colorful, and clear your display really is.
Screen resolution testing reveals your display's true capabilities, pixel density, color accuracy, and potential issues.
๐ฎ
Gaming Setup
Optimize monitor settings for the best gaming experience
๐ผ
Work Setup
Ensure professional displays meet quality standards
๐จ
Creative Work
Color accuracy testing for design and photography
๐
Monitor Shopping
Compare display specifications before purchasing
๐ง
Technical Support
Diagnose display problems and dead pixels
๐ฑ
Device Testing
Test phones, tablets, and laptop screens
๐ฏ Choose Your Learning Mode
Choose Your Testing Level
๐ข
Basic
Essential display information
๐ก
Advanced
Detailed analysis + visual tests
๐ด
Professional
Complete technical analysis
`;
toast.style.background = 'linear-gradient(135deg, #4CAF50, #45a049)';
toast.style.maxWidth = '300px';
toast.style.bottom = '80px';
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 4000);
},
updateDifficultyUI() {
const sections = {
'beginner': ['basicControls'],
'intermediate': ['basicControls', 'advancedControls'],
'expert': ['basicControls', 'advancedControls', 'expertControls']
};
// Hide all sections first
document.querySelectorAll('.control-section').forEach(section => {
if (section.id && section.id.includes('Controls')) {
section.classList.add('hidden');
}
});
// Show sections for current difficulty
sections[this.currentDifficulty].forEach(sectionId => {
const section = document.getElementById(sectionId);
if (section) section.classList.remove('hidden');
});
// Update difficulty selector UI
document.querySelectorAll('.difficulty-btn').forEach(option => {
option.classList.remove('active');
});
document.querySelector(`[data-level="${this.currentDifficulty}"]`)?.classList.add('active');
},
runInitialTest() {
// Run the screen test automatically on page load
setTimeout(() => {
runScreenTest();
}, 500);
}
};
// AI ๋ชจ๋ฌ ์ํ ๊ด๋ฆฌ
const aiModalState = {
currentView: 'selector',
apiKey: localStorage.getItem('geminiApiKey') || ''
};
// ========== MAIN TOOL FUNCTIONS ==========
// Run complete screen test
function runFullTest() {
ScreenTestState.testCount++;
runScreenTest();
// Track usage
trackEvent('full_test_run', { test_count: ScreenTestState.testCount });
// Unlock achievements
if (ScreenTestState.testCount === 1) {
OnboardingManager.unlockAchievement('first_test', '๐ฅ๏ธ First Test', 'Ran your first screen test!');
}
if (ScreenTestState.testCount >= 5) {
OnboardingManager.unlockAchievement('test_expert', '๐ Test Expert', 'Ran 5+ screen tests!');
}
// Show OTA after a few tests
if (ScreenTestState.testCount >= 2) {
setTimeout(showOTA, 2000);
}
// Update button text
document.getElementById('testButton').innerHTML = '๐ Test Complete - Run Again';
}
// Run screen test and update all displays
function runScreenTest() {
ScreenTestState.hasRun = true;
// Get screen information
const screen = window.screen;
const viewport = {
width: window.innerWidth,
height: window.innerHeight
};
const screenWidth = screen.width;
const screenHeight = screen.height;
const pixelRatio = window.devicePixelRatio || 1;
// Calculate additional metrics
const aspectRatio = calculateAspectRatio(screenWidth, screenHeight);
const orientation = screenWidth > screenHeight ? 'Landscape' : 'Portrait';
const colorDepth = screen.colorDepth || screen.pixelDepth || 24;
const pixelDensity = Math.round(96 * pixelRatio);
// Update main display
document.getElementById('mainResolution').textContent = `${screenWidth} ร ${screenHeight}`;
document.getElementById('resolutionDetails').textContent =
`${pixelRatio > 1 ? 'High-density' : 'Standard'} display โข ${aspectRatio} aspect ratio โข ${colorDepth}-bit color`;
// Update all test cards
document.getElementById('screenResolution').textContent = `${screenWidth} ร ${screenHeight}`;
document.getElementById('viewportSize').textContent = `${viewport.width} ร ${viewport.height}`;
document.getElementById('pixelRatio').textContent = `${pixelRatio}`;
document.getElementById('colorDepth').textContent = `${colorDepth}-bit`;
document.getElementById('aspectRatio').textContent = aspectRatio;
document.getElementById('orientation').textContent = orientation;
// Advanced/Expert only updates
if (OnboardingManager.currentDifficulty !== 'beginner') {
const browserEngine = detectBrowserEngine();
const touchSupport = 'ontouchstart' in window ? 'Yes' : 'No';
const hardwareAccel = detectHardwareAcceleration();
const hdrSupport = detectHDRSupport();
const refreshRate = estimateRefreshRate();
document.getElementById('browserEngine').textContent = browserEngine;
document.getElementById('touchSupport').textContent = touchSupport;
document.getElementById('hardwareAccel').textContent = hardwareAccel;
document.getElementById('hdrSupport').textContent = hdrSupport;
document.getElementById('pixelDensity').textContent = `${pixelDensity} DPI`;
document.getElementById('refreshRate').textContent = `${refreshRate} Hz`;
}
// Store results
ScreenTestState.results = {
screenWidth,
screenHeight,
viewportWidth: viewport.width,
viewportHeight: viewport.height,
pixelRatio,
colorDepth,
aspectRatio,
orientation,
pixelDensity,
browserEngine: detectBrowserEngine(),
touchSupport: 'ontouchstart' in window,
timestamp: new Date().toISOString()
};
}
// Calculate aspect ratio
function calculateAspectRatio(width, height) {
const gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
const divisor = gcd(width, height);
const w = width / divisor;
const h = height / divisor;
// Common aspect ratios
const ratios = {
'16:9': [16, 9],
'16:10': [16, 10],
'4:3': [4, 3],
'21:9': [21, 9],
'32:9': [32, 9],
'5:4': [5, 4],
'3:2': [3, 2]
};
for (const [ratio, [rw, rh]] of Object.entries(ratios)) {
if (Math.abs(w - rw) <= 1 && Math.abs(h - rh) <= 1) {
return ratio;
}
}
return `${Math.round(w)}:${Math.round(h)}`;
}
// Detect browser engine
function detectBrowserEngine() {
const userAgent = navigator.userAgent;
if (userAgent.includes('WebKit') && userAgent.includes('Chrome') && !userAgent.includes('Edge')) {
return 'Blink';
} else if (userAgent.includes('WebKit') && userAgent.includes('Safari') && !userAgent.includes('Chrome')) {
return 'WebKit';
} else if (userAgent.includes('Gecko') && userAgent.includes('Firefox')) {
return 'Gecko';
} else if (userAgent.includes('Edge')) {
return 'EdgeHTML';
} else if (userAgent.includes('Trident')) {
return 'Trident';
}
return 'Unknown';
}
// Detect hardware acceleration
function detectHardwareAcceleration() {
try {
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
return gl ? 'Enabled' : 'Disabled';
} catch (e) {
return 'Unknown';
}
}
// Detect HDR support
function detectHDRSupport() {
try {
if (window.screen && window.screen.colorGamut) {
return window.screen.colorGamut === 'rec2020' ? 'Supported' : 'Limited';
}
return 'Unknown';
} catch (e) {
return 'Unknown';
}
}
// Estimate refresh rate
function estimateRefreshRate() {
// Simple estimation based on requestAnimationFrame
// This is not perfectly accurate but gives a rough estimate
const ua = navigator.userAgent;
if (ua.includes('Mobile') || ua.includes('Android') || ua.includes('iPhone')) {
return '60-120'; // Most mobile devices
} else {
return '60-144'; // Most desktop monitors
}
}
// Enter fullscreen test
function enterFullscreen() {
const container = document.getElementById('fullscreenContainer');
const resolution = document.getElementById('fullscreenResolution');
// Update fullscreen display
resolution.textContent = `${window.screen.width} ร ${window.screen.height}`;
// Show fullscreen container
container.classList.add('active');
// Try to enter fullscreen API if available
if (container.requestFullscreen) {
container.requestFullscreen().catch(() => {
// Fullscreen API failed, but we still show our fullscreen overlay
});
} else if (container.webkitRequestFullscreen) {
container.webkitRequestFullscreen().catch(() => {});
} else if (container.msRequestFullscreen) {
container.msRequestFullscreen().catch(() => {});
}
OnboardingManager.unlockAchievement('fullscreen_test', '๐ฅ๏ธ Fullscreen Tester', 'Ran fullscreen display test!');
trackEvent('fullscreen_test');
}
// Exit fullscreen test
function exitFullscreen() {
const container = document.getElementById('fullscreenContainer');
container.classList.remove('active');
// Exit fullscreen API if available
if (document.exitFullscreen) {
document.exitFullscreen().catch(() => {});
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen().catch(() => {});
} else if (document.msExitFullscreen) {
document.msExitFullscreen().catch(() => {});
}
}
// Refresh test
function refreshTest() {
runScreenTest();
showNotification('๐ Screen analysis refreshed!', 'success');
trackEvent('test_refreshed');
}
// Copy results to clipboard
function copyResults() {
if (!ScreenTestState.hasRun) {
showNotification('Please run a test first!', 'warning');
return;
}
const results = ScreenTestState.results;
const text = `Screen Resolution Test Results:
Resolution: ${results.screenWidth} ร ${results.screenHeight}
Viewport: ${results.viewportWidth} ร ${results.viewportHeight}
Pixel Ratio: ${results.pixelRatio}
Color Depth: ${results.colorDepth}-bit
Aspect Ratio: ${results.aspectRatio}
Orientation: ${results.orientation}
Pixel Density: ~${results.pixelDensity} DPI
Touch Support: ${results.touchSupport ? 'Yes' : 'No'}
Browser Engine: ${results.browserEngine}
Tested at: ${new Date(results.timestamp).toLocaleString()}
Generated by: WIA Pin Code Screen Resolution Test`;
navigator.clipboard.writeText(text).then(() => {
showNotification('๐ Results copied to clipboard!', 'success');
OnboardingManager.unlockAchievement('results_copied', '๐ Data Sharer', 'Copied test results!');
trackEvent('results_copied');
}).catch(() => {
// Fallback for older browsers
const textArea = document.createElement('textarea');
textArea.value = text;
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
showNotification('๐ Results copied to clipboard!', 'success');
});
}
// Export results as JSON
function exportResults() {
if (!ScreenTestState.hasRun) {
showNotification('Please run a test first!', 'warning');
return;
}
const data = {
...ScreenTestState.results,
userAgent: navigator.userAgent,
timestamp: new Date().toISOString(),
testTool: 'WIA Pin Code Screen Resolution Test'
};
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `screen-test-results-${new Date().toISOString().split('T')[0]}.json`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
showNotification('๐ Results exported successfully!', 'success');
OnboardingManager.unlockAchievement('data_export', '๐ Data Expert', 'Exported test results!');
trackEvent('results_exported');
}
// Generate detailed report
function generateReport() {
if (!ScreenTestState.hasRun) {
showNotification('Please run a test first!', 'warning');
return;
}
const results = ScreenTestState.results;
const report = `SCREEN RESOLUTION TEST REPORT
Generated by WIA Pin Code Screen Resolution Test
Timestamp: ${new Date(results.timestamp).toLocaleString()}
=== BASIC DISPLAY INFORMATION ===
Screen Resolution: ${results.screenWidth} ร ${results.screenHeight}
Viewport Size: ${results.viewportWidth} ร ${results.viewportHeight}
Aspect Ratio: ${results.aspectRatio}
Orientation: ${results.orientation}
=== DISPLAY QUALITY METRICS ===
Device Pixel Ratio: ${results.pixelRatio}x
Estimated Pixel Density: ~${results.pixelDensity} DPI
Color Depth: ${results.colorDepth}-bit
Display Type: ${results.pixelRatio > 1 ? 'High-density (Retina/HiDPI)' : 'Standard density'}
=== TECHNICAL SPECIFICATIONS ===
Browser Engine: ${results.browserEngine}
Touch Support: ${results.touchSupport ? 'Supported' : 'Not supported'}
User Agent: ${navigator.userAgent}
=== RECOMMENDATIONS ===
${generateRecommendations(results)}
=== ABOUT THIS TEST ===
This report was generated by WIA Pin Code's Screen Resolution Test tool.
The tool analyzes your display capabilities and provides detailed
technical specifications about your screen and browser environment.
For more tools and resources, visit: https://wiapincode.com
`;
const blob = new Blob([report], { type: 'text/plain' });
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = `screen-test-report-${new Date().toISOString().split('T')[0]}.txt`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
showNotification('๐ Detailed report generated!', 'success');
OnboardingManager.unlockAchievement('report_generated', '๐ Report Master', 'Generated detailed analysis report!');
trackEvent('report_generated');
}
// Generate recommendations based on test results
function generateRecommendations(results) {
let recommendations = '';
// Resolution recommendations
if (results.screenWidth < 1920) {
recommendations += 'โข Consider upgrading to a Full HD (1920ร1080) or higher resolution monitor for better clarity.\n';
} else if (results.screenWidth >= 3840) {
recommendations += 'โข You have a 4K+ display! Make sure to use appropriate scaling for comfortable viewing.\n';
}
// Pixel ratio recommendations
if (results.pixelRatio > 1) {
recommendations += 'โข Your high-density display provides excellent sharpness. Enjoy crisp text and images!\n';
} else {
recommendations += 'โข Standard density display detected. Consider a high-DPI monitor for sharper visuals.\n';
}
// Color depth recommendations
if (results.colorDepth < 24) {
recommendations += 'โข Your display has limited color depth. Consider upgrading for better color accuracy.\n';
} else if (results.colorDepth >= 30) {
recommendations += 'โข Excellent color depth! Perfect for professional photo/video editing.\n';
}
// Aspect ratio recommendations
if (results.aspectRatio === '21:9' || results.aspectRatio === '32:9') {
recommendations += 'โข Ultrawide display detected! Great for productivity and immersive gaming.\n';
}
if (!recommendations) {
recommendations = 'โข Your display configuration looks good! No specific recommendations at this time.\n';
}
return recommendations;
}
// Set difficulty level
function setDifficulty(level) {
OnboardingManager.currentDifficulty = level;
OnboardingManager.updateDifficultyUI();
// Re-run test to show/hide appropriate sections
if (ScreenTestState.hasRun) {
runScreenTest();
}
// Show achievement for trying different difficulties
if (level === 'expert') {
OnboardingManager.unlockAchievement('expert_mode', '๐ด Expert Mode', 'Unlocked professional analysis features!');
}
trackEvent('difficulty_changed', { level });
}
// ========== UTILITY FUNCTIONS ==========
// Show notification toast
function showNotification(message, type = 'success') {
const toast = document.createElement('div');
toast.className = `toast ${type}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => {
toast.remove();
}, 3000);
}
// Show OTA section (dynamic)
function showOTA() {
const otaContainer = document.getElementById('otaContainer');
if (otaContainer && (otaContainer.style.display === 'none' || !otaContainer.style.display)) {
otaContainer.style.display = 'block';
// Attention-grabbing pulse effect
setTimeout(() => {
const otaHeader = document.querySelector('.ota-header h3');
if (otaHeader) {
otaHeader.style.animation = 'pulse 1s ease-in-out';
}
}, 100);
}
}
// Analytics tracking
function trackEvent(eventName, data = {}) {
if (typeof gtag !== 'undefined') {
gtag('event', eventName, {
'event_category': TOOL_CONFIG.category,
'event_label': TOOL_CONFIG.name,
...data
});
}
}
// ========== AI ASSISTANT FUNCTIONS ==========
// AI ๋ชจ๋ฌ ์ด๊ธฐ
function openAIModal() {
const modal = document.getElementById('aiModal');
if(modal) modal.classList.add('show');
// ํ์ฌ ์ํ์ ๋ฐ๋ผ ์ ์ ํ ํ๋ฉด ํ์
if (aiModalState.apiKey && aiModalState.currentView === 'gemini') {
showGeminiChat();
} else {
showAISelector();
}
updateAPIKeyStatus();
}
// AI ๋ชจ๋ฌ ๋ซ๊ธฐ
function closeAIModal() {
const modal = document.getElementById('aiModal');
if(modal) modal.classList.remove('show');
// 300ms ํ ์ํ ๋ฆฌ์
(์ ๋๋ฉ์ด์
์๋ฃ ํ)
setTimeout(() => {
aiModalState.currentView = 'selector';
showAISelector();
}, 300);
}
// AI ์ ํ ํ๋ฉด ํ์
function showAISelector() {
document.getElementById('aiModalTitle').textContent = 'Choose Your AI Assistant';
document.getElementById('aiSelector').style.display = 'flex';
document.getElementById('geminiChat').style.display = 'none';
document.getElementById('apiKeySetup').style.display = 'none';
aiModalState.currentView = 'selector';
}
// Gemini ์ฑํ
ํ๋ฉด ํ์
function showGeminiChat() {
document.getElementById('aiModalTitle').innerHTML = 'โจ Gemini AI Assistant';
document.getElementById('aiSelector').style.display = 'none';
document.getElementById('geminiChat').style.display = 'flex';
document.getElementById('apiKeySetup').style.display = 'none';
aiModalState.currentView = 'gemini';
// ์ด๊ธฐ ๋ฉ์์ง๊ฐ ์์ผ๋ฉด ์ถ๊ฐ
const chatMessages = document.getElementById('chatMessages');
if (!chatMessages.innerHTML.trim()) {
addMessage('assistant', `Hello! I can help you with:
โข Understanding your screen test results
โข Explaining display specifications
โข Recommending monitor upgrades
โข Troubleshooting display issues
โข Optimizing screen settings
What would you like to know about your display?`);
}
}
// API ํค ์ค์ ํ๋ฉด ํ์
function showAPIKeySetup() {
document.getElementById('aiModalTitle').textContent = 'Setup Gemini API';
document.getElementById('aiSelector').style.display = 'none';
document.getElementById('geminiChat').style.display = 'none';
document.getElementById('apiKeySetup').style.display = 'block';
aiModalState.currentView = 'setup';
}
// AI ์ ํ ์ฒ๋ฆฌ
function selectAI(aiType) {
switch(aiType) {
case 'chatgpt':
const toolContext = `I need help with Screen Resolution Testing. This is a tech utility on WIA Pin Code platform for analyzing display quality and specifications.`;
const chatUrl = `https://chat.openai.com/?q=${encodeURIComponent(toolContext)}`;
window.open(chatUrl, '_blank');
closeAIModal();
trackEvent('ai_selection', { ai_type: 'chatgpt' });
break;
case 'claude':
const claudeContext = `I need help with Screen Resolution Testing. This is a tech utility on WIA Pin Code platform for analyzing display quality and specifications.`;
const claudeUrl = `https://claude.ai/chat?q=${encodeURIComponent(claudeContext)}`;
window.open(claudeUrl, '_blank');
closeAIModal();
trackEvent('ai_selection', { ai_type: 'claude' });
break;
case 'gemini':
if (!aiModalState.apiKey) {
showAPIKeySetup();
} else {
showGeminiChat();
}
trackEvent('ai_selection', { ai_type: 'gemini' });
break;
}
}
// API ํค ์ ์ฅ
function saveGeminiApiKey() {
const apiKey = document.getElementById('geminiApiKeyInput').value.trim();
if (apiKey) {
localStorage.setItem('geminiApiKey', apiKey);
aiModalState.apiKey = apiKey;
showGeminiChat();
updateAPIKeyStatus();
} else {
alert('Please enter a valid API key');
}
}
// API ํค ์ํ ์
๋ฐ์ดํธ
function updateAPIKeyStatus() {
const statusEl = document.getElementById('apiKeyStatus');
if (aiModalState.apiKey) {
statusEl.innerHTML = 'Change API Key';
} else {
statusEl.textContent = 'No API key set';
}
}
// ์ฑํ
๋ฉ์์ง ์ถ๊ฐ
function addMessage(type, content) {
const chatMessages = document.getElementById('chatMessages');
const messageDiv = document.createElement('div');
messageDiv.className = `message ${type}`;
if (type === 'user') {
messageDiv.innerHTML = `You: ${content}`;
} else {
messageDiv.innerHTML = `โจ Gemini:
${content.replace(/\n/g, '
')}`;
}
chatMessages.appendChild(messageDiv);
chatMessages.scrollTop = chatMessages.scrollHeight;
}
// Gemini์ ๋ฉ์์ง ์ ์ก
async function sendToGemini() {
const input = document.getElementById('geminiInput');
const message = input.value.trim();
if (!message) return;
// ์ฌ์ฉ์ ๋ฉ์์ง ์ถ๊ฐ
addMessage('user', message);
input.value = '';
// ๋ก๋ฉ ํ์
const loadingMsg = document.createElement('div');
loadingMsg.className = 'message assistant';
loadingMsg.innerHTML = 'โจ Gemini:
Analyzing display data...';
loadingMsg.id = 'loading-message';
document.getElementById('chatMessages').appendChild(loadingMsg);
try {
const contextData = ScreenTestState.hasRun ? JSON.stringify(ScreenTestState.results, null, 2) : 'No test data available yet';
const response = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${aiModalState.apiKey}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
contents: [{
parts: [{
text: `Context: User is using Screen Resolution Test tool on WIA Pin Code platform.
This tool analyzes display quality, resolution, pixel density, and technical specifications.
Current test results: ${contextData}
Provide helpful advice about display technology, monitor recommendations,
or explanations of technical terms. Be technical but accessible.
User question: ${message}`
}]
}],
generationConfig: {
temperature: 0.7,
maxOutputTokens: 1000
}
})
});
const data = await response.json();
// ๋ก๋ฉ ๋ฉ์์ง ์ ๊ฑฐ
document.getElementById('loading-message').remove();
if (data.candidates && data.candidates[0] && data.candidates[0].content) {
const reply = data.candidates[0].content.parts[0].text;
addMessage('assistant', reply);
} else {
addMessage('assistant', 'I apologize, but I cannot analyze that right now. Please try again.');
}
} catch (error) {
// ๋ก๋ฉ ๋ฉ์์ง ์ ๊ฑฐ
document.getElementById('loading-message')?.remove();
if (error.message.includes('API key')) {
addMessage('error', 'Invalid API key. Please check your API key and try again.');
showAPIKeySetup();
} else {
addMessage('error', 'Failed to connect to Gemini. Please check your internet connection and try again.');
}
}
}
// ========== GLOBAL FUNCTIONS ==========
// Start tutorial (global for onboarding button)
function startTutorial() {
OnboardingManager.startTutorial();
}
// Skip onboarding (global for onboarding button)
function skipOnboarding() {
OnboardingManager.skipOnboarding();
}
// ========== EVENT LISTENERS ==========
document.addEventListener('DOMContentLoaded', function() {
// Initialize onboarding
OnboardingManager.init();
// AI ๋ฒํผ ์ด๋ฒคํธ
document.getElementById('aiBtn').addEventListener('click', openAIModal);
// ๋ชจ๋ฌ ์ธ๋ถ ํด๋ฆญ์ ๋ซ๊ธฐ
document.getElementById('aiModal').addEventListener('click', function(e) {
if (e.target === this) {
closeAIModal();
}
});
// ์ํฐ ํค ์ง์ ๋ฐ ESC ํค๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ
document.addEventListener('keydown', function(e) {
if (e.key === 'Enter') {
const geminiInput = document.getElementById('geminiInput');
if (document.activeElement === geminiInput) {
sendToGemini();
}
}
// ESC ํค๋ก ๋ชจ๋ฌ ๋ซ๊ธฐ ๋๋ ํ์คํฌ๋ฆฐ ์ข
๋ฃ
if (e.key === 'Escape') {
const fullscreenContainer = document.getElementById('fullscreenContainer');
if (fullscreenContainer.classList.contains('active')) {
exitFullscreen();
} else {
closeAIModal();
}
}
});
// Window resize handler to update viewport dimensions
window.addEventListener('resize', function() {
if (ScreenTestState.hasRun) {
setTimeout(runScreenTest, 100); // Debounce resize events
}
});
// Orientation change handler
window.addEventListener('orientationchange', function() {
setTimeout(runScreenTest, 500); // Wait for orientation change to complete
});
// ์ด๊ธฐ API ํค ์ํ ์
๋ฐ์ดํธ
updateAPIKeyStatus();
updateCurrentYear();
updateToolCount();
});
// Track WIA Pin Code clicks for analytics
document.querySelectorAll('a[href*="wia"]').forEach(link => {
link.addEventListener('click', function() {
trackEvent('wia_link_click', { link: link.textContent });
});
});
// ========== DYNAMIC TOOL COUNT ==========
// Update tool count dynamically
async function updateToolCount() {
try {
const response = await fetch('/api/tool-count.php');
const data = await response.json();
// Update dynamic tools description
document.querySelectorAll('.dynamic-tools-count').forEach(el => {
el.textContent = `${data.count}+ free online tools in 211 languages. No signup, no fees, just tools that work.`;
});
// Update "All X+ Tools" links
document.querySelectorAll('.dynamic-count').forEach(el => {
const prefix = el.getAttribute('data-text') || '';
const suffix = el.getAttribute('data-suffix') || '';
const icon = el.textContent.split(' ')[0] || '';
el.textContent = `${icon} ${prefix} ${data.count}+ ${suffix}`;
});
} catch (error) {
// Fallback: use current actual count from server
const fallbackCount = 333;
document.querySelectorAll('.dynamic-tools-count').forEach(el => {
el.textContent = `${fallbackCount}+ free online tools in 211 languages. No signup, no fees, just tools that work.`;
});
document.querySelectorAll('.dynamic-count').forEach(el => {
const prefix = el.getAttribute('data-text') || '';
const suffix = el.getAttribute('data-suffix') || '';
const icon = el.textContent.split(' ')[0] || '';
el.textContent = `${icon} ${prefix} ${fallbackCount}+ ${suffix}`;
});
console.log('Tool count API not available, using current count:', fallbackCount);
}
}
// Update current year dynamically
function updateCurrentYear() {
const currentYear = new Date().getFullYear();
document.querySelectorAll('.current-year').forEach(el => {
el.textContent = currentYear;
});
}
// ========== ANALYTICS ==========
// Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXX');
// Track page view
trackEvent('page_view', {
tool: TOOL_CONFIG.name,
category: TOOL_CONFIG.category
});