npm - @gaulatti/giorgia - Versions diffs - 0.1.59 → 0.1.60 - Mend

@gaulatti/giorgia 0.1.59 → 0.1.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

package/dist/assets/mi.svg ADDED Viewed

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 595.27 206.59" fill="#fff">
+  <path d="M160.26 103.3c0 44.25-35.88 80.13-80.12 80.13S0 147.55 0 103.3s35.87-80.14 80.14-80.14c44.25 0 80.12 35.88 80.12 80.14Z"/>
+  <rect x="211.95" y="23.16" width="160.26" height="160.27"/>
+  <path d="m415.46 181.15 89.9-155.71 89.91 155.71H415.46Z"/>
+</svg>

package/dist/components/live-program/components/Marquee.js CHANGED Viewed

@@ -73,7 +73,7 @@ export function Marquee({ events, onCycleComplete, minPostsCount = 4, minAverage
                             color: '#ffffff',
                             fontSize: '2rem',
                             fontWeight: '600',
-                            fontFamily: 'Encode Sans, sans-serif'
+                            fontFamily: 'Barlow, sans-serif'
                         }, children: event.title }), _jsx("div", { style: {
                             marginLeft: '2rem',
                             marginRight: '2rem',

package/dist/components/live-program/components/MarqueeCurtain.js CHANGED Viewed

@@ -25,6 +25,6 @@ export function MarqueeCurtain({ onComplete }) {
                     color: '#ffffff',
                     fontSize: '1.5rem',
                     fontWeight: '600',
-                    fontFamily: 'Libre Franklin, sans-serif'
+                    fontFamily: 'Barlow, sans-serif'
                 }, children: ["This is fifth", _jsx("span", { style: { fontWeight: '700' }, children: "bell" }), "."] }), _jsx(BellRing, { size: 24, strokeWidth: 2, color: '#ffffff' })] }));
 }

package/dist/components/live-program/components/WorldClocks.js CHANGED Viewed

@@ -97,5 +97,5 @@ export function WorldClocks({ currentTime, timeOverride = null, language = 'en',
         });
     };
     const cityLabel = TRANSLATABLE_CITY_KEYS.has(currentCity.city) ? t(`city.${currentCity.city}`, language) : currentCity.city;
-    return (_jsxs("div", { className: 'flex flex-col gap-1.5 transition-opacity duration-300', style: { opacity: isAnimating ? 0 : 1, width: `${widthPx}px` }, children: [_jsx("div", { className: 'text-white font-bold text-6xl tracking-tight leading-none text-center', style: { fontFamily: 'system-ui, -apple-system, sans-serif' }, children: formatTime(currentCity.timezone) }), _jsx("div", { className: 'text-white/50 text-2xl font-bold tracking-wider leading-none uppercase text-center', style: { fontFamily: 'system-ui, -apple-system, sans-serif' }, children: cityLabel })] }));
+    return (_jsxs("div", { className: 'flex flex-col gap-1.5 transition-opacity duration-300', style: { opacity: isAnimating ? 0 : 1, width: `${widthPx}px` }, children: [_jsx("div", { className: 'text-white font-bold text-6xl tracking-tight leading-none text-center', style: { fontFamily: 'Barlow Condensed, sans-serif' }, children: formatTime(currentCity.timezone) }), _jsx("div", { className: 'text-white/50 text-2xl font-bold tracking-wider leading-none uppercase text-center', style: { fontFamily: 'Barlow, sans-serif' }, children: cityLabel })] }));
 }

package/dist/components/live-program/components/slides/ArticleSlide.js CHANGED Viewed

@@ -28,5 +28,5 @@ export function ArticleSlide({ newsItem, progress }) {
             console.error('Error getting average color', error);
         }
     };
