牡蛎
bcc8bec4cb
- 调整了 HTML 结构，使其更加简洁 - 优化了 CSS 样式，提高了页面的视觉效果 - 添加了响应式设计，使页面在不同设备上显示更佳 - 改进了 JavaScript 代码，提高了页面的交互性
400 lines
11 KiB
HTML
400 lines
11 KiB
HTML
<!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>
|