xyou
f70b061d1a
CI / Go Backend (push) Canceled after 0s
初始化 monorepo: Go后端(7微服务) + Unity客户端(9模块) + 启动器 HTML5原型: Three.js 3D体素世界, Perlin噪声地形, 原版材质, 22种方块 Minecraft创造模式背包: 双栏布局, 拖拽移动物品, 方向性元件引脚 AI助搭策划文档 + 客户端/服务端骨架 + Docker Compose + CI
145 lines
4.4 KiB
HTML
145 lines
4.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta content="noindex" name="robots">
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
||
<link id="favicon" rel="icon">
|
||
<title>PCL 社区版提示页</title>
|
||
<style>
|
||
:root {
|
||
--hue: 210deg;
|
||
--sat: 85%;
|
||
--light: 80%;
|
||
--lighter: 90%;
|
||
--hue1: 195deg;
|
||
--hue2: 225deg;
|
||
--fg: #111;
|
||
--bg-panel: #fff8;
|
||
@media (prefers-color-scheme: dark) {
|
||
--light: 12%;
|
||
--lighter: 8%;
|
||
--fg: #eee;
|
||
--bg-panel: #4446;
|
||
}
|
||
}
|
||
|
||
body {
|
||
--bg-root-url: none;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
height: 100vh;
|
||
margin: 0;
|
||
color: var(--fg);
|
||
background-image: linear-gradient(to bottom left,
|
||
hsl(var(--hue1), var(--sat), var(--light)),
|
||
hsl(var(--hue), var(--sat), var(--lighter)),
|
||
hsl(var(--hue2), var(--sat), var(--light))),
|
||
var(--bg-root-url);
|
||
background-size: cover;
|
||
background-position: center;
|
||
transition: background-image 0.5s ease-in-out;
|
||
}
|
||
|
||
@keyframes expand {
|
||
0% {
|
||
transform: scaleY(0%);
|
||
}
|
||
30% {
|
||
transform: scaleY(0%);
|
||
}
|
||
70% {
|
||
transform: scaleY(115%)
|
||
}
|
||
100% {
|
||
transform: scaleY(100%);
|
||
}
|
||
}
|
||
|
||
.panel {
|
||
max-width: 34em;
|
||
padding: 4em;
|
||
overflow: hidden;
|
||
will-change: transform;
|
||
animation: expand 0.5s forwards;
|
||
animation-timing-function: ease-out;
|
||
animation-play-state: paused;
|
||
background-color: var(--bg-panel);
|
||
border-radius: .6em;
|
||
}
|
||
|
||
.title {
|
||
font-size: 2em;
|
||
font-weight: bold;
|
||
margin-bottom: 1em;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.content {
|
||
font-size: 1.5em;
|
||
}
|
||
|
||
.stacktrace {
|
||
font-size: .5em;
|
||
font-family: 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body id="root">
|
||
<div class="panel" id="panel">
|
||
<div class="title">
|
||
<img alt="icon" src="/assets/icon" style="margin-right:.4em" width="64">
|
||
<span id="title">加载中...</span>
|
||
</div>
|
||
<div class="content" id="content">加载中...</div>
|
||
<div class="stacktrace" id="stacktrace"></div>
|
||
</div>
|
||
<script>
|
||
let root = document.getElementById("root");
|
||
let panel = document.getElementById("panel");
|
||
let title = document.getElementById("title");
|
||
let content = document.getElementById("content");
|
||
let stacktrace = document.getElementById("stacktrace");
|
||
let favicon = document.getElementById("favicon");
|
||
fetch("/assets/background").then(async response => {
|
||
if (!response.ok) {
|
||
console.warn(`Fetching background image returns ${response.status}`);
|
||
return;
|
||
}
|
||
const blob = await response.blob();
|
||
root.style.setProperty("--bg-root-url", `url(${URL.createObjectURL(blob)})`);
|
||
});
|
||
fetch("/assets/icon").then(async response => {
|
||
if (!response.ok) {
|
||
console.warn(`Fetching favicon image returns ${response.status}`);
|
||
return;
|
||
}
|
||
const blob = await response.blob();
|
||
favicon.href = URL.createObjectURL(blob);
|
||
});
|
||
fetch("/status").then(async response => {
|
||
if (!response.ok) {
|
||
console.warn(`Fetching status returns ${response.status}`);
|
||
return;
|
||
}
|
||
const status = await response.json();
|
||
if (status.success) {
|
||
title.innerText = `欢迎回来, ${status.username}！`;
|
||
content.innerText = "已完成登录授权，现在可以安全关闭浏览器窗口";
|
||
} else {
|
||
title.innerText = "出现错误";
|
||
title.style.color = "red";
|
||
content.innerText = status.message;
|
||
if (status.stacktrace) {
|
||
content.style.marginBottom = "1em";
|
||
stacktrace.innerText = status.stacktrace;
|
||
}
|
||
}
|
||
panel.style.animationPlayState = "running";
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|