183 lines
6.5 KiB
HTML
183 lines
6.5 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
|
|
|
<!-- Primary Meta Tags -->
|
|
<title>Video Call App</title>
|
|
<meta name="title" content="Video Call App" />
|
|
<meta
|
|
name="description"
|
|
content="Secure video calling without registration. Create rooms, share links, and connect instantly."
|
|
/>
|
|
|
|
<!-- Tailwind CSS - ВАЖНО: загружается перед основными стилями -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
// Конфигурация Tailwind для dark mode
|
|
tailwind.config = {
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#f0fdf4',
|
|
500: '#22c55e',
|
|
600: '#16a34a',
|
|
700: '#15803d',
|
|
},
|
|
},
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<!-- Security Headers -->
|
|
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
|
|
<meta http-equiv="X-Content-Type-Options" content="nosniff" />
|
|
<meta http-equiv="X-Frame-Options" content="DENY" />
|
|
|
|
<!-- PWA Meta Tags -->
|
|
<meta name="theme-color" content="#22c55e" />
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
|
|
<meta name="apple-mobile-web-app-title" content="VideoCall" />
|
|
|
|
<!-- Open Graph / Facebook -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Video Call App" />
|
|
<meta property="og:description" content="Secure video calling without registration" />
|
|
|
|
<!-- Apple Touch Icons -->
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
|
|
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
|
|
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
|
|
<link rel="manifest" href="/site.webmanifest" />
|
|
|
|
<!-- Основные стили приложения -->
|
|
<style>
|
|
/* Базовые стили до загрузки приложения */
|
|
body {
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
'Segoe UI',
|
|
Roboto,
|
|
sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
.dark body {
|
|
background-color: #111827;
|
|
color: white;
|
|
}
|
|
|
|
/* Загрузочный экран */
|
|
#loading-screen {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: #f9fafb;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
}
|
|
|
|
.dark #loading-screen {
|
|
background: #111827;
|
|
}
|
|
|
|
.spinner {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: 4px solid #e5e7eb;
|
|
border-top: 4px solid #22c55e;
|
|
border-radius: 50%;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* Скрыть загрузочный экран после загрузки приложения */
|
|
.app-loaded #loading-screen {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-sans antialiased">
|
|
<!-- Загрузочный экран -->
|
|
<div id="loading-screen">
|
|
<div class="text-center">
|
|
<div class="spinner"></div>
|
|
<p class="mt-4 text-gray-600 dark:text-gray-300">Loading...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<noscript>
|
|
<div
|
|
style="
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #f3f4f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
padding: 2rem;
|
|
font-family:
|
|
system-ui,
|
|
-apple-system,
|
|
sans-serif;
|
|
"
|
|
>
|
|
<div>
|
|
<h1 style="font-size: 1.5rem; margin-bottom: 1rem">JavaScript Required</h1>
|
|
<p style="color: #6b7280">
|
|
This video calling application requires JavaScript to function properly.
|
|
Please enable JavaScript in your browser settings and refresh the page.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</noscript>
|
|
|
|
<div id="app"></div>
|
|
<script type="module" src="/src/main.js"></script>
|
|
|
|
<!-- Скрипт для скрытия загрузочного экрана -->
|
|
<script>
|
|
// Скрыть загрузочный экран после загрузки DOM
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
setTimeout(() => {
|
|
document.body.classList.add('app-loaded')
|
|
}, 100)
|
|
})
|
|
|
|
// Error Handling
|
|
window.addEventListener('error', function (e) {
|
|
console.error('Global error:', e.error)
|
|
document.body.classList.add('app-loaded') // Скрыть загрузочный экран даже при ошибке
|
|
})
|
|
|
|
window.addEventListener('unhandledrejection', function (e) {
|
|
console.error('Unhandled promise rejection:', e.reason)
|
|
e.preventDefault()
|
|
})
|
|
</script>
|
|
</body>
|
|
</html>
|