-    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: imageUrl, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, imageUrl) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-24 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [newsItem.category && (_jsx("span", { className: "text-white text-3xl font-semibold uppercase tracking-wider mb-8 font-['Encode_Sans_Condensed'] inline-block px-4 py-2", style: { backgroundColor: dominantColor }, children: newsItem.category })), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-8' }), _jsx("h1", { className: "text-5xl font-bold leading-tight mb-8 tracking-tight line-clamp-6 font-['Encode_Sans'] [text-wrap:balance]", children: newsItem.headline }), _jsx("p", { className: "text-4xl font-light leading-relaxed opacity-90 line-clamp-6 font-['Libre_Franklin']", children: newsItem.summary })] }, newsItem.id) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-16 pb-40', children: _jsxs("div", { className: 'relative w-full aspect-video shadow-2xl overflow-hidden border-4 border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: imageUrl, alt: newsItem.headline, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' } }, imageUrl), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'Article QR code', className: 'block w-32 h-32' }) }) })] }) })] })] }));
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: imageUrl, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, imageUrl) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-24 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [newsItem.category && (_jsx("span", { className: "text-white text-3xl font-semibold uppercase tracking-wider mb-8 font-['Barlow_Condensed'] inline-block px-4 py-2", style: { backgroundColor: dominantColor }, children: newsItem.category })), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-8' }), _jsx("h1", { className: "text-5xl font-bold leading-tight mb-8 tracking-tight line-clamp-6 font-['Barlow_Condensed'] [text-wrap:balance]", children: newsItem.headline }), _jsx("p", { className: "text-4xl font-light leading-relaxed opacity-90 line-clamp-6 font-['Barlow']", children: newsItem.summary })] }, newsItem.id) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-16 pb-40', children: _jsxs("div", { className: 'relative w-full aspect-video shadow-2xl overflow-hidden border-4 border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: imageUrl, alt: newsItem.headline, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' } }, imageUrl), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'Article QR code', className: 'block w-32 h-32' }) }) })] }) })] })] }));
 }

package/dist/components/live-program/components/slides/CallsignSlide.js CHANGED Viewed

@@ -45,5 +45,5 @@ export function CallsignSlide({ currentTime: initialTime }) {
             setDominantColor('#b21100');
         }
     };
