refactor(nginx): 优化 404 页面的代码结构和样式
- 调整了 HTML 结构，使其更加简洁 - 优化了 CSS 样式，提高了页面的视觉效果 - 添加了响应式设计，使页面在不同设备上显示更佳 - 改进了 JavaScript 代码，提高了页面的交互性
This commit is contained in:
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>
|
||||
Reference in New Issue
Block a user