videofolxtv/client/index.html
sebastjanartic 725fb58385 Add preloader and disable service worker to prevent blank screen issues
Introduces a visual preloader to the client's index.html and disables the service worker in main.tsx. Additionally, server-side middleware in index.ts is added to set no-cache headers for HTML pages, aiming to resolve the reported blank screen problem.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 890577b1-c154-40a4-a177-a0c6d55320c3
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/890577b1-c154-40a4-a177-a0c6d55320c3/DyHCx4q
2025-09-02 09:07:36 +00:00

146 lines
6.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
<title>go4.video Top-Inhalte von Folx TV</title>
<meta name="description" content="go4.video Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
<!-- Open Graph meta podatki za družbena omrežja in mobilne aplikacije -->
<meta property="og:title" content="go4.video Top-Inhalte von Folx TV" />
<meta property="og:description" content="go4.video Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="go4.video" />
<meta property="og:locale" content="en_US" />
<meta property="og:image" content="/go4-video-social-share.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<!-- Twitter Card meta podatki -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@go4video" />
<meta name="twitter:title" content="go4.video Top-Inhalte von Folx TV" />
<meta name="twitter:description" content="go4.video Top-Inhalte von Folx TV. Volksmusik, Schlager & Shows jederzeit online." />
<meta name="twitter:image" content="/go4-video-social-share.png" />
<!-- Dodatni meta podatki za mobilne naprave -->
<meta name="application-name" content="go4.video" />
<meta name="apple-mobile-web-app-title" content="go4.video" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="theme-color" content="#6366f1" />
<meta name="mobile-web-app-capable" content="yes" />
<!-- iOS specifične meta oznake -->
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="format-detection" content="telephone=no" />
<!-- iOS ikone za različne velikosti -->
<link rel="apple-touch-icon" sizes="57x57" href="/api/favicon?size=57&format=png" />
<link rel="apple-touch-icon" sizes="60x60" href="/api/favicon?size=60&format=png" />
<link rel="apple-touch-icon" sizes="72x72" href="/api/favicon?size=72&format=png" />
<link rel="apple-touch-icon" sizes="76x76" href="/api/favicon?size=76&format=png" />
<link rel="apple-touch-icon" sizes="114x114" href="/api/favicon?size=114&format=png" />
<link rel="apple-touch-icon" sizes="120x120" href="/api/favicon?size=120&format=png" />
<link rel="apple-touch-icon" sizes="144x144" href="/api/favicon?size=144&format=png" />
<link rel="apple-touch-icon" sizes="152x152" href="/api/favicon?size=152&format=png" />
<link rel="apple-touch-icon" sizes="180x180" href="/api/favicon?size=180&format=png" />
<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="/api/favicon" />
<link rel="apple-touch-icon" href="/api/favicon?size=180&format=png" />
<link rel="manifest" href="/manifest.json" />
</head>
<body>
<div id="root">
<!-- Preloader to prevent white screen -->
<div id="app-preloader" style="
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, hsl(250, 50%, 15%) 0%, hsl(240, 30%, 25%) 100%);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
font-family: Arial, sans-serif;
">
<div style="text-align: center; color: white;">
<div style="
width: 50px;
height: 50px;
background: linear-gradient(45deg, #6366f1, #8b5cf6);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
animation: pulse 2s infinite;
">
<div style="
width: 0;
height: 0;
border-left: 16px solid white;
border-top: 12px solid transparent;
border-bottom: 12px solid transparent;
margin-left: 4px;
"></div>
</div>
<h2 style="margin: 0; font-size: 24px; font-weight: bold;">go4.video</h2>
<p style="margin: 10px 0 0; opacity: 0.8;">Loading...</p>
</div>
</div>
<style>
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
</style>
</div>
<script type="module" src="/src/main.tsx"></script>
<!-- Replit script removed - caused scrolling issues -->
<!-- Debug script for deployment issues -->
<script>
console.log('🚀 go4.video loading...');
// Clear any cached service workers
if ('serviceWorker' in navigator) {
navigator.serviceWorker.getRegistrations().then(function(registrations) {
for(let registration of registrations) {
registration.unregister();
console.log('🧹 Cleared service worker registration');
}
});
}
window.addEventListener('load', function() {
console.log('✅ Window loaded');
setTimeout(function() {
const root = document.getElementById('root');
if (root && root.innerHTML.trim() === '') {
console.error('❌ React app failed to mount - root div is empty');
root.innerHTML = '<div style="color: red; padding: 20px; font-family: Arial; text-align: center; background: #000; height: 100vh; display: flex; align-items: center; justify-content: center;"><div><h1>Error: React app failed to load</h1><p>Refreshing page automatically...</p></div></div>';
// Auto-refresh after 3 seconds
setTimeout(function() {
location.reload();
}, 3000);
}
}, 2000);
});
window.addEventListener('error', function(e) {
console.error('❌ Global error:', e.error);
});
window.addEventListener('unhandledrejection', function(e) {
console.error('❌ Unhandled promise rejection:', e.reason);
});
</script>
</body>
</html>