mirror of
https://github.com/ZeroCatDev/Classworks.git
synced 2025-10-21 17:53:10 +00:00
85 lines
3.3 KiB
HTML
85 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<link rel="icon" href="/favicon.ico">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Classworks 作业板</title>
|
||
<meta name="description" content="记录，查看并同步作业" />
|
||
<link rel="apple-touch-icon" href="/image/apple-touch-icon.png" sizes="180x180" />
|
||
<link rel="mask-icon" href="/image/mask-icon.svg" color="#212121" />
|
||
<meta name="theme-color" content="#212121" />
|
||
<style>
|
||
/* Material 3 风格：纯 CSS 加载覆盖层 */
|
||
:root {
|
||
color-scheme: light dark;
|
||
/* 作为主色的近似值，后续由应用接管主题 */
|
||
--md3-primary: #6750A4; /* light primary */
|
||
--md3-primary-dark: #D0BCFF; /* dark primary */
|
||
--loader-bg: #ffffff;
|
||
--loader-fg: var(--md3-primary);
|
||
}
|
||
@media (prefers-color-scheme: dark) {
|
||
:root {
|
||
--loader-bg: #121212;
|
||
--loader-fg: var(--md3-primary-dark);
|
||
}
|
||
}
|
||
#app-loader {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 2147483647; /* 确保在最上层 */
|
||
display: grid;
|
||
place-items: center;
|
||
background: var(--loader-bg);
|
||
transition: opacity .2s ease;
|
||
}
|
||
#app-loader .md3-loader {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14px;
|
||
color: var(--loader-fg);
|
||
}
|
||
/* 圆形不确定进度条（近似 M3） */
|
||
#app-loader .spinner {
|
||
width: 48px;
|
||
height: 48px;
|
||
border-radius: 50%;
|
||
/* 通过 conic-gradient 形成 90° 弧，并旋转实现不确定动画 */
|
||
background:
|
||
conic-gradient(from 0deg, currentColor 0 90deg, transparent 90deg 360deg);
|
||
/* 用 mask 形成环形厚度（4px） */
|
||
-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
|
||
mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
|
||
animation: md3-spin 1s linear infinite;
|
||
}
|
||
@keyframes md3-spin {
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
#app-loader .label {
|
||
font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
|
||
color: var(--loader-fg);
|
||
letter-spacing: .2px;
|
||
opacity: .85;
|
||
-webkit-user-select: none;
|
||
user-select: none;
|
||
}
|
||
/* 当被移除或隐藏时可渐隐（由应用控制） */
|
||
body.app-loaded #app-loader { opacity: 0; pointer-events: none; }
|
||
</style>
|
||
<script defer src="https://umami.wuyuan.dev/script.js" data-website-id="e3f8ed7a-4db4-4081-aaf4-45396b1f479c"></script>
|
||
</head>
|
||
<body>
|
||
<!-- 应用加载前显示的覆盖层：纯 CSS，无脚本依赖 -->
|
||
<div id="app-loader" aria-live="polite" aria-busy="true">
|
||
<div class="md3-loader">
|
||
<div class="spinner" role="progressbar" aria-label="正在加载"></div>
|
||
</div>
|
||
</div>
|
||
<div id="app"></div>
|
||
<script type="module" src="/src/main.js"></script>
|
||
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noopener" style="display: none;">浙ICP备2024068645号-4</a>
|
||
</body>
|
||
</html>
|