mirror of
https://github.com/zadam/trilium.git
synced 2026-09-14 11:06:04 +05:00
96765a183f
Some checks failed
Checks / main (push) Has been cancelled
The splash is fixed, opaque and full-viewport, and only splash.ts removes it. With scripting disabled nothing does, so the one message that explains why the page is empty was painted over by a logo and a progress bar that never finish. The rule sits in the noscript block that carries the message, ahead of the splash element in source order, so the splash never paints there. Reported by Greptile on #11203. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
160 lines
8.3 KiB
HTML
160 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="shortcut icon" href="favicon.ico">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
|
|
<link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
|
|
<title>Trilium Notes</title>
|
|
<style>
|
|
/* Startup splash. Inline so it renders before any script or stylesheet is fetched;
|
|
apps/client/src/services/splash.ts drives the status line and removes the element
|
|
once the application has loaded. */
|
|
#splash {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 10000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #ffffff;
|
|
color: #666666;
|
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
transition: opacity 0.4s ease;
|
|
}
|
|
#splash.splash-hidden {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
#splash .splash-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
/* Fades in after a delay, so a fast startup shows a blank page instead of a
|
|
flash of logo. */
|
|
opacity: 0;
|
|
animation: splash-appear 0.4s ease 0.3s forwards;
|
|
}
|
|
#splash .splash-logo {
|
|
width: 96px;
|
|
height: 96px;
|
|
}
|
|
#splash .splash-title {
|
|
margin-top: 16px;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.02em;
|
|
color: #333333;
|
|
}
|
|
#splash .splash-bar {
|
|
width: 240px;
|
|
height: 3px;
|
|
margin-top: 24px;
|
|
border-radius: 2px;
|
|
overflow: hidden;
|
|
background: rgba(128, 128, 128, 0.2);
|
|
}
|
|
#splash .splash-bar-fill {
|
|
width: 40%;
|
|
height: 100%;
|
|
border-radius: 2px;
|
|
background: #72b755;
|
|
animation: splash-slide 1.4s ease-in-out infinite;
|
|
}
|
|
/* Tracking state, installed by splash.ts once the startup phases are known. The long
|
|
ease-out carries the fill towards the running phase's end without ever reaching it,
|
|
so a slow step keeps moving instead of looking stalled. */
|
|
#splash .splash-bar.is-continuous .splash-bar-fill {
|
|
width: 0;
|
|
animation: none;
|
|
transition: width 12s cubic-bezier(0.16, 0.85, 0.3, 1);
|
|
}
|
|
#splash .splash-bar.is-continuous.is-starting .splash-bar-fill {
|
|
transition: none;
|
|
}
|
|
#splash .splash-bar.is-continuous.is-finishing .splash-bar-fill {
|
|
transition: width 0.3s ease;
|
|
}
|
|
#splash-status {
|
|
min-height: 1.5em;
|
|
margin-top: 12px;
|
|
font-size: 13px;
|
|
text-align: center;
|
|
}
|
|
#splash.splash-error .splash-bar {
|
|
display: none;
|
|
}
|
|
#splash.splash-error #splash-status {
|
|
max-width: min(480px, 85vw);
|
|
color: #e33f3b;
|
|
}
|
|
@keyframes splash-appear {
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes splash-slide {
|
|
0% { transform: translateX(-110%); }
|
|
100% { transform: translateX(260%); }
|
|
}
|
|
@keyframes splash-pulse {
|
|
0%, 100% { opacity: 0.3; }
|
|
50% { opacity: 1; }
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
#splash { background: #242424; color: #999999; }
|
|
#splash .splash-title { color: #cccccc; }
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#splash .splash-content { opacity: 1; animation: none; }
|
|
#splash .splash-bar-fill { width: 100%; animation: splash-pulse 1.8s ease-in-out infinite; }
|
|
#splash .splash-bar.is-continuous .splash-bar-fill { transition: width 0.2s linear; }
|
|
}
|
|
@media print {
|
|
#splash { display: none; }
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body id="trilium-app">
|
|
<noscript>
|
|
<style>
|
|
#splash { display: none; }
|
|
</style>
|
|
Trilium requires JavaScript to be enabled.
|
|
</noscript>
|
|
|
|
<div id="splash" role="status">
|
|
<div class="splash-content">
|
|
<svg class="splash-logo" viewBox="0 0 256 256" aria-hidden="true">
|
|
<path fill="#95C980" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
|
|
<path fill="#72B755" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
|
|
<path fill="#4FA52B" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
|
|
<path fill="#EE8C89" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
|
|
<path fill="#E96562" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
|
|
<path fill="#E33F3B" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
|
|
<path fill="#EFB075" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
|
|
<path fill="#E99547" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
|
|
<path fill="#E47B19" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
|
|
</svg>
|
|
<div class="splash-title">Trilium Notes</div>
|
|
<div class="splash-bar"><div class="splash-bar-fill"></div></div>
|
|
<div id="splash-status"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="context-menu-cover"></div>
|
|
<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
|
|
|
|
<!-- Required to match the PWA's top bar color with the theme -->
|
|
<!-- This works even when the user directly changes --root-background in CSS -->
|
|
<div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
|
|
|
|
<script src="./src/index.ts" type="module"></script>
|
|
|
|
<!-- Required for correct loading of scripts in Electron -->
|
|
<script>
|
|
if (typeof module === 'object') {window.module = module; module = undefined;}
|
|
</script>
|
|
</body>
|
|
</html> |