-    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col items-center justify-center', children: [_jsx("div", { className: 'bg-[#b21100] text-white p-12 shadow-2xl mb-16 animate-scale-in', style: { opacity: fullOpacity, transition: 'opacity 0.5s' }, children: _jsx(BellRing, { size: 256, strokeWidth: 2 }) }), _jsx("div", { className: 'absolute top-4 left-4', style: { opacity: smallOpacity, transition: 'opacity 0.5s' }, children: _jsx("div", { className: 'bg-[#b21100] text-white p-6 shadow-lg scale-50', children: _jsx(BellRing, { size: 128, strokeWidth: 2 }) }) }), _jsx("div", { className: 'flex flex-col items-center', style: { opacity: centerOpacity, transition: 'opacity 0.5s' } }), _jsx("div", { className: "text-white text-6xl font-bold tracking-wider animate-fade-in-delay font-['JetBrains_Mono']", style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: formatNyTime(displayTime) }), _jsxs("div", { className: 'text-white text-3xl opacity-75 mt-4 animate-fade-in-delay', style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: ["This is fifth", _jsx("span", { className: 'font-bold', children: "bell" }), "."] })] })] }));
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col items-center justify-center', children: [_jsx("div", { className: 'bg-[#b21100] text-white p-12 shadow-2xl mb-16 animate-scale-in', style: { opacity: fullOpacity, transition: 'opacity 0.5s' }, children: _jsx(BellRing, { size: 256, strokeWidth: 2 }) }), _jsx("div", { className: 'absolute top-4 left-4', style: { opacity: smallOpacity, transition: 'opacity 0.5s' }, children: _jsx("div", { className: 'bg-[#b21100] text-white p-6 shadow-lg scale-50', children: _jsx(BellRing, { size: 128, strokeWidth: 2 }) }) }), _jsx("div", { className: 'flex flex-col items-center', style: { opacity: centerOpacity, transition: 'opacity 0.5s' } }), _jsx("div", { className: "text-white text-6xl font-bold tracking-wider animate-fade-in-delay font-['Barlow_Condensed']", style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: formatNyTime(displayTime) }), _jsxs("div", { className: 'text-white text-3xl opacity-75 mt-4 animate-fade-in-delay', style: { opacity: showTime ? 1 : 0, transition: 'opacity 0.5s' }, children: ["This is fifth", _jsx("span", { className: 'font-bold', children: "bell" }), "."] })] })] }));
 }

package/dist/components/live-program/components/slides/LiveEventSlide.js CHANGED Viewed

@@ -25,9 +25,9 @@ function formatUpdateTime(update) {
 function LatestUpdates({ updates, language }) {
     const latest = useMemo(() => updates.slice(0, 5), [updates]);
     if (latest.length === 0) {
-        return (_jsx("p", { className: "text-white/50 font-['Libre_Franklin'] text-xl", children: t('liveEvent.noUpdates', language) }));
+        return (_jsx("p", { className: "text-white/50 font-['Barlow'] text-xl", children: t('liveEvent.noUpdates', language) }));
     }
-    return (_jsx("div", { className: 'flex flex-col gap-3', children: latest.map((update, i) => (_jsxs("div", { className: 'flex gap-3 items-start', children: [_jsx("div", { className: 'w-2 h-2 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-2' }), _jsxs("div", { className: 'flex flex-col gap-0.5 min-w-0', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#0ea5e9] font-['Libre_Franklin']", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white/90 text-lg leading-snug font-['Libre_Franklin'] [&_img]:hidden", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white/90 text-lg leading-snug font-['Libre_Franklin'] truncate", children: update.text })) : null] })] }, i))) }));
+    return (_jsx("div", { className: 'flex flex-col gap-3', children: latest.map((update, i) => (_jsxs("div", { className: 'flex gap-3 items-start', children: [_jsx("div", { className: 'w-2 h-2 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-2' }), _jsxs("div", { className: 'flex flex-col gap-0.5 min-w-0', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#0ea5e9] font-['Barlow']", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white/90 text-lg leading-snug font-['Barlow'] [&_img]:hidden", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white/90 text-lg leading-snug font-['Barlow'] truncate", children: update.text })) : null] })] }, i))) }));
 }
 function ScrollingTimeline({ updates, language }) {
     const [visibleStart, setVisibleStart] = useState(0);
@@ -54,9 +54,9 @@ function ScrollingTimeline({ updates, language }) {
         return items;
     }, [updates, visibleStart, displayCount]);
     if (updates.length === 0) {
-        return (_jsx("div", { className: 'flex items-center justify-center h-full', children: _jsx("p", { className: "text-white/50 font-['Libre_Franklin'] text-2xl", children: t('liveEvent.noUpdates', language) }) }));
+        return (_jsx("div", { className: 'flex items-center justify-center h-full', children: _jsx("p", { className: "text-white/50 font-['Barlow'] text-2xl", children: t('liveEvent.noUpdates', language) }) }));
     }
-    return (_jsx("div", { className: 'flex flex-col justify-center gap-5 h-full', children: visibleUpdates.map((update, i) => (_jsxs("div", { className: 'flex gap-4 items-start animate-slide-up', children: [_jsx("div", { className: 'w-3 h-3 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-1.5 shadow-[0_0_12px_rgba(79,195,247,0.5)]' }), _jsxs("div", { className: 'flex flex-col gap-1 min-w-0 flex-1', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#4FC3F7] font-['Libre_Franklin'] tracking-wide", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white text-xl leading-snug font-['Libre_Franklin'] font-light [&_img]:hidden [&_a]:text-[#4FC3F7] [&_a]:underline", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white text-xl leading-snug font-['Libre_Franklin'] font-light line-clamp-2", children: update.text })) : null] })] }, `${visibleStart}-${i}`))) }));
+    return (_jsx("div", { className: 'flex flex-col justify-center gap-5 h-full', children: visibleUpdates.map((update, i) => (_jsxs("div", { className: 'flex gap-4 items-start animate-slide-up', children: [_jsx("div", { className: 'w-3 h-3 rounded-full bg-[#4FC3F7] flex-shrink-0 mt-1.5 shadow-[0_0_12px_rgba(79,195,247,0.5)]' }), _jsxs("div", { className: 'flex flex-col gap-1 min-w-0 flex-1', children: [formatUpdateTime(update) && (_jsx("span", { className: "text-sm font-semibold text-[#4FC3F7] font-['Barlow'] tracking-wide", children: formatUpdateTime(update) })), update.html ? (_jsx("div", { className: "text-white text-xl leading-snug font-['Barlow'] font-light [&_img]:hidden [&_a]:text-[#4FC3F7] [&_a]:underline", children: update.html.replace(/<[^>]*>/g, '') })) : update.text ? (_jsx("p", { className: "text-white text-xl leading-snug font-['Barlow'] font-light line-clamp-2", children: update.text })) : null] })] }, `${visibleStart}-${i}`))) }));
 }
 export function LiveEventSlide({ event, progress, language }) {
     const [dominantColor, setDominantColor] = useState('#b21100');
@@ -77,9 +77,9 @@ export function LiveEventSlide({ event, progress, language }) {
         }
     }, []);
     if (isSports) {
-        return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Encode_Sans_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Encode_Sans_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Encode_Sans'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Libre_Franklin'] text-white mb-6", children: event.excerpt })), _jsx(LatestUpdates, { updates: event.updates, language: language })] }) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-12 pb-32', children: _jsxs("div", { className: 'relative w-full max-w-lg flex flex-col gap-4', children: [_jsxs("div", { className: 'relative aspect-video shadow-2xl overflow-hidden border border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: event.image, alt: event.alt, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' }, crossOrigin: 'anonymous' }, event.image)] }), sofascoreWidgetUrl && (_jsx("div", { className: 'w-full overflow-hidden border border-white/10 bg-black/40', children: _jsx("iframe", { width: '100%', height: '180', src: sofascoreWidgetUrl, title: 'SofaScore Attack Momentum', frameBorder: '0', scrolling: 'no', loading: 'lazy', referrerPolicy: 'no-referrer-when-downgrade', style: { border: 0 } }) })), _jsx("div", { className: 'absolute bottom-4 right-4 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] }) })] })] }));
+        return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Barlow_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Barlow_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Barlow_Condensed'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Barlow'] text-white mb-6", children: event.excerpt })), _jsx(LatestUpdates, { updates: event.updates, language: language })] }) }), _jsx("div", { className: 'col-span-7 relative h-full flex items-center justify-center p-12 pb-32', children: _jsxs("div", { className: 'relative w-full max-w-lg flex flex-col gap-4', children: [_jsxs("div", { className: 'relative aspect-video shadow-2xl overflow-hidden border border-white/10', children: [_jsx("div", { className: 'absolute top-0 left-0 h-1 bg-white/30 w-full z-20', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) }), _jsx("img", { src: event.image, alt: event.alt, className: 'w-full h-full object-cover', style: { animation: 'kenburns 20s infinite alternate' }, crossOrigin: 'anonymous' }, event.image)] }), sofascoreWidgetUrl && (_jsx("div", { className: 'w-full overflow-hidden border border-white/10 bg-black/40', children: _jsx("iframe", { width: '100%', height: '180', src: sofascoreWidgetUrl, title: 'SofaScore Attack Momentum', frameBorder: '0', scrolling: 'no', loading: 'lazy', referrerPolicy: 'no-referrer-when-downgrade', style: { border: 0 } }) })), _jsx("div", { className: 'absolute bottom-4 right-4 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] }) })] })] }));
     }
-    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-80 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Encode_Sans_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Encode_Sans_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Encode_Sans'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Libre_Franklin'] text-white", children: event.excerpt }))] }) }), _jsxs("div", { className: 'col-span-7 relative h-full flex flex-col justify-center p-16 pl-12', children: [_jsxs("div", { className: 'flex items-start gap-4 mb-8', children: [_jsx("div", { className: 'bg-[#b21100] text-white px-4 py-2 shadow-lg', children: _jsx(SecondBellIcon, { size: 32 }) }), _jsx("h2", { className: "text-white/60 text-2xl font-semibold uppercase tracking-[0.12em] font-['Encode_Sans_Condensed']", children: "LIVE UPDATES" })] }), _jsx(ScrollingTimeline, { updates: event.updates, language: language }), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] })] })] }));
+    return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: event.image, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, event.image) }), _jsx("div", { className: 'absolute inset-0 opacity-80 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 grid grid-cols-12 h-full', children: [_jsx("div", { className: 'col-span-5 flex flex-col justify-center p-16 relative bg-black/35 backdrop-blur-2xl', children: _jsxs("div", { className: 'animate-slide-up flex flex-col items-start', children: [_jsx("span", { className: "inline-flex items-center px-4 py-1.5 bg-[#cc0000] text-white text-xl font-bold tracking-[0.08em] uppercase font-['Barlow_Condensed'] mb-4", children: "LIVE" }), _jsx("span", { className: "text-white/80 text-2xl font-semibold uppercase tracking-wider mb-2 font-['Barlow_Condensed']", children: event.category }), _jsx("div", { className: 'w-16 h-1.5 bg-[#b21100] mb-6' }), _jsx("h1", { className: "text-4xl font-bold leading-tight mb-4 tracking-tight line-clamp-5 font-['Barlow_Condensed'] [text-wrap:balance] text-white", children: event.title }), event.excerpt && (_jsx("p", { className: "text-2xl font-light leading-relaxed opacity-80 line-clamp-3 font-['Barlow'] text-white", children: event.excerpt }))] }) }), _jsxs("div", { className: 'col-span-7 relative h-full flex flex-col justify-center p-16 pl-12', children: [_jsxs("div", { className: 'flex items-start gap-4 mb-8', children: [_jsx("div", { className: 'bg-[#b21100] text-white px-4 py-2 shadow-lg', children: _jsx(SecondBellIcon, { size: 32 }) }), _jsx("h2", { className: "text-white/60 text-2xl font-semibold uppercase tracking-[0.12em] font-['Barlow_Condensed']", children: "LIVE UPDATES" })] }), _jsx(ScrollingTimeline, { updates: event.updates, language: language }), _jsx("div", { className: 'absolute bottom-8 right-8 z-30', children: _jsx("div", { className: 'p-2 rounded-sm backdrop-blur-md shadow-2xl', style: { backgroundColor: 'rgba(0,0,0,0.4)' }, children: _jsx("img", { src: qrCodeUrl, alt: 'QR code', className: 'block w-24 h-24' }) }) })] })] })] }));
 }
 function SecondBellIcon({ size }) {
     return (_jsxs("svg", { width: size, height: size, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeLinecap: 'round', strokeLinejoin: 'round', children: [_jsx("path", { d: 'M10.268 21a2 2 0 0 0 3.464 0' }), _jsx("path", { d: 'M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326' }), _jsx("path", { d: 'M4 2C2.8 3.7 2 5.7 2 8' }), _jsx("path", { d: 'M22 8a10 10 0 0 0-2-6' })] }));

package/dist/components/live-program/segments/EarthquakeSegment.js CHANGED Viewed

@@ -89,7 +89,7 @@ function EarthquakeSlide({ earthquakes, progress, language }) {
     if (earthquakes.length === 0) {
         return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #7c2d12, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light', children: t('earthquakes.noData', language) }) })] }));
     }
-    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24 py-24', children: [_jsxs("div", { className: 'mb-8 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-8' }), _jsxs("div", { className: 'flex items-center space-x-4 mb-4', children: [_jsx(AlertTriangle, { size: 56, className: 'text-orange-500', strokeWidth: 2 }), _jsx("h1", { className: "text-5xl font-bold tracking-tight leading-tight font-['Encode_Sans']", children: t('earthquakes.header', language) })] }), _jsx("h2", { className: 'text-2xl font-light opacity-90 leading-relaxed', children: t('earthquakes.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-6 animate-slide-up', children: earthquakes.map((quake, index) => {
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24 py-24', children: [_jsxs("div", { className: 'mb-8 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-8' }), _jsxs("div", { className: 'flex items-center space-x-4 mb-4', children: [_jsx(AlertTriangle, { size: 56, className: 'text-orange-500', strokeWidth: 2 }), _jsx("h1", { className: "text-5xl font-bold tracking-tight leading-tight font-['Barlow_Condensed']", children: t('earthquakes.header', language) })] }), _jsx("h2", { className: 'text-2xl font-light opacity-90 leading-relaxed', children: t('earthquakes.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-6 animate-slide-up', children: earthquakes.map((quake, index) => {
                             const baseColor = getMagnitudeColor(quake.magnitude);
                             const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(baseColor);
                             const rgb = result
@@ -107,7 +107,7 @@ function EarthquakeSlide({ earthquakes, progress, language }) {
                             }
                             const opacity = 0.15 + magnitudeIntensity * 0.35;
                             const backgroundColor = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${opacity})`;
-                            return (_jsxs("div", { className: 'grid grid-cols-[auto_1fr] gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsx("div", { className: 'flex flex-col items-center', style: { width: '100px' }, children: _jsxs("div", { className: 'text-5xl font-bold leading-none', children: ["M", quake.magnitude.toFixed(1)] }) }), _jsxs("div", { className: 'flex flex-col justify-center min-w-0', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 line-clamp-2 leading-tight font-['Encode_Sans']", title: quake.location, children: quake.location }), _jsxs("div", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5 text-xl', children: [_jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Clock, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.time })] }), _jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Layers, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.depth, " ", t('earthquakes.depth', language)] })] }), _jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(MapPin, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.lat.toFixed(2), "\u00B0, ", quake.lng.toFixed(2), "\u00B0"] })] }), quake.sources.length > 0 && (_jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(Link, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.sources.join(', ') })] }))] })] })] }, quake.id));
+                            return (_jsxs("div", { className: 'grid grid-cols-[auto_1fr] gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsx("div", { className: 'flex flex-col items-center', style: { width: '100px' }, children: _jsxs("div", { className: 'text-5xl font-bold leading-none', children: ["M", quake.magnitude.toFixed(1)] }) }), _jsxs("div", { className: 'flex flex-col justify-center min-w-0', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 line-clamp-2 leading-tight font-['Barlow_Condensed']", title: quake.location, children: quake.location }), _jsxs("div", { className: 'grid grid-cols-2 gap-x-4 gap-y-1.5 text-xl', children: [_jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Clock, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.time })] }), _jsxs("div", { className: 'flex items-center space-x-2', children: [_jsx(Layers, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.depth, " ", t('earthquakes.depth', language)] })] }), _jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(MapPin, { size: 16, className: 'opacity-70 shrink-0' }), _jsxs("span", { className: 'truncate', children: [quake.lat.toFixed(2), "\u00B0, ", quake.lng.toFixed(2), "\u00B0"] })] }), quake.sources.length > 0 && (_jsxs("div", { className: 'flex items-center space-x-2 opacity-80', children: [_jsx(Link, { size: 16, className: 'opacity-70 shrink-0' }), _jsx("span", { className: 'truncate', children: quake.sources.join(', ') })] }))] })] })] }, quake.id));
                         }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
 }
 function EarthquakeLoadingSlide({ language }) {

package/dist/components/live-program/segments/LiveEventSegment.js CHANGED Viewed

@@ -4,7 +4,7 @@ import { fetchLiveEvent } from './fetchLiveEvents.js';
 import { t } from '../i18n.js';
 function LiveEventSegmentRenderer({ event, progress, language }) {
     if (!event) {
-        return (_jsx("div", { className: 'absolute inset-0 bg-black flex items-center justify-center', children: _jsx("p", { className: "text-white/50 text-2xl font-['Libre_Franklin']", children: t('liveEvent.noLiveEvents', language) }) }));
+        return (_jsx("div", { className: 'absolute inset-0 bg-black flex items-center justify-center', children: _jsx("p", { className: "text-white/50 text-2xl font-['Barlow']", children: t('liveEvent.noLiveEvents', language) }) }));
     }
     return (_jsx("div", { className: 'relative w-full h-full', children: _jsx(LiveEventSlide, { event: event, progress: progress, language: language }, event.title) }));
 }

package/dist/components/live-program/segments/MarketsSegment.js CHANGED Viewed

@@ -49,14 +49,14 @@ function MarketSlide({ progress, marketData, language }) {
     if (marketData.length === 0) {
         return (_jsxs("div", { className: 'absolute inset-0', children: [_jsx("div", { className: 'absolute inset-0 opacity-75', style: { background: 'linear-gradient(to bottom right, #065f46, #000000)' } }), _jsx("div", { className: 'relative z-10 h-full flex items-center justify-center', children: _jsx("div", { className: 'text-4xl font-light animate-pulse', children: t('markets.loading', language) }) })] }));
     }
-    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Encode_Sans']", children: t('markets.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t('markets.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-4 animate-slide-up', children: marketData.map((stock, index) => {
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) }), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Barlow_Condensed']", children: t('markets.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t('markets.subtitle', language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-4 animate-slide-up', children: marketData.map((stock, index) => {
                             const isPositive = stock.change >= 0;
                             const changeColor = isPositive ? 'text-green-400' : 'text-red-400';
                             const Icon = isPositive ? TrendingUp : TrendingDown;
                             const logIntensity = Math.log10(1 + Math.abs(stock.changePercent)) / Math.log10(1 + 100);
                             const opacity = 0.15 + Math.min(logIntensity, 1) * 0.35;
                             const backgroundColor = isPositive ? `rgba(34, 197, 94, ${opacity})` : `rgba(239, 68, 68, ${opacity})`;
-                            return (_jsxs("div", { className: 'grid grid-cols-2 gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsxs("div", { className: 'flex flex-col', children: [_jsx("span", { className: "text-4xl font-bold mb-1 font-['Encode_Sans']", children: stock.symbol }), _jsx("span", { className: 'text-2xl opacity-70', children: stock.name })] }), _jsxs("div", { className: 'flex flex-col items-end', children: [_jsxs("div", { className: "text-5xl font-bold mb-1 font-['Encode_Sans']", children: ["$", stock.price.toFixed(2)] }), _jsxs("div", { className: `flex items-center space-x-2 ${changeColor}`, children: [_jsx(Icon, { size: 24, strokeWidth: 2 }), _jsxs("span", { className: 'text-3xl font-bold', children: [isPositive ? '+' : '', stock.change.toFixed(2)] }), _jsxs("span", { className: 'text-2xl opacity-80', children: ["(", isPositive ? '+' : '', stock.changePercent.toFixed(2), "%)"] })] })] })] }, stock.symbol));
+                            return (_jsxs("div", { className: 'grid grid-cols-2 gap-x-12 items-center p-6 backdrop-blur-sm rounded-lg border border-white/5', style: { animationDelay: `${index * 0.05}s`, backgroundColor }, children: [_jsxs("div", { className: 'flex flex-col', children: [_jsx("span", { className: "text-4xl font-bold mb-1 font-['Barlow_Condensed']", children: stock.symbol }), _jsx("span", { className: 'text-2xl opacity-70', children: stock.name })] }), _jsxs("div", { className: 'flex flex-col items-end', children: [_jsxs("div", { className: "text-5xl font-bold mb-1 font-['Barlow_Condensed']", children: ["$", stock.price.toFixed(2)] }), _jsxs("div", { className: `flex items-center space-x-2 ${changeColor}`, children: [_jsx(Icon, { size: 24, strokeWidth: 2 }), _jsxs("span", { className: 'text-3xl font-bold', children: [isPositive ? '+' : '', stock.change.toFixed(2)] }), _jsxs("span", { className: 'text-2xl opacity-80', children: ["(", isPositive ? '+' : '', stock.changePercent.toFixed(2), "%)"] })] })] })] }, stock.symbol));
                         }) }), _jsx("div", { className: 'mt-6 mb-24 text-xl opacity-60 animate-fade-in-delay', children: _jsx("p", { children: t('markets.lastUpdate', language, { time: getLastUpdateTime() }) }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
 }
 export function createMarketsSegment(marketData, onDataUpdate, language = 'en') {

package/dist/components/live-program/segments/WeatherSegment.js CHANGED Viewed

@@ -83,11 +83,11 @@ function WeatherSlide({ weatherData, progress, unit, language }) {
             setDominantColor('#1e40af');
         }
     };
-    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [backgroundImage && (_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) })), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Encode_Sans']", children: t('weather.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t(`region.${weatherData.region}`, language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-8 animate-slide-up', children: weatherData.cities.map((city, index) => {
+    return (_jsxs("div", { className: 'absolute inset-0 animate-slide-transition', children: [backgroundImage && (_jsx("div", { className: 'absolute inset-0', children: _jsx("img", { src: backgroundImage, alt: '', crossOrigin: 'anonymous', onLoad: handleImageLoad, className: 'w-full h-full object-cover blur-xl scale-105' }, backgroundImage) })), _jsx("div", { className: 'absolute inset-0 opacity-75 mix-blend-multiply transition-all duration-1000', style: { background: `linear-gradient(to bottom right, ${dominantColor}, #000000)` } }), _jsx("div", { className: 'absolute inset-0 bg-[radial-gradient(circle_at_30%_30%,rgba(255,255,255,0.1),transparent_60%)]' }), _jsxs("div", { className: 'relative z-10 h-full flex flex-col justify-center px-24', children: [_jsxs("div", { className: 'mb-12 animate-slide-up', children: [_jsx("div", { className: 'w-32 h-2 bg-white mb-12' }), _jsx("h1", { className: "text-5xl font-bold tracking-tight mb-8 leading-tight font-['Barlow_Condensed']", children: t('weather.header', language) }), _jsx("h2", { className: 'text-3xl font-light opacity-90 leading-relaxed', children: t(`region.${weatherData.region}`, language) })] }), _jsx("div", { className: 'grid grid-cols-2 gap-8 animate-slide-up', children: weatherData.cities.map((city, index) => {
                             const temp = displayUnit === 'celsius' ? fahrenheitToCelsius(city.temp) : city.temp;
                             const high = displayUnit === 'celsius' ? fahrenheitToCelsius(city.high) : city.high;
                             const low = displayUnit === 'celsius' ? fahrenheitToCelsius(city.low) : city.low;
-                            return (_jsxs("div", { className: 'flex items-center space-x-6 p-6 bg-white/10 backdrop-blur-sm rounded-lg', style: { animationDelay: `${index * 0.1}s` }, children: [_jsx("div", { className: 'shrink-0', children: getWeatherIcon(city.condition, 48) }), _jsxs("div", { className: 'flex-1', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 font-['Encode_Sans']", children: city.name }), _jsxs("span", { className: "text-5xl font-bold transition-opacity duration-300 font-['Encode_Sans']", style: { opacity: isTransitioning ? 0 : 1 }, children: [temp, unitLabel] })] }), _jsxs("div", { className: 'flex flex-col items-end space-y-1', children: [_jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.high', language), " ", high, unitLabel] }), _jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.low', language), " ", low, unitLabel] })] })] }, city.name));
+                            return (_jsxs("div", { className: 'flex items-center space-x-6 p-6 bg-white/10 backdrop-blur-sm rounded-lg', style: { animationDelay: `${index * 0.1}s` }, children: [_jsx("div", { className: 'shrink-0', children: getWeatherIcon(city.condition, 48) }), _jsxs("div", { className: 'flex-1', children: [_jsx("h3", { className: "text-3xl font-bold mb-2 font-['Barlow_Condensed']", children: city.name }), _jsxs("span", { className: "text-5xl font-bold transition-opacity duration-300 font-['Barlow_Condensed']", style: { opacity: isTransitioning ? 0 : 1 }, children: [temp, unitLabel] })] }), _jsxs("div", { className: 'flex flex-col items-end space-y-1', children: [_jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.high', language), " ", high, unitLabel] }), _jsxs("span", { className: 'text-2xl opacity-70 transition-opacity duration-300', style: { opacity: isTransitioning ? 0 : 0.7 }, children: [t('weather.low', language), " ", low, unitLabel] })] })] }, city.name));
                         }) }), _jsx("div", { className: 'absolute bottom-24 left-24 right-24 h-1 bg-white/30', children: _jsx("div", { className: 'h-full bg-white transition-all duration-100 ease-linear', style: { width: `${progress}%` } }) })] })] }));
 }
 function WeatherLoadingSlide({ language }) {