重新设计502页面为中英文版
This commit is contained in:
parent
d688fcad5e
commit
30cd6c36c8
@ -1,89 +1,209 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Sorry! We will be back soon.</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, "Open Sans", sans-serif;
|
||||
color: #36414C;
|
||||
font-weight: 300;
|
||||
}
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title id="page-title">Service Temporarily Unavailable</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
max-width: 800px;
|
||||
padding: 15px;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
html {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.svg-container {
|
||||
float: left;
|
||||
width: 150px;
|
||||
padding-top: 24px;
|
||||
}
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
color: #1A4469;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
float: left;
|
||||
padding-left: 15px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.container {
|
||||
max-width: 480px;
|
||||
width: 90%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.message-container h1 {
|
||||
font-size: 48px;
|
||||
line-height: 1.2;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.message-container .message {
|
||||
color: #8D99A6;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
clear: both;
|
||||
}
|
||||
.message-container {
|
||||
background-color: #ffffff;
|
||||
padding: 2.5rem;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
border: 1px solid rgba(31, 199, 111, 0.1);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #5E64FF;
|
||||
}
|
||||
.status-icon {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.svg-container {
|
||||
float: none;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.status-icon svg {
|
||||
height: 3rem;
|
||||
width: 3rem;
|
||||
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
|
||||
}
|
||||
|
||||
.message-container {
|
||||
float: none;
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="page-container">
|
||||
<div class="svg-container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" viewBox="0 0 32 32" version="1.1" x="0px" y="0px"><title>sad-face-avatar-boy-man-11</title><desc>Created with Sketch.</desc><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage"><path d="M24.5728851,23.0941141 C26.0847779,16.969087 23.5542402,12.1548858 21.4280864,11.0822754 C19.598459,12.7549171 13.9938462,17 10.2890466,17 C12.2343263,15.4384766 12.8488535,12.9394531 12.8488535,12.9394531 C12.8488535,12.9394531 10.9859461,15.7346191 7.24611965,17 C6.45154466,18.5731485 6.67682658,20.3507184 6.78659707,21.5361582 C6.84777749,21.7403698 6.95210509,22.0855229 6.99214296,22.1994274 C7.09055416,22.4793995 7.21210961,22.7924224 7.35775135,23.1301118 C7.774276,24.0958785 8.2986796,25.0616511 8.9372701,25.9603932 C10.738893,28.4959687 13.0675623,30 16,30 C18.9311427,30 21.2399187,28.4973998 23.0104666,25.9636063 C23.6381381,25.065359 24.1509411,24.1000358 24.5559252,23.1346951 C24.5616169,23.1211281 24.5672702,23.1076009 24.5728851,23.0941141 L24.5728851,23.0941141 Z M5.94669386,22.2116429 C4.61458602,20.1217921 3.13011281,13.1987617 4.62664708,8.75830078 C6.40621687,3.47802734 12.6103081,1 15.7729333,1 C18.8013894,1.00000002 21.8450169,1.93994141 23.0552307,3.80615234 C23.0552307,3.80615234 25.0915798,2.75024414 26.9020692,3.80615234 C25.0915798,4.17895508 24.887945,5.19335938 24.887945,5.19335938 C27.9234944,6.90377632 29.4577737,17.0840684 26.1082885,21.6811732 C26.0708438,21.8119773 25.9120331,22.3649335 25.857287,22.526075 C25.7549564,22.8272785 25.6289716,23.1618434 25.4780638,23.5215549 C25.0472763,24.5484017 24.5017812,25.575266 23.8301706,26.5363937 C21.888484,29.3151002 19.2996007,31 16,31 C12.7016943,31 10.0952049,29.3165313 8.12209422,26.5396068 C7.43952798,25.5789739 6.88219633,24.552559 6.43951227,23.5261382 C6.28443097,23.166562 6.15455941,22.832124 6.04872776,22.5310413 C6.02660008,22.4680898 5.98792403,22.3454665 5.94669386,22.2116429 L5.94669386,22.2116429 Z M20.6103625,20.496219 L21.7234973,21.0527864 C21.9704865,21.176281 22.0705987,21.4766175 21.9471041,21.7236068 C21.8236094,21.970596 21.5232729,22.0707082 21.2762837,21.9472136 L19.2762837,20.9472136 C18.9077594,20.7629515 18.9077594,20.2370485 19.2762837,20.0527864 L21.2762837,19.0527864 C21.5232729,18.9292918 21.8236094,19.029404 21.9471041,19.2763932 C22.0705987,19.5233825 21.9704865,19.823719 21.7234973,19.9472136 L20.6103625,20.496219 Z M11.389528,20.496219 L10.2763932,21.0527864 C10.029404,21.176281 9.92929178,21.4766175 10.0527864,21.7236068 C10.176281,21.970596 10.4766175,22.0707082 10.7236068,21.9472136 L12.7236068,20.9472136 C13.0921311,20.7629515 13.0921311,20.2370485 12.7236068,20.0527864 L10.7236068,19.0527864 C10.4766175,18.9292918 10.176281,19.029404 10.0527864,19.2763932 C9.92929178,19.5233825 10.029404,19.823719 10.2763932,19.9472136 L11.389528,20.496219 Z M14.4246316,26.7639848 C14.4725953,26.6868331 14.5938453,26.5444206 14.7863941,26.3975309 C15.1127054,26.1485979 15.512309,26 16,26 C16.487691,26 16.8872946,26.1485979 17.2136059,26.3975309 C17.4061547,26.5444206 17.5274047,26.6868331 17.5753684,26.7639848 C17.7211632,26.9985024 18.0294673,27.0704264 18.2639848,26.9246316 C18.4985024,26.7788368 18.5704264,26.4705327 18.4246316,26.2360152 C18.3171754,26.0631669 18.1191505,25.8305794 17.8201344,25.6024691 C17.3271707,25.2264021 16.7183393,25 16,25 C15.2816607,25 14.6728293,25.2264021 14.1798656,25.6024691 C13.8808495,25.8305794 13.6828246,26.0631669 13.5753684,26.2360152 C13.4295736,26.4705327 13.5014976,26.7788368 13.7360152,26.9246316 C13.9705327,27.0704264 14.2788368,26.9985024 14.4246316,26.7639848 Z" fill="#000000" sketch:type="MSShapeGroup"></path></g></svg>
|
||||
</div>
|
||||
<div class="message-container" style="width: calc(100% - 170px);">
|
||||
<h1>
|
||||
Sorry! <br>
|
||||
We will be back soon.
|
||||
</h1>
|
||||
<p class="message">
|
||||
<strong>Don't panic.</strong> It's not you, it's us.<br>
|
||||
Most likely, our engineers are updating the code,
|
||||
and it should take a minute for the new code to load into memory.<br><br>
|
||||
Try refreshing after a minute or two.
|
||||
</p>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</body>
|
||||
.main-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
color: #171717;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: #64748b;
|
||||
line-height: 1.6;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.message strong {
|
||||
color: #334155;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.refresh-hint {
|
||||
margin-top: 1.5rem;
|
||||
padding: 1rem;
|
||||
background-color: #f8fafc;
|
||||
border-radius: 0.5rem;
|
||||
border-left: 4px solid #1fc76f;
|
||||
}
|
||||
|
||||
.refresh-hint p {
|
||||
color: #475569;
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.language-toggle {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.language-toggle:hover {
|
||||
border-color: #1fc76f;
|
||||
box-shadow: 0 4px 12px -1px rgba(31, 199, 111, 0.2);
|
||||
}
|
||||
|
||||
.language-toggle span {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.container {
|
||||
width: 95%;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.message-container {
|
||||
padding: 2rem 1.5rem;
|
||||
}
|
||||
|
||||
.main-title {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="language-toggle" onclick="toggleLanguage()">
|
||||
<span id="lang-text">EN</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<div class="message-container">
|
||||
<div class="status-icon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="72" height="72" fill="rgba(31,199,111,1)">
|
||||
<path d="M3.51472 2.10051L22.6066 21.1924L21.1924 22.6066L19.1782 20.5924C18.503 20.8556 17.7684 21 17 21H7C3.68629 21 1 18.3137 1 15C1 12.3846 2.67346 10.16 5.00804 9.33857C5.0027 9.22639 5 9.11351 5 9C5 8.22228 5.12683 7.47418 5.36094 6.77527L2.10051 3.51472L3.51472 2.10051ZM7 9C7 9.08147 7.00193 9.16263 7.00578 9.24344L7.07662 10.7309L5.67183 11.2252C4.0844 11.7837 3 13.2889 3 15C3 17.2091 4.79086 19 7 19H17C17.1858 19 17.3687 18.9873 17.5478 18.9628L7.03043 8.44519C7.01032 8.62736 7 8.81247 7 9ZM12 2C15.866 2 19 5.13401 19 9C19 9.11351 18.9973 9.22639 18.992 9.33857C21.3265 10.16 23 12.3846 23 15C23 16.0883 22.7103 17.1089 22.2037 17.9889L20.7111 16.4955C20.8974 16.0335 21 15.5287 21 15C21 12.79 19.21 11 17 11C16.4711 11 15.9661 11.1027 15.5039 11.2892L14.0111 9.7964C14.8912 9.28978 15.9118 9 17 9C17 6.23858 14.7614 4 12 4C10.9295 4 9.93766 4.33639 9.12428 4.90922L7.69418 3.48056C8.88169 2.55284 10.3763 2 12 2Z"></path>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h1 class="main-title" id="main-title">
|
||||
Sorry!<br>
|
||||
We will be back soon.
|
||||
</h1>
|
||||
|
||||
<p class="message" id="main-message">
|
||||
<strong>Don't panic.</strong> It's not you, it's us.<br><br>
|
||||
Most likely, our engineers are updating the code, and it should take a minute for the new code to load into memory.
|
||||
</p>
|
||||
|
||||
<div class="refresh-hint">
|
||||
<p id="refresh-hint">Try refreshing after a minute or two.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 国际化内容
|
||||
const i18n = {
|
||||
en: {
|
||||
title: 'Service Temporarily Unavailable',
|
||||
mainTitle: 'Sorry!<br>Service is temporarily unavailable.',
|
||||
mainMessage: '<br>Most likely, our engineers are updating the code, and it should take a minute for updating.',
|
||||
refreshHint: 'Try refreshing after a minute or two.',
|
||||
langText: 'EN'
|
||||
},
|
||||
zh: {
|
||||
title: '服务暂时不可用',
|
||||
mainTitle: '抱歉！<br>服务暂时不可用。',
|
||||
mainMessage: '<br>很可能是我们的工程师正在更新代码，更新需要一点时间。',
|
||||
refreshHint: '请在一两分钟后刷新页面。',
|
||||
langText: '中'
|
||||
}
|
||||
};
|
||||
|
||||
let currentLang = 'en';
|
||||
|
||||
function getLang() {
|
||||
const lang = navigator.language || navigator.userLanguage;
|
||||
if (lang && lang.toLowerCase().startsWith('zh')) {
|
||||
return 'zh';
|
||||
}
|
||||
return 'en';
|
||||
}
|
||||
|
||||
function updateContent(lang) {
|
||||
const dict = i18n[lang];
|
||||
document.getElementById('page-title').innerText = dict.title;
|
||||
document.getElementById('main-title').innerHTML = dict.mainTitle;
|
||||
document.getElementById('main-message').innerHTML = dict.mainMessage;
|
||||
document.getElementById('refresh-hint').innerText = dict.refreshHint;
|
||||
document.getElementById('lang-text').innerText = dict.langText;
|
||||
}
|
||||
|
||||
function toggleLanguage() {
|
||||
currentLang = currentLang === 'en' ? 'zh' : 'en';
|
||||
updateContent(currentLang);
|
||||
}
|
||||
|
||||
// 初始化
|
||||
currentLang = getLang();
|
||||
updateContent(currentLang);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user