openpencil/index.html
Danila Poyarkov c33e4152df Fix PWA manifest error in dev, handle invalid font data
Remove hardcoded manifest link from index.html (VitePWA injects
it in production builds). Catch FontFace.load() rejections from
invalid font data with a warning.
2026-03-06 21:43:16 +03:00

64 lines
2.1 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" sizes="any" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="icon" type="image/png" sizes="128x128" href="/favicon-128.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
<meta name="theme-color" content="#1e1e1e" />
<title>OpenPencil</title>
<style>
body { margin: 0; background: #1e1e1e; }
#loader {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
background: #1e1e1e;
transition: opacity 0.3s;
}
#loader.fade-out { opacity: 0; pointer-events: none; }
#loader svg { width: 32px; height: 32px; opacity: 0.4; }
#loader .bar {
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 40px);
width: 100px;
height: 2px;
background: rgba(255,255,255,0.08);
border-radius: 1px;
overflow: hidden;
}
#loader .bar::after {
content: '';
display: block;
height: 100%;
width: 40%;
background: rgba(255,255,255,0.25);
border-radius: 1px;
animation: slide 1s ease-in-out infinite;
}
@keyframes slide {
0% { transform: translateX(-100%); }
100% { transform: translateX(350%); }
}
</style>
</head>
<body>
<div id="loader">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" style="color: white">
<path d="m15.232 5.232 3.536 3.536m-2.036-5.036a2.5 2.5 0 0 1 3.536 3.536L6.5 21.036H3v-3.572L16.732 3.732Z"/>
</svg>
<div class="bar"></div>
</div>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>