refactor(nginx): 优化 404 页面的代码结构和样式
- 调整了 HTML 结构，使其更加简洁 - 优化了 CSS 样式，提高了页面的视觉效果 - 添加了响应式设计，使页面在不同设备上显示更佳 - 改进了 JavaScript 代码，提高了页面的交互性
This commit is contained in:
203
html/404.html
Normal file
203
html/404.html
Normal file
@@ -0,0 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="auto">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title id="page-title">Page Not Found - 404</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #4361ee;
|
||||
--secondary-color: #3f37c9;
|
||||
--text-color: #2b2d42;
|
||||
--bg-color: #f8f9fa;
|
||||
--error-color: #ef233c;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 8rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error-code::after {
|
||||
content: "404";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgba(67, 97, 238, 0.1);
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.8rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(67, 97, 238, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="error-code animation">404</div>
|
||||
<h1 id="heading">Page Not Found</h1>
|
||||
<p id="message">
|
||||
The page you're looking for might have been moved, deleted, or doesn't
|
||||
exist.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a href="/" class="btn btn-primary" id="home-btn">Go to Homepage</a>
|
||||
<a
|
||||
href="javascript:history.back()"
|
||||
class="btn btn-secondary"
|
||||
id="back-btn"
|
||||
>Go Back</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Language detection and content switching
|
||||
function setLanguage() {
|
||||
const userLanguage = navigator.language || navigator.userLanguage;
|
||||
const isChinese = userLanguage.toLowerCase().includes("zh-cn");
|
||||
|
||||
if (isChinese) {
|
||||
document.getElementById("page-title").textContent =
|
||||
"页面未找到 - 404";
|
||||
document.getElementById("heading").textContent = "页面未找到";
|
||||
document.getElementById("message").textContent =
|
||||
"您访问的页面可能已被移动、删除或暂时不可用。";
|
||||
document.getElementById("home-btn").textContent = "返回首页";
|
||||
document.getElementById("back-btn").textContent = "返回上一页";
|
||||
|
||||
console.log(
|
||||
"%c404 - 页面未找到",
|
||||
"color: #4361ee; font-size: 2em; font-weight: bold;"
|
||||
);
|
||||
console.log(
|
||||
"%c您似乎迷路了，但别担心！点击上面的按钮可以找到回去的路。",
|
||||
"color: #2b2d42; font-size: 1.1em;"
|
||||
);
|
||||
} else {
|
||||
console.log(
|
||||
"%c404 - Page Not Found",
|
||||
"color: #4361ee; font-size: 2em; font-weight: bold;"
|
||||
);
|
||||
console.log(
|
||||
"%cLooks like you're lost! Use the buttons above to find your way back.",
|
||||
"color: #2b2d42; font-size: 1.1em;"
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Set language on page load
|
||||
window.addEventListener("DOMContentLoaded", setLanguage);
|
||||
|
||||
// Simple parallax effect
|
||||
document.addEventListener("mousemove", function (e) {
|
||||
const container = document.querySelector(".container");
|
||||
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
|
||||
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
|
||||
container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
13
html/README.md
Normal file
13
html/README.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# HTML网页
|
||||
|
||||
## 浏览器主页
|
||||
|
||||
```bash
|
||||
curl -fSL https://i.sugarscat.cn/i/script/raw/main/html/start.html > start.html
|
||||
```
|
||||
|
||||
## 404页面
|
||||
|
||||
```bash
|
||||
curl -fSL https://i.sugarscat.cn/i/script/raw/main/html/404.html > 404.html
|
||||
```
|
||||
399
html/start.html
Normal file
399
html/start.html
Normal file
@@ -0,0 +1,399 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Start</title>
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
:root {
|
||||
--bg-color: #ffffff;
|
||||
--text-color: #202124;
|
||||
--search-bg: #ffffff;
|
||||
--search-border: #dfe1e5;
|
||||
--search-hover: #f8f9fa;
|
||||
--search-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
|
||||
--btn-bg: #f8f9fa;
|
||||
--btn-text: #3c4043;
|
||||
}
|
||||
|
||||
.dark-mode {
|
||||
--bg-color: #202124;
|
||||
--text-color: #e8eaed;
|
||||
--search-bg: #303134;
|
||||
--search-border: #5f6368;
|
||||
--search-hover: #303134;
|
||||
--search-shadow: 0 1px 6px rgba(0, 0, 0, 0.28);
|
||||
--btn-bg: #303134;
|
||||
--btn-text: #e8eaed;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "HarmonyOS Sans SC", "Microsoft YaHei", "Punctuation SC",
|
||||
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
|
||||
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 584px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.time-display {
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time {
|
||||
font-size: 6rem;
|
||||
font-weight: 400;
|
||||
letter-spacing: -3px;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.search-engine-selector {
|
||||
position: absolute;
|
||||
left: 14px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-engine-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-engine-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.search-engine-dropdown {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 100%;
|
||||
margin-top: 8px;
|
||||
background: var(--search-bg);
|
||||
border-radius: 8px;
|
||||
box-shadow: var(--search-shadow);
|
||||
padding: 8px 0;
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
min-width: 160px;
|
||||
z-index: 20;
|
||||
border: 1px solid var(--search-border);
|
||||
}
|
||||
|
||||
.search-engine-dropdown.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.search-engine-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 8px 16px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.search-engine-option:hover {
|
||||
background-color: var(--search-hover);
|
||||
}
|
||||
|
||||
.search-engine-option-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 13px 20px 13px 50px;
|
||||
font-size: 16px;
|
||||
border: 1px solid var(--search-border);
|
||||
border-radius: 24px;
|
||||
background-color: var(--search-bg);
|
||||
color: var(--text-color);
|
||||
outline: none;
|
||||
transition: box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.search-input:hover,
|
||||
.search-input:focus {
|
||||
box-shadow: var(--search-shadow);
|
||||
border-color: rgba(223, 225, 229, 0);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.time {
|
||||
font-size: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.time {
|
||||
font-size: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="time-display">
|
||||
<div class="time" id="time">00:00</div>
|
||||
</div>
|
||||
|
||||
<div class="search-container">
|
||||
<div class="search-engine-selector">
|
||||
<button class="search-engine-btn" id="searchEngineBtn">
|
||||
<img
|
||||
class="search-engine-icon"
|
||||
id="currentEngineIcon"
|
||||
src="https://www.google.com/favicon.ico"
|
||||
alt="Google"
|
||||
/>
|
||||
</button>
|
||||
<div class="search-engine-dropdown" id="searchEngineDropdown">
|
||||
<div
|
||||
class="search-engine-option"
|
||||
data-engine="google"
|
||||
data-icon="https://www.google.com/favicon.ico"
|
||||
>
|
||||
<img
|
||||
class="search-engine-option-icon"
|
||||
src="https://www.google.com/favicon.ico"
|
||||
alt="Google"
|
||||
/>
|
||||
<span>Google</span>
|
||||
</div>
|
||||
<div
|
||||
class="search-engine-option"
|
||||
data-engine="baidu"
|
||||
data-icon="https://www.baidu.com/favicon.ico"
|
||||
>
|
||||
<img
|
||||
class="search-engine-option-icon"
|
||||
src="https://www.baidu.com/favicon.ico"
|
||||
alt="Baidu"
|
||||
/>
|
||||
<span>百度</span>
|
||||
</div>
|
||||
<div
|
||||
class="search-engine-option"
|
||||
data-engine="bing"
|
||||
data-icon="https://www.bing.com/favicon.ico"
|
||||
>
|
||||
<img
|
||||
class="search-engine-option-icon"
|
||||
src="https://www.bing.com/favicon.ico"
|
||||
alt="Bing"
|
||||
/>
|
||||
<span>Bing</span>
|
||||
</div>
|
||||
<div
|
||||
class="search-engine-option"
|
||||
data-engine="duckduckgo"
|
||||
data-icon="https://duckduckgo.com/favicon.ico"
|
||||
>
|
||||
<img
|
||||
class="search-engine-option-icon"
|
||||
src="https://duckduckgo.com/favicon.ico"
|
||||
alt="DuckDuckGo"
|
||||
/>
|
||||
<span>DuckDuckGo</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
id="searchInput"
|
||||
placeholder="使用 Google 搜索"
|
||||
autofocus
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// 检测系统主题偏好
|
||||
function detectColorScheme() {
|
||||
if (
|
||||
window.matchMedia &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
) {
|
||||
document.body.classList.add("dark-mode");
|
||||
} else {
|
||||
document.body.classList.remove("dark-mode");
|
||||
}
|
||||
}
|
||||
|
||||
// 监听系统主题变化
|
||||
window
|
||||
.matchMedia("(prefers-color-scheme: dark)")
|
||||
.addEventListener("change", (e) => {
|
||||
if (e.matches) {
|
||||
document.body.classList.add("dark-mode");
|
||||
} else {
|
||||
document.body.classList.remove("dark-mode");
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化主题
|
||||
detectColorScheme();
|
||||
|
||||
// 更新时间
|
||||
function updateTime() {
|
||||
const now = new Date();
|
||||
const timeElement = document.getElementById("time");
|
||||
|
||||
// 格式化时间
|
||||
const hours = now.getHours().toString().padStart(2, "0");
|
||||
const minutes = now.getMinutes().toString().padStart(2, "0");
|
||||
timeElement.textContent = `${hours}:${minutes}`;
|
||||
}
|
||||
|
||||
// 初始更新时间并设置定时器
|
||||
updateTime();
|
||||
setInterval(updateTime, 1000);
|
||||
|
||||
// 保存和加载搜索引擎偏好
|
||||
function getSavedEngine() {
|
||||
const savedEngine = localStorage.getItem("searchEngine");
|
||||
return savedEngine || "google";
|
||||
}
|
||||
|
||||
function saveEngine(engine) {
|
||||
localStorage.setItem("searchEngine", engine);
|
||||
}
|
||||
|
||||
// 搜索引擎切换功能
|
||||
const searchEngineBtn = document.getElementById("searchEngineBtn");
|
||||
const searchEngineDropdown = document.getElementById(
|
||||
"searchEngineDropdown"
|
||||
);
|
||||
const currentEngineIcon = document.getElementById("currentEngineIcon");
|
||||
const searchInput = document.getElementById("searchInput");
|
||||
|
||||
let currentEngine = getSavedEngine();
|
||||
|
||||
// 初始化搜索引擎
|
||||
function initSearchEngine() {
|
||||
const engineOption = document.querySelector(
|
||||
`.search-engine-option[data-engine="${currentEngine}"]`
|
||||
);
|
||||
if (engineOption) {
|
||||
currentEngineIcon.src = engineOption.dataset.icon;
|
||||
|
||||
// 更新搜索框占位符
|
||||
switch (currentEngine) {
|
||||
case "google":
|
||||
searchInput.placeholder = "使用 Google 搜索";
|
||||
break;
|
||||
case "baidu":
|
||||
searchInput.placeholder = "使用百度搜索";
|
||||
break;
|
||||
case "bing":
|
||||
searchInput.placeholder = "使用 Bing 搜索";
|
||||
break;
|
||||
case "duckduckgo":
|
||||
searchInput.placeholder = "使用 DuckDuckGo 搜索";
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 切换搜索引擎下拉菜单
|
||||
searchEngineBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
searchEngineDropdown.classList.toggle("show");
|
||||
});
|
||||
|
||||
// 选择搜索引擎
|
||||
document.querySelectorAll(".search-engine-option").forEach((option) => {
|
||||
option.addEventListener("click", () => {
|
||||
currentEngine = option.dataset.engine;
|
||||
currentEngineIcon.src = option.dataset.icon;
|
||||
searchEngineDropdown.classList.remove("show");
|
||||
saveEngine(currentEngine);
|
||||
|
||||
// 更新搜索框占位符
|
||||
switch (currentEngine) {
|
||||
case "google":
|
||||
searchInput.placeholder = "使用 Google 搜索";
|
||||
break;
|
||||
case "baidu":
|
||||
searchInput.placeholder = "使用百度搜索";
|
||||
break;
|
||||
case "bing":
|
||||
searchInput.placeholder = "使用 Bing 搜索";
|
||||
break;
|
||||
case "duckduckgo":
|
||||
searchInput.placeholder = "使用 DuckDuckGo 搜索";
|
||||
break;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 点击其他地方关闭下拉菜单
|
||||
document.addEventListener("click", () => {
|
||||
searchEngineDropdown.classList.remove("show");
|
||||
});
|
||||
|
||||
// 回车键搜索
|
||||
searchInput.addEventListener("keypress", (e) => {
|
||||
if (e.key === "Enter") {
|
||||
const query = encodeURIComponent(searchInput.value.trim());
|
||||
let searchUrl = "";
|
||||
|
||||
switch (currentEngine) {
|
||||
case "google":
|
||||
searchUrl = `https://www.google.com/search?q=${query}`;
|
||||
break;
|
||||
case "baidu":
|
||||
searchUrl = `https://www.baidu.com/s?wd=${query}`;
|
||||
break;
|
||||
case "bing":
|
||||
searchUrl = `https://www.bing.com/search?q=${query}`;
|
||||
break;
|
||||
case "duckduckgo":
|
||||
searchUrl = `https://duckduckgo.com/?q=${query}`;
|
||||
break;
|
||||
}
|
||||
|
||||
if (searchUrl) {
|
||||
window.open(searchUrl, "_self");
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 初始化搜索引擎设置
|
||||
initSearchEngine();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,180 +1,203 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="auto">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title id="page-title">Page Not Found - 404</title>
|
||||
<style>
|
||||
:root {
|
||||
--primary-color: #4361ee;
|
||||
--secondary-color: #3f37c9;
|
||||
--text-color: #2b2d42;
|
||||
--bg-color: #f8f9fa;
|
||||
--error-color: #ef233c;
|
||||
:root {
|
||||
--primary-color: #4361ee;
|
||||
--secondary-color: #3f37c9;
|
||||
--text-color: #2b2d42;
|
||||
--bg-color: #f8f9fa;
|
||||
--error-color: #ef233c;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 8rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.error-code::after {
|
||||
content: "404";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgba(67, 97, 238, 0.1);
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.8rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(67, 97, 238, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
line-height: 1.6;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 8rem;
|
||||
font-weight: 800;
|
||||
color: var(--primary-color);
|
||||
margin-bottom: 1rem;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
.error-code::after {
|
||||
content: '404';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
color: rgba(67, 97, 238, 0.1);
|
||||
z-index: -1;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
|
||||
h1 {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.8rem 1.8rem;
|
||||
border-radius: 50px;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--secondary-color);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(67, 97, 238, 0.3);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: transparent;
|
||||
color: var(--primary-color);
|
||||
border: 2px solid var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: rgba(67, 97, 238, 0.1);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.animation {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="error-code animation">404</div>
|
||||
<h1 id="heading">Page Not Found</h1>
|
||||
<p id="message">The page you're looking for might have been moved, deleted, or doesn't exist.</p>
|
||||
<div class="actions">
|
||||
<a href="/" class="btn btn-primary" id="home-btn">Go to Homepage</a>
|
||||
<a href="javascript:history.back()" class="btn btn-secondary" id="back-btn">Go Back</a>
|
||||
</div>
|
||||
<div class="error-code animation">404</div>
|
||||
<h1 id="heading">Page Not Found</h1>
|
||||
<p id="message">
|
||||
The page you're looking for might have been moved, deleted, or doesn't
|
||||
exist.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a href="/" class="btn btn-primary" id="home-btn">Go to Homepage</a>
|
||||
<a
|
||||
href="javascript:history.back()"
|
||||
class="btn btn-secondary"
|
||||
id="back-btn"
|
||||
>Go Back</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Language detection and content switching
|
||||
function setLanguage() {
|
||||
const userLanguage = navigator.language || navigator.userLanguage;
|
||||
const isChinese = userLanguage.toLowerCase().includes('zh-cn');
|
||||
|
||||
if (isChinese) {
|
||||
document.getElementById('page-title').textContent = '页面未找到 - 404';
|
||||
document.getElementById('heading').textContent = '页面未找到';
|
||||
document.getElementById('message').textContent = '您访问的页面可能已被移动、删除或暂时不可用。';
|
||||
document.getElementById('home-btn').textContent = '返回首页';
|
||||
document.getElementById('back-btn').textContent = '返回上一页';
|
||||
|
||||
console.log('%c404 - 页面未找到', 'color: #4361ee; font-size: 2em; font-weight: bold;');
|
||||
console.log('%c您似乎迷路了，但别担心！点击上面的按钮可以找到回去的路。', 'color: #2b2d42; font-size: 1.1em;');
|
||||
} else {
|
||||
console.log('%c404 - Page Not Found', 'color: #4361ee; font-size: 2em; font-weight: bold;');
|
||||
console.log('%cLooks like you\'re lost! Use the buttons above to find your way back.', 'color: #2b2d42; font-size: 1.1em;');
|
||||
}
|
||||
// Language detection and content switching
|
||||
function setLanguage() {
|
||||
const userLanguage = navigator.language || navigator.userLanguage;
|
||||
const isChinese = userLanguage.toLowerCase().includes("zh-cn");
|
||||
|
||||
if (isChinese) {
|
||||
document.getElementById("page-title").textContent =
|
||||
"页面未找到 - 404";
|
||||
document.getElementById("heading").textContent = "页面未找到";
|
||||
document.getElementById("message").textContent =
|
||||
"您访问的页面可能已被移动、删除或暂时不可用。";
|
||||
document.getElementById("home-btn").textContent = "返回首页";
|
||||
document.getElementById("back-btn").textContent = "返回上一页";
|
||||
|
||||
console.log(
|
||||
"%c404 - 页面未找到",
|
||||
"color: #4361ee; font-size: 2em; font-weight: bold;"
|
||||
);
|
||||
console.log(
|
||||
"%c您似乎迷路了，但别担心！点击上面的按钮可以找到回去的路。",
|
||||
"color: #2b2d42; font-size: 1.1em;"
|
||||
);
|
||||
} else {
|
||||
console.log(
|
||||
"%c404 - Page Not Found",
|
||||
"color: #4361ee; font-size: 2em; font-weight: bold;"
|
||||
);
|
||||
console.log(
|
||||
"%cLooks like you're lost! Use the buttons above to find your way back.",
|
||||
"color: #2b2d42; font-size: 1.1em;"
|
||||
);
|
||||
}
|
||||
|
||||
// Set language on page load
|
||||
window.addEventListener('DOMContentLoaded', setLanguage);
|
||||
|
||||
// Simple parallax effect
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
const container = document.querySelector('.container');
|
||||
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
|
||||
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
|
||||
container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
|
||||
});
|
||||
}
|
||||
|
||||
// Set language on page load
|
||||
window.addEventListener("DOMContentLoaded", setLanguage);
|
||||
|
||||
// Simple parallax effect
|
||||
document.addEventListener("mousemove", function (e) {
|
||||
const container = document.querySelector(".container");
|
||||
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
|
||||
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
|
||||
container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user