160 lines
3.8 KiB
HTML
160 lines
3.8 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>fms-vue</title>
|
|
<script>
|
|
try {
|
|
if (localStorage.getItem("fms-dark") === "true") {
|
|
document.documentElement.classList.add("dark");
|
|
}
|
|
} catch {
|
|
// Storage may be unavailable in restricted browser contexts.
|
|
}
|
|
</script>
|
|
<style>
|
|
:root {
|
|
--boot-background: #ffffff;
|
|
--boot-foreground: #171717;
|
|
--boot-border: #e5e5e5;
|
|
--boot-error: #dc2626;
|
|
--boot-accent: #863bff;
|
|
}
|
|
|
|
.dark {
|
|
--boot-background: #171717;
|
|
--boot-foreground: #fafafa;
|
|
--boot-border: #404040;
|
|
--boot-error: #f87171;
|
|
--boot-accent: #a774ff;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#app {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.app-boot {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: grid;
|
|
place-items: center;
|
|
color: var(--boot-foreground);
|
|
font-family:
|
|
Inter,
|
|
ui-sans-serif,
|
|
system-ui,
|
|
-apple-system,
|
|
BlinkMacSystemFont,
|
|
"Segoe UI",
|
|
sans-serif;
|
|
letter-spacing: 0;
|
|
background: var(--boot-background);
|
|
}
|
|
|
|
.app-boot__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 14px;
|
|
}
|
|
|
|
.app-boot__mark {
|
|
position: relative;
|
|
display: grid;
|
|
width: 72px;
|
|
height: 72px;
|
|
place-items: center;
|
|
}
|
|
|
|
.app-boot__spinner {
|
|
position: absolute;
|
|
inset: 0;
|
|
box-sizing: border-box;
|
|
border: 2px solid var(--boot-border);
|
|
border-top-color: var(--boot-accent);
|
|
border-right-color: var(--boot-accent);
|
|
border-radius: 50%;
|
|
animation: app-boot-spin 900ms linear infinite;
|
|
}
|
|
|
|
.app-boot__logo {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.app-boot__message {
|
|
max-width: 320px;
|
|
margin: 0;
|
|
color: var(--boot-error);
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
text-align: center;
|
|
}
|
|
|
|
.app-boot__retry {
|
|
height: 32px;
|
|
padding: 0 12px;
|
|
color: var(--boot-foreground);
|
|
font: inherit;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
background: var(--boot-background);
|
|
border: 1px solid var(--boot-border);
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.app-boot__retry:hover {
|
|
background: color-mix(in srgb, var(--boot-foreground) 6%, var(--boot-background));
|
|
}
|
|
|
|
.app-boot--error .app-boot__spinner {
|
|
display: none;
|
|
}
|
|
|
|
[hidden] {
|
|
display: none !important;
|
|
}
|
|
|
|
@keyframes app-boot-spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.app-boot__spinner {
|
|
animation-duration: 1400ms;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div
|
|
id="app-boot"
|
|
class="app-boot"
|
|
role="status"
|
|
aria-label="应用加载中"
|
|
aria-live="polite"
|
|
aria-busy="true"
|
|
>
|
|
<div class="app-boot__content">
|
|
<div class="app-boot__mark" aria-hidden="true">
|
|
<span class="app-boot__spinner" aria-hidden="true"></span>
|
|
<img class="app-boot__logo" src="/favicon.svg" alt="" />
|
|
</div>
|
|
<p id="app-boot-message" class="app-boot__message" hidden></p>
|
|
<button id="app-boot-retry" class="app-boot__retry" type="button" hidden>重新加载</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|