44 lines
1.6 KiB
JavaScript
44 lines
1.6 KiB
JavaScript
|
const { chromium } = require('playwright');
|
||
|
|
|
||
|
|
(async () => {
|
||
|
|
const browser = await chromium.launch({ headless: false, slowMo: 500 });
|
||
|
|
const context = await browser.newContext({
|
||
|
|
viewport: { width: 1920, height: 1080 }
|
||
|
|
});
|
||
|
|
const page = await context.newPage();
|
||
|
|
|
||
|
|
console.log('📄 Loading English page...\n');
|
||
|
|
await page.goto('http://localhost:1999/?lang=en');
|
||
|
|
await page.waitForLoadState('networkidle');
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
|
||
|
|
console.log('🌍 Switching to Spanish (watch for smooth fade transition)...');
|
||
|
|
await page.click('button[hx-get*="lang=es"]');
|
||
|
|
await page.waitForTimeout(3000); // Wait to see the transition
|
||
|
|
|
||
|
|
console.log('✅ Spanish loaded');
|
||
|
|
await page.waitForTimeout(1000);
|
||
|
|
|
||
|
|
console.log('\n🌍 Switching back to English (watch for smooth fade transition)...');
|
||
|
|
await page.click('button[hx-get*="lang=en"]');
|
||
|
|
await page.waitForTimeout(3000); // Wait to see the transition
|
||
|
|
|
||
|
|
console.log('✅ English loaded\n');
|
||
|
|
await page.waitForTimeout(1000);
|
||
|
|
|
||
|
|
console.log('📊 SUMMARY:');
|
||
|
|
console.log(' - Language transitions now use HTMX CSS transitions');
|
||
|
|
console.log(' - 200ms fade out (htmx-swapping class)');
|
||
|
|
console.log(' - 200ms fade in (htmx-settling class)');
|
||
|
|
console.log(' - Smooth, professional experience! 🎉\n');
|
||
|
|
|
||
|
|
console.log('💡 BENEFITS:');
|
||
|
|
console.log(' ✅ Eliminates jarring page flash');
|
||
|
|
console.log(' ✅ Smooth visual continuity');
|
||
|
|
console.log(' ✅ Professional feel');
|
||
|
|
console.log(' ✅ No JavaScript needed - pure CSS!');
|
||
|
|
|
||
|
|
await page.waitForTimeout(2000);
|
||
|
|
await browser.close();
|
||
|
|
})();
|