videofolxtv/client/index.html
sebastjanartic 967aa3025c Improve social media sharing by updating image generation
Updates social media image generation to use a new, dynamically generated image with a cache-busting parameter, ensuring up-to-date previews on platforms like WhatsApp and Viber. This includes enhancements to the SVG generation process using Sharp for optimized PNG output.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/2cd2c0bc-434c-4bc9-ad3f-b99d3897a0d1/OdlP8Wj
2025-09-03 10:47:45 +00:00

176 lines
7.8 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="Video-Welt von Folx TV immer bei dir" />
<!-- Open Graph meta podatki za družbena omrežja in mobilne aplikacije -->
<meta property="og:title" content="go4.video Video-Welt von Folx TV" />
<meta property="og:description" content="Video-Welt von Folx TV immer bei dir" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="go4.video" />
<meta property="og:locale" content="de_DE" />
<meta property="og:url" content="https://go4video.replit.app/" />
<meta property="og:image" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="go4.video - Professional Video Streaming Platform" />
<!-- 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 Video-Welt von Folx TV" />
<meta name="twitter:description" content="Video-Welt von Folx TV immer bei dir" />
<meta name="twitter:image" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta name="twitter:image:alt" content="go4.video - Professional Video Streaming Platform" />
<!-- WhatsApp/Viber specifične oznake -->
<meta property="og:image:secure_url" content="https://go4video.replit.app/api/social-image?v=2025" />
<meta name="format-detection" content="telephone=no" />
<meta name="robots" content="index, follow" />
<!-- 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: 'Poppins', 'Inter', 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: 28px; font-weight: 800; letter-spacing: 1px; text-shadow: 2px 2px 8px rgba(0,0,0,0.5);">go4.video</h2>
<p style="margin: 10px 0 0; opacity: 0.9; font-size: 16px; font-weight: 500;">Loading amazing content...</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" defer></script>
<link rel="preload" href="/src/main.tsx" as="script" crossorigin>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="preconnect" href="//fonts.gstatic.com" crossorigin>
<!-- Replit script removed - caused scrolling issues -->
<!-- Debug script for deployment issues -->
<script>
console.log('🚀 go4.video loading...');
// Set timeout to detect hanging in Chrome
let appLoadTimeout = setTimeout(function() {
console.warn('⚠️ App taking too long to load in Chrome, forcing refresh...');
const preloader = document.getElementById('app-preloader');
if (preloader) {
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading timeout</h2><p>Refreshing automatically...</p></div>';
}
setTimeout(function() {
location.reload();
}, 2000);
}, 8000); // 8 second timeout for Chrome
// Global callback for when app loads successfully
window.appLoaded = function() {
clearTimeout(appLoadTimeout);
console.log('⏱️ App load timeout cleared');
};
// 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');
const preloader = document.getElementById('app-preloader');
if (preloader && preloader.style.opacity !== '0') {
console.error('❌ React app failed to mount - preloader still visible');
preloader.innerHTML = '<div style="text-align: center; color: white;"><h2>Loading failed</h2><p>Refreshing automatically...</p></div>';
// Auto-refresh after 3 seconds
setTimeout(function() {
location.reload();
}, 3000);
}
}, 5000);
});
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>