42225c604a
* feat: refresh branding with generated platform icons Keep the approved mark and optical micro master as the source of truth. Generate web, documentation, and native assets at their owning build boundaries instead of storing raster variants or linking web icons to desktop output. * fix: refine small brand marks and loading artwork * feat: adopt blue editing-handle brand mark * feat: refine teal branding for light and dark themes * feat: apply ivory tiles across brand surfaces Use edge-to-edge web tiles with a larger mark and optical micro favicons. Preserve native spacing and platform-owned maskable/touch cropping. Address review feedback on story props, native dimensions, and brand test type checking. * test: allow cold npm startup in packaging fixture CI hit Bun's five-second default while running npm pack --dry-run. Give this integration test a scoped 30-second budget without changing production timeouts or other tests.
80 lines
2.3 KiB
HTML
80 lines
2.3 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="96x96" href="/brand/favicon-96x96.png" />
|
|
<link rel="icon" type="image/svg+xml" href="/brand/favicon.svg" />
|
|
<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>
|
|
:root {
|
|
--loader-bg: #1e1e1e;
|
|
--loader-fg: 255, 255, 255;
|
|
}
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--loader-bg: #f3f4f6;
|
|
--loader-fg: 32, 33, 36;
|
|
}
|
|
}
|
|
html[data-theme='dark'] {
|
|
--loader-bg: #1e1e1e;
|
|
--loader-fg: 255, 255, 255;
|
|
}
|
|
html[data-theme='light'] {
|
|
--loader-bg: #f3f4f6;
|
|
--loader-fg: 32, 33, 36;
|
|
}
|
|
body { margin: 0; background: var(--loader-bg); }
|
|
#boot-splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 9999;
|
|
color: rgb(var(--loader-fg));
|
|
background: var(--loader-bg);
|
|
}
|
|
#boot-splash img { width: 40px; height: 40px; }
|
|
#boot-splash .bar {
|
|
position: absolute;
|
|
bottom: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, 40px);
|
|
width: 100px;
|
|
height: 2px;
|
|
background: rgba(var(--loader-fg), 0.08);
|
|
border-radius: 1px;
|
|
overflow: hidden;
|
|
}
|
|
#boot-splash .bar::after {
|
|
content: '';
|
|
display: block;
|
|
height: 100%;
|
|
width: 40%;
|
|
background: rgba(var(--loader-fg), 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="app">
|
|
<div id="boot-splash">
|
|
<img src="/brand/app-icon.svg" width="40" height="40" alt="OpenPencil" />
|
|
<div class="bar"></div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|