自己网站的404、500等界面都用的这个模板，简洁，支持深色模式和国际化，是响应式的
兼容性未知，但应该不算太差
效果图：
Light Mode:
/pub/x9P5En-Zm7AgAX)
Dark Mode:
/pub/0OZ27J-1eWlVd4)
Mobile:
/pub/E7eaZA-xAz6rNG)
代码：
<!DOCTYPE html>
<html>
<head>
<title id="title">404-页面不存在</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
body{--theme_color:rgb(255,75,75);--theme_color_light:rgb(255,175,168);transition:0.3s}.title{font-size:180px;font-weight:100;margin-top:200px;color:var(--theme_color);line-height:180px}.main_box{max-width:100%;margin-left:15%;overflow:hidden;font-family:"PingFang SC","Microsoft Yahei",Helvetica,Arial,sans-serif;-webkit-user-select:none;user-select:none}.line{height:10px;color:var(--theme_color_light);border-top:5px solid;width:100px;margin-top:10px;margin-left:5px}.subtitle{font-size:24px;margin-left:4px;font-weight:700}.desc{color:rgba(0,0,0,0.666);font-size:16px;margin-left:10px}.btn{display:inline-block;margin-top:50px;padding:12px 28px;background-color:var(--theme_color);border-radius:6px;color:white;font-size:18px;text-decoration:none;transition:.25s;cursor:pointer;margin-left:4px}.btn:hover{background-color:var(--theme_color_light)}.contat{color:#000000}.return{color:#ffffff;text-decoration:none}@media (prefers-color-scheme:dark){body{background:rgb(22,22,22);color:white}.desc{color:rgba(255,255,255,0.666)}.contat{color:#ffffff}}@media screen and (max-width:700px){.title{font-size:120px;line-height:120px;margin-top:50px}.main_box{margin-right:5%;margin-left:5%}}@media screen and (max-height:800px) {.title {font-size: 120px;line-height: 120px;margin-top: 50px}.main_box {margin-right: 5%;margin-left: 5%}}
</style>
</head>
<body>
<div class="main_box">
<div class="title">
404
<div class="line"></div>
</div>
<div class="subtitle" id="subtitle">
页面不存在
</div>
<div class="desc" id="desc">
您遇到了404错误。它意味着您所访问的资源在服务器上不存在。<br>
如果您是通过输入网址而跳转到此界面，请检查您输入的网址。<br>
如果您是由点击官方页面上的链接而跳转到此界面，请<a href = "mailto:youmail@example.com" class="contat">联系我们</a>。<br>
</div>
<div class="btn" onclick="window.location.href='https\://example.com';">
<a href="https://example.com" class="return" id="link">返回主页</a>
</div>
</div>
<script>
//国际化
lang=navigator.language;
if(lang=="en" || lang.toLowerCase=="en-us"){
document.getElementById("desc").innerHTML=`
You encountered a 404 error. It means that the resource you are accessing does not exist on the server. <br>
If you jumped to this page by entering a URL, please check whether there is any typo in the URL. <br>
If you jumped to this page by clicking the link in the official page, please <a href = "mailto:youmail@example.com" class="contat">contact us</a>.<br>`;
document.getElementById("subtitle").innerHTML="Page Not Found";
document.title="404 Not Found";
document.getElementById("link").innerHTML="Back to home";
}
</script>
</body>
</html>