openpencil/index.html
Danila Poyarkov 503a561753 Symlink favicons from desktop/icons, add all sizes for Safari/Chrome
.ico (any), 32px PNG, 128px PNG, apple-touch-icon (512px).
Symlinks instead of copies so icons stay in sync.
2026-03-01 15:46:31 +03:00

63 lines
2 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" />
<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>