统一维护与错误页面并修复移动端顶部文案
新增品牌维护页和404页面并补齐网关路由 将临时维护公告迁到release外运行态覆盖并增加构建门禁 同步Nginx、Pingora、部署脚本与生产运维文档 隐藏移动端顶部SEO介绍并保留桌面端与H1语义 增加维护页、404页和移动端回归测试
This commit is contained in:
+213
@@ -0,0 +1,213 @@
|
||||
<!doctype html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<link rel="icon" type="image/png" href="/branding/taonier-product-ip.png" />
|
||||
<title>页面无法连接 - 陶泥儿</title>
|
||||
<style>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
background: #fff8f4;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-art {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
.mobile-page {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (max-aspect-ratio: 4 / 5) {
|
||||
.page-art {
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
body {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.page-art {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mobile-page {
|
||||
position: relative;
|
||||
visibility: visible;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
height: auto;
|
||||
margin: 0;
|
||||
padding: 36px 24px 30px;
|
||||
overflow: visible;
|
||||
clip: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #563018;
|
||||
text-align: center;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.mobile-page h1 {
|
||||
margin: 0;
|
||||
color: #ef762f;
|
||||
font-size: 68px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mobile-page h2 {
|
||||
margin: 12px 0 0;
|
||||
font-size: 28px;
|
||||
line-height: 1.3;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mobile-page p {
|
||||
max-width: 300px;
|
||||
margin: 12px 0 0;
|
||||
color: #86563d;
|
||||
font-size: 15px;
|
||||
line-height: 1.7;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.mobile-character {
|
||||
width: min(64vw, 250px);
|
||||
height: auto;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
.mobile-actions a,
|
||||
.mobile-actions button {
|
||||
display: inline-flex;
|
||||
height: 42px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 18px;
|
||||
border: 1px solid #e98a54;
|
||||
border-radius: 8px;
|
||||
background: #fff8f4;
|
||||
color: #d86228;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.mobile-actions .primary {
|
||||
background: #ef7939;
|
||||
color: #fff;
|
||||
box-shadow: 0 8px 20px rgb(205 100 44 / 16%);
|
||||
}
|
||||
|
||||
.mobile-actions a:focus-visible,
|
||||
.mobile-actions button:focus-visible {
|
||||
outline: 3px solid rgb(239 121 57 / 28%);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 680px) and (max-height: 720px) {
|
||||
.mobile-page {
|
||||
padding-top: 24px;
|
||||
padding-bottom: 22px;
|
||||
}
|
||||
|
||||
.mobile-page h1 {
|
||||
font-size: 58px;
|
||||
}
|
||||
|
||||
.mobile-page h2 {
|
||||
margin-top: 8px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.mobile-page p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.mobile-character {
|
||||
width: 190px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.mobile-actions {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img
|
||||
class="page-art"
|
||||
src="/branding/taonier-404-page.png"
|
||||
alt="404 页面无法连接，您访问的页面不存在或已被移除"
|
||||
width="1672"
|
||||
height="941"
|
||||
/>
|
||||
<main class="mobile-page">
|
||||
<h1>404</h1>
|
||||
<h2>页面无法连接</h2>
|
||||
<p>抱歉，您访问的页面不存在或已被移除。</p>
|
||||
<img
|
||||
class="mobile-character"
|
||||
src="/branding/taonier-404-character.png"
|
||||
alt="陶泥儿从陶罐中探出头，旁边放着施工路障"
|
||||
width="470"
|
||||
height="590"
|
||||
/>
|
||||
<div class="mobile-actions">
|
||||
<button
|
||||
type="button"
|
||||
onclick="window.history.length > 1 ? window.history.back() : (window.location.href = '/')"
|
||||
>
|
||||
返回上一页
|
||||
</button>
|
||||
<a class="primary" href="/">前往首页</a>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 274 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 886 KiB |
+126
-115
@@ -4,44 +4,72 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>陶泥儿停服升级公告</title>
|
||||
<link rel="icon" type="image/png" href="/branding/taonier-product-ip.png" />
|
||||
<title>服务维护中 - 陶泥儿</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
color-scheme: light;
|
||||
font-family:
|
||||
Inter,
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
"Segoe UI",
|
||||
sans-serif;
|
||||
background: #101418;
|
||||
color: #f7f9fb;
|
||||
color: #5d2c13;
|
||||
background: #fff9f5;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background: #101418;
|
||||
min-height: 100dvh;
|
||||
overflow: hidden;
|
||||
background: #fff9f5;
|
||||
}
|
||||
|
||||
.page-art {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
object-position: center;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(100% - 32px, 720px);
|
||||
margin: 0 auto;
|
||||
padding: 56px 0 64px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
min-height: 100dvh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 72px 24px 120px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: min(100%, 680px);
|
||||
}
|
||||
|
||||
.status {
|
||||
display: flex;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 22px;
|
||||
color: #ffb36b;
|
||||
font-size: 14px;
|
||||
margin-bottom: 20px;
|
||||
color: #e76d2f;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@@ -50,138 +78,121 @@
|
||||
height: 10px;
|
||||
flex: 0 0 10px;
|
||||
border-radius: 50%;
|
||||
background: #ff8a3d;
|
||||
box-shadow: 0 0 0 5px rgb(255 138 61 / 14%);
|
||||
background: #f27a35;
|
||||
box-shadow: 0 0 0 6px rgb(242 122 53 / 13%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: 32px;
|
||||
color: #6a3216;
|
||||
font-size: 42px;
|
||||
line-height: 1.25;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.lead {
|
||||
p {
|
||||
margin: 18px 0 0;
|
||||
color: #d5dde5;
|
||||
font-size: 17px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.window {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 8px 18px;
|
||||
margin: 30px 0 0;
|
||||
padding: 18px 20px;
|
||||
border: 1px solid #3c4650;
|
||||
border-left: 4px solid #ff8a3d;
|
||||
border-radius: 6px;
|
||||
background: #171d22;
|
||||
}
|
||||
|
||||
.window-label {
|
||||
color: #9eabb8;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.window-value {
|
||||
color: #fff2e7;
|
||||
font-size: 16px;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
section {
|
||||
margin-top: 34px;
|
||||
padding-top: 28px;
|
||||
border-top: 1px solid #303942;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 0 14px;
|
||||
color: #86563d;
|
||||
font-size: 18px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: 24px;
|
||||
color: #d5dde5;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 10px 0;
|
||||
padding-left: 4px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
|
||||
.feature {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
border-left: 3px solid #53c7a3;
|
||||
color: #d5dde5;
|
||||
line-height: 1.8;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.feature strong {
|
||||
color: #7be0c0;
|
||||
button {
|
||||
min-width: 132px;
|
||||
height: 44px;
|
||||
margin-top: 30px;
|
||||
padding: 0 24px;
|
||||
border: 1px solid #ed8a51;
|
||||
border-radius: 8px;
|
||||
background: #ef7939;
|
||||
color: #fff;
|
||||
font: inherit;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 8px 20px rgb(205 100 44 / 16%);
|
||||
}
|
||||
|
||||
@media (max-width: 520px) {
|
||||
button:hover {
|
||||
background: #df682d;
|
||||
}
|
||||
|
||||
button:focus-visible {
|
||||
outline: 3px solid rgb(239 121 57 / 28%);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
@media (max-width: 680px) {
|
||||
main {
|
||||
width: min(100% - 28px, 720px);
|
||||
padding: 38px 0 48px;
|
||||
padding: 52px 38px 108px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 27px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.lead {
|
||||
p {
|
||||
margin-top: 14px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.window {
|
||||
grid-template-columns: 1fr;
|
||||
button {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-height: 620px) {
|
||||
main {
|
||||
padding-top: 44px;
|
||||
padding-bottom: 76px;
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 10px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 40px;
|
||||
margin-top: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<img
|
||||
class="page-art"
|
||||
src="/branding/taonier-maintenance-page.png"
|
||||
alt=""
|
||||
aria-hidden="true"
|
||||
width="1672"
|
||||
height="941"
|
||||
/>
|
||||
<main>
|
||||
<div class="status">
|
||||
<span class="status-mark" aria-hidden="true"></span>
|
||||
<span>服务维护中</span>
|
||||
<div class="content">
|
||||
<div class="status">
|
||||
<span class="status-mark" aria-hidden="true"></span>
|
||||
<span>系统维护中</span>
|
||||
</div>
|
||||
<h1>服务维护中</h1>
|
||||
<p>我们正在更新系统，稍后请重新访问。</p>
|
||||
<button type="button" onclick="window.location.reload()">刷新页面</button>
|
||||
</div>
|
||||
|
||||
<h1>陶泥儿美术工具停服升级</h1>
|
||||
<p class="lead">
|
||||
各位陶泥儿创作者，美术工具官网将在今天晚上 21:00~22:00 停服升级。<br />
|
||||
注意保存好自己的项目和下载好素材。
|
||||
</p>
|
||||
|
||||
<div class="window" aria-label="维护时间">
|
||||
<span class="window-label">维护时间</span>
|
||||
<span class="window-value">今天晚上 21:00~22:00</span>
|
||||
</div>
|
||||
|
||||
<section>
|
||||
<h2>本次更新修复内容</h2>
|
||||
<ol>
|
||||
<li>修复多个影响画布使用的 BUG。</li>
|
||||
<li>
|
||||
修复了 PC 端不能充值的恶性 BUG（bushi），PC
|
||||
网页端支持微信二维码充值。
|
||||
</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2>新增功能</h2>
|
||||
<p class="feature">
|
||||
<strong>抠图与背景色功能升级：</strong
|
||||
>使用更强、更稳定的抠图技术，解决角色扣残问题，角色动作的逐帧抠图同步升级。
|
||||
</p>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user