feat: Bento 版设为默认主页(/),终端版移至 /terminal/,/bento/ 保留跳转
This commit is contained in:
+3
-398
@@ -2,404 +2,9 @@
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data:; script-src 'self' 'unsafe-inline'; connect-src https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: *;">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3C/svg%3E">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="refresh" content="0; url=/">
|
||||
<title>hyonglin.top</title>
|
||||
<style>
|
||||
/* ===== 主题变量(默认浅色,深色自适应) ===== */
|
||||
:root {
|
||||
--bg: #f2f5fb;
|
||||
--text: #141b2e;
|
||||
--muted: #5c6a84;
|
||||
--card: rgba(255,255,255,.66);
|
||||
--border: rgba(15,30,70,.08);
|
||||
--inset: rgba(255,255,255,.9);
|
||||
--shadow: 0 10px 30px rgba(30,50,100,.08);
|
||||
--shadow-hover: 0 16px 40px rgba(30,50,100,.14);
|
||||
--grad: linear-gradient(120deg, #6366f1, #0ea5e9 55%, #22d3ee);
|
||||
--sky-a: #dbeafe; --sky-b: #cffafe;
|
||||
--orb-op: .5;
|
||||
--ga: rgba(99,102,241,.17);
|
||||
--gb: rgba(34,211,238,.15);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0a0f1e;
|
||||
--text: #eef2ff;
|
||||
--muted: #8b97b3;
|
||||
--card: rgba(255,255,255,.055);
|
||||
--border: rgba(255,255,255,.09);
|
||||
--inset: rgba(10,15,30,.45);
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
--shadow-hover: 0 16px 42px rgba(0,0,0,.5);
|
||||
--sky-a: rgba(59,130,246,.28); --sky-b: rgba(34,211,238,.16);
|
||||
--orb-op: .38;
|
||||
--ga: rgba(129,140,248,.22);
|
||||
--gb: rgba(34,211,238,.20);
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
::selection { background: #6366f1; color: #fff; }
|
||||
|
||||
/* ===== 背景光斑(JS 驱动:缓慢漂移 + 鼠标视差)与跟随光晕 ===== */
|
||||
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: var(--orb-op); will-change: transform; }
|
||||
.orb1 { width: 480px; height: 480px; top: -160px; left: -120px; background: #a5b4fc; }
|
||||
.orb2 { width: 420px; height: 420px; bottom: -140px; right: -100px; background: #67e8f9; }
|
||||
.orb3 { width: 360px; height: 360px; top: 32%; right: -150px; background: #f5d0fe; opacity: calc(var(--orb-op) * .8); }
|
||||
.glow { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; opacity: 0; }
|
||||
.glow-a { width: 560px; height: 560px; background: radial-gradient(circle, var(--ga), transparent 65%); }
|
||||
.glow-b { width: 420px; height: 420px; background: radial-gradient(circle, var(--gb), transparent 65%); }
|
||||
|
||||
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 36px 20px 44px; }
|
||||
|
||||
/* ===== Bento 网格 ===== */
|
||||
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
||||
|
||||
.card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 22px;
|
||||
padding: 20px 22px;
|
||||
backdrop-filter: blur(16px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.3);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
|
||||
animation-delay: var(--d, 0s);
|
||||
}
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
|
||||
|
||||
/* ===== Hero:标题 + 搜索 ===== */
|
||||
.hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 5vw, 3.3rem);
|
||||
font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.hero p.sub { color: var(--muted); margin-top: 10px; font-size: .98rem; }
|
||||
|
||||
form.search {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 26px; padding: 6px 6px 6px 16px;
|
||||
background: var(--inset);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
form.search:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
|
||||
form.search .sicon { font-size: 1rem; opacity: .8; flex-shrink: 0; }
|
||||
form.search select {
|
||||
flex-shrink: 0; cursor: pointer;
|
||||
font-size: .82rem; color: var(--muted);
|
||||
background: transparent; border: 1px solid var(--border); border-radius: 999px;
|
||||
padding: 7px 10px; outline: none; max-width: 118px;
|
||||
}
|
||||
form.search select:focus-visible { border-color: #818cf8; color: var(--text); }
|
||||
form.search input {
|
||||
flex: 1; min-width: 0; background: none; border: none; outline: none;
|
||||
color: var(--text); font-size: .95rem; padding: 9px 0;
|
||||
}
|
||||
form.search input::placeholder { color: var(--muted); }
|
||||
form.search button {
|
||||
border: none; cursor: pointer; flex-shrink: 0;
|
||||
padding: 10px 24px; border-radius: 999px;
|
||||
font-size: .9rem; font-weight: 600; color: #fff;
|
||||
background: var(--grad);
|
||||
transition: transform .14s ease, filter .14s ease;
|
||||
}
|
||||
form.search button:hover { transform: scale(1.03); filter: brightness(1.08); }
|
||||
|
||||
/* ===== 天气卡 ===== */
|
||||
.sky { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(165deg, var(--sky-a), var(--sky-b)); }
|
||||
.card .label { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
.sky .emoji { font-size: 3.2rem; line-height: 1; }
|
||||
.sky .temp { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
|
||||
.wcity { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
|
||||
|
||||
/* ===== 日期 / 时间卡 ===== */
|
||||
.clockcard, .datecard { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; }
|
||||
.clockcard .value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
|
||||
.datecard .value { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
|
||||
|
||||
/* ===== 服务分组面板 ===== */
|
||||
.panel { grid-column: span 3; }
|
||||
.panel > h2 { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; margin-bottom: 14px; }
|
||||
.panel > h2 .count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--inset); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
|
||||
|
||||
ul.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
|
||||
ul.tiles a {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 11px 12px;
|
||||
background: var(--inset);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
text-decoration: none; color: var(--text);
|
||||
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
ul.tiles a:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: color-mix(in srgb, var(--ac) 55%, transparent);
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 22%, transparent);
|
||||
}
|
||||
ul.tiles .icon {
|
||||
font-size: 1.1rem; width: 36px; height: 36px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 32%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
|
||||
}
|
||||
ul.tiles .meta { display: flex; flex-direction: column; min-width: 0; }
|
||||
ul.tiles .name { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
ul.tiles .desc { color: var(--muted); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* 分组配色 */
|
||||
.s-self { --ac: #10b981; }
|
||||
.s-ai { --ac: #8b5cf6; }
|
||||
.s-cloud { --ac: #3b82f6; }
|
||||
.s-util { --ac: #f59e0b; }
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 0; }
|
||||
footer { grid-column: span 6; text-align: center; color: var(--muted); font-size: .8rem; }
|
||||
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); margin-left: 6px; }
|
||||
footer a:hover { color: #6366f1; border-color: #6366f1; }
|
||||
|
||||
/* ===== 响应式 ===== */
|
||||
@media (max-width: 880px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.hero { grid-column: span 2; grid-row: auto; }
|
||||
.sky { grid-column: span 2; grid-row: auto; flex-direction: row; align-items: center; gap: 18px; }
|
||||
.sky .emoji { font-size: 2.6rem; }
|
||||
.panel { grid-column: span 2; }
|
||||
}
|
||||
@media (max-width: 540px) {
|
||||
.grid { grid-template-columns: 1fr; gap: 12px; }
|
||||
.clockcard, .datecard, footer { grid-column: auto; }
|
||||
.wrap { padding: 22px 14px 32px; }
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.card { animation: none; }
|
||||
ul.tiles a, form.search button { transition: none; }
|
||||
}
|
||||
</style>
|
||||
<style>body{margin:0;height:100vh;display:flex;align-items:center;justify-content:center;background:#f5f6f8;color:#6b7280;font:14px/1.6 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}a{color:#0ea5e9}</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="orb orb1" id="orb1"></div>
|
||||
<div class="orb orb2" id="orb2"></div>
|
||||
<div class="orb orb3" id="orb3"></div>
|
||||
<div class="glow glow-a" id="glowa"></div>
|
||||
<div class="glow glow-b" id="glowb"></div>
|
||||
|
||||
<main class="wrap">
|
||||
<div class="grid">
|
||||
<!-- Hero:标题 + Bing 搜索 -->
|
||||
<section class="card hero" style="--d:.05s">
|
||||
<h1>hyonglin.top</h1>
|
||||
<p class="sub">个人服务导航 · 随时可达</p>
|
||||
<form class="search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
|
||||
<span class="sicon">🔍</span>
|
||||
<select name="engine" id="engine" aria-label="搜索引擎">
|
||||
<option value="bing" selected>Bing</option>
|
||||
<option value="google">Google</option>
|
||||
<option value="baidu">百度</option>
|
||||
<option value="duckduckgo">DuckDuckGo</option>
|
||||
</select>
|
||||
<input type="text" name="q" placeholder="输入关键词,回车搜索…" autocomplete="off" aria-label="搜索">
|
||||
<button type="submit">搜索</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- 天气 -->
|
||||
<section class="card sky" style="--d:.12s">
|
||||
<div class="label">天气</div>
|
||||
<div class="emoji">☀️</div>
|
||||
<div class="temp wtxt">获取中…</div>
|
||||
<div class="wcity"></div>
|
||||
</section>
|
||||
|
||||
<!-- 时间 / 日期 -->
|
||||
<section class="card clockcard" style="--d:.2s">
|
||||
<div class="label">时间</div>
|
||||
<div class="value" id="clockval">--:--:--</div>
|
||||
</section>
|
||||
<section class="card datecard" style="--d:.26s">
|
||||
<div class="label">日期</div>
|
||||
<div class="value" id="dateval">----</div>
|
||||
</section>
|
||||
|
||||
<!-- 自建服务 -->
|
||||
<section class="card panel s-self" style="--d:.34s">
|
||||
<h2>📡 自建服务<span class="count">4</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- AI 助手 -->
|
||||
<section class="card panel s-ai" style="--d:.4s">
|
||||
<h2>🤖 AI 助手<span class="count">2</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 云服务 -->
|
||||
<section class="card panel s-cloud" style="--d:.46s">
|
||||
<h2>☁️ 云服务<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<!-- 常用 -->
|
||||
<section class="card panel s-util" style="--d:.52s">
|
||||
<h2>🔧 常用<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<footer style="--d:.58s" class="card"><span><a href="/" aria-current="page">终端版</a> · <a href="/bento/">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>hyonglin.top</footer>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script>
|
||||
/* ===== 动态光晕:三团背景光斑缓慢漂移 + 鼠标视差,两团柔光跟随光标(带延迟拖尾) ===== */
|
||||
(function(){
|
||||
if (!window.matchMedia || matchMedia('(prefers-reduced-motion: reduce)').matches) return; // 减少动态效果:保持静态
|
||||
var o1 = document.getElementById('orb1'),
|
||||
o2 = document.getElementById('orb2'),
|
||||
o3 = document.getElementById('orb3'),
|
||||
gA = document.getElementById('glowa'),
|
||||
gB = document.getElementById('glowb');
|
||||
if (!o1 || !gA) return;
|
||||
gA.style.opacity = '1';
|
||||
gB.style.opacity = '1';
|
||||
|
||||
var W = window.innerWidth, H = window.innerHeight;
|
||||
var tx = W / 2, ty = H / 2; // 光标目标位置
|
||||
var cx = tx, cy = ty; // 主光晕(快)
|
||||
var bx = tx, by = ty; // 副光晕(慢,拖尾感)
|
||||
window.addEventListener('mousemove', function(e){ tx = e.clientX; ty = e.clientY; }, { passive: true });
|
||||
window.addEventListener('resize', function(){ W = window.innerWidth; H = window.innerHeight; });
|
||||
|
||||
var t0 = performance.now();
|
||||
function loop(now) {
|
||||
var t = (now - t0) / 1000;
|
||||
cx += (tx - cx) * .09;
|
||||
cy += (ty - cy) * .09;
|
||||
bx += (tx - bx) * .045;
|
||||
by += (ty - by) * .045;
|
||||
var nx = cx / W - .5, ny = cy / H - .5; // 归一化鼠标位置(-0.5 ~ 0.5)
|
||||
|
||||
o1.style.transform = 'translate(' + (Math.sin(t * .32) * 34 + nx * 70).toFixed(1) + 'px,' + (Math.cos(t * .26) * 28 + ny * 70).toFixed(1) + 'px)';
|
||||
o2.style.transform = 'translate(' + (Math.sin(t * .24 + 2) * 40 - nx * 90).toFixed(1) + 'px,' + (Math.cos(t * .30 + 1) * 34 - ny * 90).toFixed(1) + 'px)';
|
||||
o3.style.transform = 'translate(' + (Math.sin(t * .28 + 4) * 36 + nx * 50).toFixed(1) + 'px,' + (Math.cos(t * .22 + 3) * 30 + ny * 50).toFixed(1) + 'px)';
|
||||
|
||||
gA.style.transform = 'translate(' + (cx - 280).toFixed(1) + 'px,' + (cy - 280).toFixed(1) + 'px)';
|
||||
gB.style.transform = 'translate(' + (bx - 210).toFixed(1) + 'px,' + (by - 210).toFixed(1) + 'px)';
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
loop(performance.now()); // 先同步画一帧,避免光晕从屏幕外滑入
|
||||
requestAnimationFrame(loop);
|
||||
})();
|
||||
|
||||
/* ===== 搜索引擎选择 ===== */
|
||||
(function(){
|
||||
var sel = document.getElementById('engine');
|
||||
if (!sel) return;
|
||||
var ENGINES = {
|
||||
bing: 'https://www.bing.com/search?q=',
|
||||
google: 'https://www.google.com/search?q=',
|
||||
baidu: 'https://www.baidu.com/s?wd=',
|
||||
duckduckgo: 'https://duckduckgo.com/?q='
|
||||
};
|
||||
var form = sel.closest('form');
|
||||
function apply() { form.action = ENGINES[sel.value] || ENGINES.bing; }
|
||||
sel.addEventListener('change', apply);
|
||||
apply();
|
||||
})();
|
||||
|
||||
/* ===== 日期 + 时钟 ===== */
|
||||
var week = ['日','一','二','三','四','五','六'];
|
||||
function pad2(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function updateClock() {
|
||||
var now = new Date();
|
||||
var c = document.getElementById('clockval');
|
||||
if (c) c.textContent = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + ':' + pad2(now.getSeconds());
|
||||
var d = document.getElementById('dateval');
|
||||
if (d) d.textContent = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' 周' + week[now.getDay()];
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
/* ===== 天气:GPS 定位 + Open-Meteo(不依赖 IP) ===== */
|
||||
var emojiBox = function(){ return document.querySelector('.sky .emoji'); };
|
||||
var tempBox = function(){ return document.querySelector('.wtxt'); };
|
||||
var cityBox = function(){ return document.querySelector('.wcity'); };
|
||||
|
||||
var WMO = {
|
||||
0:'☀️',1:'🌤',2:'⛅',3:'☁️',45:'🌫',48:'🌫',
|
||||
51:'🌦',53:'🌦',55:'🌦',56:'🌨',57:'🌨',
|
||||
61:'🌧',63:'🌧',65:'🌧',66:'🌨',67:'🌨',
|
||||
71:'🌨',73:'🌨',75:'🌨',77:'🌨',80:'🌦',81:'🌦',82:'🌧',
|
||||
85:'🌨',86:'🌨',95:'⛈',96:'⛈',99:'⛈'
|
||||
};
|
||||
function wmo(w) { return WMO[w] || '🌡️'; }
|
||||
|
||||
function setWeather(temp, wcode, city) {
|
||||
if (tempBox()) tempBox().textContent = temp + '°C';
|
||||
if (emojiBox()) emojiBox().textContent = wmo(wcode);
|
||||
if (city && cityBox()) cityBox().textContent = city;
|
||||
}
|
||||
|
||||
function getWeather(lat, lon, city) {
|
||||
var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon +
|
||||
'¤t_weather=true&timezone=auto';
|
||||
fetch(url).then(function(r){ return r.json(); }).then(function(d){
|
||||
var cw = d.current_weather || {};
|
||||
setWeather(Math.round(cw.temperature), cw.weathercode, city);
|
||||
}).catch(function(){ tempBox() && (tempBox().textContent = '天气获取失败'); });
|
||||
}
|
||||
|
||||
// 优先浏览器 GPS 定位;失败则 ipwho.is 按 IP 定位;再失败显示默认城市(北京)
|
||||
var DEFAULT_LOC = { lat: 39.9042, lon: 116.4074, city: '北京' };
|
||||
|
||||
function byIP() {
|
||||
fetch('https://ipwho.is/').then(function(r){ return r.json(); }).then(function(d){
|
||||
if (d && d.latitude && d.longitude) getWeather(d.latitude, d.longitude, d.city || '');
|
||||
else { getWeather(DEFAULT_LOC.lat, DEFAULT_LOC.lon, DEFAULT_LOC.city); }
|
||||
}).catch(function(){ getWeather(DEFAULT_LOC.lat, DEFAULT_LOC.lon, DEFAULT_LOC.city); });
|
||||
}
|
||||
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(pos){
|
||||
getWeather(pos.coords.latitude, pos.coords.longitude, '');
|
||||
}, byIP, { timeout: 8000 });
|
||||
} else {
|
||||
byIP();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
<body><p>Bento 版已移至首页,正在跳转 <a href="/">/</a> …</p></body>
|
||||
</html>
|
||||
|
||||
@@ -257,8 +257,8 @@
|
||||
<footer style="--d:.58s" class="card">
|
||||
<span class="brand">hyonglin.top</span>
|
||||
<nav>
|
||||
<a href="/">终端版</a> /
|
||||
<a href="/bento/">Bento 版</a> /
|
||||
<a href="/terminal/">终端版</a> /
|
||||
<a href="/">Bento 版</a> /
|
||||
<span aria-current="page">Brutal 版(当前)</span> /
|
||||
<a href="/swiss/">Swiss 版</a> /
|
||||
<a href="/hud/">HUD 版</a>
|
||||
|
||||
@@ -320,8 +320,8 @@
|
||||
<footer class="foot card" style="--d:.54s"><div class="in">
|
||||
<span class="brand">hyonglin.top</span>
|
||||
<nav aria-label="版本切换">
|
||||
<a href="/">终端版</a><i>·</i>
|
||||
<a href="/bento/">Bento 版</a><i>·</i>
|
||||
<a href="/terminal/">终端版</a><i>·</i>
|
||||
<a href="/">Bento 版</a><i>·</i>
|
||||
<a href="/brutal/">Brutal 版</a><i>·</i>
|
||||
<a href="/swiss/">Swiss 版</a><i>·</i>
|
||||
<span class="cur">◉ HUD 版</span>
|
||||
|
||||
+250
-306
@@ -3,383 +3,327 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data:; script-src 'self' 'unsafe-inline'; connect-src https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: *;">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23050d08'/%3E%3Ctext x='9' y='43' font-size='28' font-family='monospace' fill='%233dff9c'%3E%3E_%3C/text%3E%3C/svg%3E">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%236366f1'/%3E%3Cstop offset='1' stop-color='%2322d3ee'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='14' fill='url(%23g)'/%3E%3C/svg%3E">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>hyonglin.top</title>
|
||||
<style>
|
||||
/* ===== 主题变量(默认浅色,深色自适应) ===== */
|
||||
:root {
|
||||
--bg: #020604;
|
||||
--win: #07130c;
|
||||
--border: #1d3a2b;
|
||||
--border-soft: #14291e;
|
||||
--text: #d7f5e4;
|
||||
--muted: #6d8f7d;
|
||||
--accent: #3dff9c;
|
||||
--accent-dim: #2f8f63;
|
||||
--cyan: #4dd8ff;
|
||||
--amber: #ffc857;
|
||||
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
--bg: #f2f5fb;
|
||||
--text: #141b2e;
|
||||
--muted: #5c6a84;
|
||||
--card: rgba(255,255,255,.66);
|
||||
--border: rgba(15,30,70,.08);
|
||||
--inset: rgba(255,255,255,.9);
|
||||
--shadow: 0 10px 30px rgba(30,50,100,.08);
|
||||
--shadow-hover: 0 16px 40px rgba(30,50,100,.14);
|
||||
--grad: linear-gradient(120deg, #6366f1, #0ea5e9 55%, #22d3ee);
|
||||
--sky-a: #dbeafe; --sky-b: #cffafe;
|
||||
--orb-op: .5;
|
||||
--ga: rgba(99,102,241,.17);
|
||||
--gb: rgba(34,211,238,.15);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg: #0a0f1e;
|
||||
--text: #eef2ff;
|
||||
--muted: #8b97b3;
|
||||
--card: rgba(255,255,255,.055);
|
||||
--border: rgba(255,255,255,.09);
|
||||
--inset: rgba(10,15,30,.45);
|
||||
--shadow: 0 10px 30px rgba(0,0,0,.35);
|
||||
--shadow-hover: 0 16px 42px rgba(0,0,0,.5);
|
||||
--sky-a: rgba(59,130,246,.28); --sky-b: rgba(34,211,238,.16);
|
||||
--orb-op: .38;
|
||||
--ga: rgba(129,140,248,.22);
|
||||
--gb: rgba(34,211,238,.20);
|
||||
}
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: var(--mono);
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(60% 42% at 50% -4%, rgba(61,255,156,.10), transparent 70%),
|
||||
radial-gradient(90% 60% at 50% 110%, rgba(77,216,255,.05), transparent 70%),
|
||||
var(--bg);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
::selection { background: var(--accent); color: #04120b; }
|
||||
::selection { background: #6366f1; color: #fff; }
|
||||
|
||||
/* ===== CRT 扫描线 + 暗角 ===== */
|
||||
.crt::before {
|
||||
content: "";
|
||||
position: fixed; inset: 0; z-index: 5; pointer-events: none;
|
||||
background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px, transparent 1px, transparent 3px);
|
||||
opacity: .45;
|
||||
}
|
||||
.crt::after {
|
||||
content: "";
|
||||
position: fixed; inset: 0; z-index: 6; pointer-events: none;
|
||||
background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.42) 100%);
|
||||
}
|
||||
/* ===== 背景光斑(JS 驱动:缓慢漂移 + 鼠标视差)与跟随光晕 ===== */
|
||||
.orb { position: fixed; border-radius: 50%; filter: blur(90px); z-index: 0; pointer-events: none; opacity: var(--orb-op); will-change: transform; }
|
||||
.orb1 { width: 480px; height: 480px; top: -160px; left: -120px; background: #a5b4fc; }
|
||||
.orb2 { width: 420px; height: 420px; bottom: -140px; right: -100px; background: #67e8f9; }
|
||||
.orb3 { width: 360px; height: 360px; top: 32%; right: -150px; background: #f5d0fe; opacity: calc(var(--orb-op) * .8); }
|
||||
.glow { position: fixed; left: 0; top: 0; z-index: 0; pointer-events: none; border-radius: 50%; will-change: transform; opacity: 0; }
|
||||
.glow-a { width: 560px; height: 560px; background: radial-gradient(circle, var(--ga), transparent 65%); }
|
||||
.glow-b { width: 420px; height: 420px; background: radial-gradient(circle, var(--gb), transparent 65%); }
|
||||
|
||||
/* ===== 黑客帝国数据流背景 ===== */
|
||||
#matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .38; }
|
||||
.wrap { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 36px 20px 44px; }
|
||||
|
||||
.stage { position: relative; z-index: 1; padding: 34px 18px 40px; display: flex; justify-content: center; }
|
||||
/* ===== Bento 网格 ===== */
|
||||
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
|
||||
|
||||
/* ===== 终端窗口 ===== */
|
||||
.window {
|
||||
width: 100%; max-width: 960px;
|
||||
background: linear-gradient(180deg, rgba(10,26,17,.96), rgba(6,15,10,.97));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,.6),
|
||||
0 24px 80px rgba(0,0,0,.55),
|
||||
0 0 42px rgba(61,255,156,.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
.titlebar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
background: rgba(4,12,8,.6);
|
||||
}
|
||||
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
|
||||
.titlebar .t { font-size: .74rem; color: var(--muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.titlebar .mode { margin-left: auto; font-size: .72rem; color: var(--accent-dim); flex-shrink: 0; }
|
||||
|
||||
.inner { padding: 26px 26px 30px; }
|
||||
|
||||
/* ===== 开机日志 ===== */
|
||||
#bootlog { font-size: .78rem; line-height: 1.75; color: var(--accent-dim); margin-bottom: 4px; min-height: 3em; }
|
||||
#bootlog .bootline::before { content: " "; }
|
||||
|
||||
/* ===== 头部 ===== */
|
||||
header { text-align: left; margin-top: 10px; }
|
||||
.prompt-line { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
|
||||
.prompt-line b { color: var(--accent); font-weight: 400; }
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5.4vw, 3.1rem);
|
||||
font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
|
||||
color: #eafff3;
|
||||
text-shadow: 0 0 18px rgba(61,255,156,.4), 0 0 46px rgba(61,255,156,.16);
|
||||
animation: glowpulse 7s ease-in-out infinite;
|
||||
}
|
||||
@keyframes glowpulse { 0%,100% { text-shadow: 0 0 18px rgba(61,255,156,.4), 0 0 46px rgba(61,255,156,.16); } 50% { text-shadow: 0 0 24px rgba(61,255,156,.55), 0 0 60px rgba(61,255,156,.22); } }
|
||||
.cursor { display: inline-block; width: .55em; height: 1em; background: var(--accent); vertical-align: -0.12em; margin-left: .18em; animation: blink 1.1s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
p.sub { color: var(--muted); margin-top: 10px; font-size: .9rem; letter-spacing: .02em; }
|
||||
|
||||
/* ===== 状态卡片:天气 / 日期 / 时间 ===== */
|
||||
.info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
|
||||
.card {
|
||||
border: 1px solid var(--border-soft);
|
||||
background: rgba(9,24,16,.55);
|
||||
padding: 12px 16px 14px;
|
||||
position: relative;
|
||||
}
|
||||
.card::before, .card::after { content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; }
|
||||
.card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent-dim); border-left: 1px solid var(--accent-dim); }
|
||||
.card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim); }
|
||||
.card .label { font-size: .68rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; }
|
||||
.card .value { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: #eafff3; }
|
||||
.card#weather .value { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
|
||||
.card#weather .value .emoji { font-size: 1.45rem; filter: saturate(.9); }
|
||||
.wcity { font-size: .72rem; color: var(--muted); margin-top: 5px; min-height: 1em; }
|
||||
|
||||
/* ===== Bing 搜索(提示符样式) ===== */
|
||||
form.search {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin-top: 24px; padding: 6px 8px 6px 16px;
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(5,14,9,.7);
|
||||
border-radius: 22px;
|
||||
padding: 20px 22px;
|
||||
backdrop-filter: blur(16px) saturate(1.3);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(1.3);
|
||||
box-shadow: var(--shadow);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
animation: rise .6s cubic-bezier(.2,.7,.3,1) both;
|
||||
animation-delay: var(--d, 0s);
|
||||
}
|
||||
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
|
||||
|
||||
/* ===== Hero:标题 + 搜索 ===== */
|
||||
.hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
|
||||
.hero h1 {
|
||||
font-size: clamp(2.2rem, 5vw, 3.3rem);
|
||||
font-weight: 800; letter-spacing: -.03em; line-height: 1.08;
|
||||
background: var(--grad);
|
||||
-webkit-background-clip: text; background-clip: text; color: transparent;
|
||||
}
|
||||
.hero p.sub { color: var(--muted); margin-top: 10px; font-size: .98rem; }
|
||||
|
||||
form.search {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
margin-top: 26px; padding: 6px 6px 6px 16px;
|
||||
background: var(--inset);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
form.search:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 1px rgba(61,255,156,.18), 0 0 24px rgba(61,255,156,.07); }
|
||||
form.search .ps { font-size: .9rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
|
||||
form.search:focus-within { border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
|
||||
form.search .sicon { font-size: 1rem; opacity: .8; flex-shrink: 0; }
|
||||
form.search select {
|
||||
flex-shrink: 0; cursor: pointer;
|
||||
font-family: var(--mono); font-size: .82rem;
|
||||
color: var(--accent); background: rgba(4,12,8,.75);
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
padding: 6px 8px; outline: none;
|
||||
font-size: .82rem; color: var(--muted);
|
||||
background: transparent; border: 1px solid var(--border); border-radius: 999px;
|
||||
padding: 7px 10px; outline: none; max-width: 118px;
|
||||
}
|
||||
form.search select:focus-visible { border-color: var(--accent-dim); }
|
||||
form.search select:focus-visible { border-color: #818cf8; color: var(--text); }
|
||||
form.search input {
|
||||
flex: 1; min-width: 0; background: none; border: none; outline: none;
|
||||
color: var(--text); font-family: var(--mono); font-size: .92rem; padding: 9px 0; caret-color: var(--accent);
|
||||
color: var(--text); font-size: .95rem; padding: 9px 0;
|
||||
}
|
||||
form.search input::placeholder { color: #48645a; }
|
||||
form.search input::placeholder { color: var(--muted); }
|
||||
form.search button {
|
||||
border: 1px solid var(--border); cursor: pointer; flex-shrink: 0;
|
||||
padding: 7px 16px; font-family: var(--mono); font-size: .82rem; font-weight: 600;
|
||||
color: var(--accent); background: transparent; letter-spacing: .05em;
|
||||
transition: background .14s ease, color .14s ease;
|
||||
border: none; cursor: pointer; flex-shrink: 0;
|
||||
padding: 10px 24px; border-radius: 999px;
|
||||
font-size: .9rem; font-weight: 600; color: #fff;
|
||||
background: var(--grad);
|
||||
transition: transform .14s ease, filter .14s ease;
|
||||
}
|
||||
form.search button:hover { background: var(--accent); color: #04120b; border-color: var(--accent); }
|
||||
form.search button:hover { transform: scale(1.03); filter: brightness(1.08); }
|
||||
|
||||
/* ===== 服务分组 ===== */
|
||||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
|
||||
.panel { border: 1px solid var(--border-soft); background: rgba(7,18,12,.5); padding: 4px 0 6px; }
|
||||
.panel > h2 {
|
||||
display: flex; align-items: baseline; gap: 10px;
|
||||
font-size: .8rem; font-weight: 600; letter-spacing: .08em;
|
||||
color: #bfe9d3; padding: 12px 16px 10px;
|
||||
border-bottom: 1px dashed var(--border-soft);
|
||||
}
|
||||
.panel > h2 .bar { color: var(--accent); }
|
||||
.panel > h2 .count { margin-left: auto; font-size: .7rem; color: var(--muted); font-weight: 400; }
|
||||
/* ===== 天气卡 ===== */
|
||||
.sky { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: linear-gradient(165deg, var(--sky-a), var(--sky-b)); }
|
||||
.card .label { font-size: .72rem; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; }
|
||||
.sky .emoji { font-size: 3.2rem; line-height: 1; }
|
||||
.sky .temp { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
|
||||
.wcity { font-size: .8rem; color: var(--muted); min-height: 1.2em; }
|
||||
|
||||
ul.links { list-style: none; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
|
||||
ul.links a {
|
||||
/* ===== 日期 / 时间卡 ===== */
|
||||
.clockcard, .datecard { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; }
|
||||
.clockcard .value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1.15; }
|
||||
.datecard .value { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
|
||||
|
||||
/* ===== 服务分组面板 ===== */
|
||||
.panel { grid-column: span 3; }
|
||||
.panel > h2 { display: flex; align-items: center; gap: 8px; font-size: .95rem; font-weight: 700; margin-bottom: 14px; }
|
||||
.panel > h2 .count { margin-left: auto; font-size: .72rem; font-weight: 600; color: var(--muted); background: var(--inset); border: 1px solid var(--border); padding: 3px 10px; border-radius: 999px; }
|
||||
|
||||
ul.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
|
||||
ul.tiles a {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 9px 10px; text-decoration: none; color: var(--text);
|
||||
border-left: 2px solid transparent;
|
||||
transition: background .13s ease, border-color .13s ease;
|
||||
padding: 11px 12px;
|
||||
background: var(--inset);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 14px;
|
||||
text-decoration: none; color: var(--text);
|
||||
transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
ul.links a:hover, ul.links a:focus-visible {
|
||||
background: rgba(61,255,156,.07);
|
||||
border-left-color: var(--accent);
|
||||
outline: none;
|
||||
ul.tiles a:hover {
|
||||
transform: translateY(-3px);
|
||||
border-color: color-mix(in srgb, var(--ac) 55%, transparent);
|
||||
box-shadow: 0 8px 24px color-mix(in srgb, var(--ac) 22%, transparent);
|
||||
}
|
||||
ul.links .arrow { color: var(--accent-dim); font-size: .85rem; flex-shrink: 0; transition: transform .13s ease, color .13s ease; }
|
||||
ul.links a:hover .arrow { color: var(--accent); transform: translateX(3px); }
|
||||
ul.links .icon {
|
||||
font-size: .95rem; width: 26px; height: 26px; flex-shrink: 0;
|
||||
ul.tiles .icon {
|
||||
font-size: 1.1rem; width: 36px; height: 36px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--border-soft); background: rgba(4,12,8,.7);
|
||||
border-radius: 11px;
|
||||
background: linear-gradient(135deg, color-mix(in srgb, var(--ac) 32%, transparent), color-mix(in srgb, var(--ac) 10%, transparent));
|
||||
}
|
||||
ul.links .name { font-weight: 600; font-size: .9rem; white-space: nowrap; }
|
||||
ul.links .desc { margin-left: auto; color: var(--muted); font-size: .74rem; text-align: right; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
|
||||
ul.tiles .meta { display: flex; flex-direction: column; min-width: 0; }
|
||||
ul.tiles .name { font-weight: 650; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
ul.tiles .desc { color: var(--muted); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
/* 分组配色 */
|
||||
.s-self { --ac: #10b981; }
|
||||
.s-ai { --ac: #8b5cf6; }
|
||||
.s-cloud { --ac: #3b82f6; }
|
||||
.s-util { --ac: #f59e0b; }
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
footer { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--border-soft); display: flex; align-items: baseline; gap: 10px; font-size: .74rem; color: var(--muted); }
|
||||
footer .code { color: var(--accent-dim); }
|
||||
footer a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); transition: color .14s ease, border-color .14s ease; }
|
||||
footer a:hover { color: var(--accent); border-color: var(--accent); }
|
||||
footer .brand { margin-left: auto; color: #bfe9d3; letter-spacing: .06em; }
|
||||
|
||||
/* ===== 入场动画 ===== */
|
||||
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .2s ease var(--rd, 0s), transform .2s ease var(--rd, 0s); }
|
||||
body.ready .reveal { opacity: 1; transform: none; }
|
||||
footer.card { background: none; border: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 8px 0; }
|
||||
footer { grid-column: span 6; text-align: center; color: var(--muted); font-size: .8rem; }
|
||||
footer a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); margin-left: 6px; }
|
||||
footer a:hover { color: #6366f1; border-color: #6366f1; }
|
||||
|
||||
/* ===== 响应式 ===== */
|
||||
@media (max-width: 760px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
.inner { padding: 20px 18px 24px; }
|
||||
@media (max-width: 880px) {
|
||||
.grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.hero { grid-column: span 2; grid-row: auto; }
|
||||
.sky { grid-column: span 2; grid-row: auto; flex-direction: row; align-items: center; gap: 18px; }
|
||||
.sky .emoji { font-size: 2.6rem; }
|
||||
.panel { grid-column: span 2; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.info-row { grid-template-columns: 1fr 1fr; }
|
||||
.card#clock { grid-column: span 2; }
|
||||
ul.links .desc { max-width: 46%; }
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
ul.links .desc { display: none; }
|
||||
@media (max-width: 540px) {
|
||||
.grid { grid-template-columns: 1fr; gap: 12px; }
|
||||
.clockcard, .datecard, footer { grid-column: auto; }
|
||||
.wrap { padding: 22px 14px 32px; }
|
||||
}
|
||||
|
||||
/* ===== 减少动态效果 ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
h1, .cursor { animation: none; }
|
||||
.reveal { transition: none; opacity: 1; transform: none; }
|
||||
.crt::before { display: none; }
|
||||
#matrix { display: none; }
|
||||
.card { animation: none; }
|
||||
ul.tiles a, form.search button { transition: none; }
|
||||
}
|
||||
</style>
|
||||
<noscript><style>.reveal{opacity:1!important;transform:none!important}#bootlog{display:none}</style></noscript>
|
||||
</head>
|
||||
<body class="crt">
|
||||
<canvas id="matrix" aria-hidden="true"></canvas>
|
||||
<div class="stage">
|
||||
<main class="window">
|
||||
<div class="titlebar">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="t">guest@hyonglin.top: ~</span>
|
||||
<span class="mode">[ bash ]</span>
|
||||
</div>
|
||||
<body>
|
||||
<div class="orb orb1" id="orb1"></div>
|
||||
<div class="orb orb2" id="orb2"></div>
|
||||
<div class="orb orb3" id="orb3"></div>
|
||||
<div class="glow glow-a" id="glowa"></div>
|
||||
<div class="glow glow-b" id="glowb"></div>
|
||||
|
||||
<div class="inner">
|
||||
<div id="bootlog" aria-hidden="true"></div>
|
||||
|
||||
<header class="reveal" style="--rd:.02s">
|
||||
<div class="prompt-line"><b>guest@hyonglin.top</b>:~$ whoami</div>
|
||||
<h1>hyonglin.top<span class="cursor"></span></h1>
|
||||
<main class="wrap">
|
||||
<div class="grid">
|
||||
<!-- Hero:标题 + Bing 搜索 -->
|
||||
<section class="card hero" style="--d:.05s">
|
||||
<h1>hyonglin.top</h1>
|
||||
<p class="sub">个人服务导航 · 随时可达</p>
|
||||
</header>
|
||||
|
||||
<div class="info-row reveal" style="--rd:.07s">
|
||||
<div class="card" id="weather">
|
||||
<div class="label">天气</div>
|
||||
<div class="value"><span class="emoji">☀️</span><span class="wtxt">获取中…</span></div>
|
||||
<div class="wcity"></div>
|
||||
</div>
|
||||
<div class="card" id="date">
|
||||
<div class="label">日期</div>
|
||||
<div class="value" id="dateval">----</div>
|
||||
</div>
|
||||
<div class="card" id="clock">
|
||||
<div class="label">时间</div>
|
||||
<div class="value" id="clockval">--:--:--</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="search reveal" style="--rd:.11s" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
|
||||
<span class="ps">$</span>
|
||||
<form class="search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
|
||||
<span class="sicon">🔍</span>
|
||||
<select name="engine" id="engine" aria-label="搜索引擎">
|
||||
<option value="bing" selected>bing</option>
|
||||
<option value="google">google</option>
|
||||
<option value="baidu">baidu</option>
|
||||
<option value="duckduckgo">duckduckgo</option>
|
||||
<option value="bing" selected>Bing</option>
|
||||
<option value="google">Google</option>
|
||||
<option value="baidu">百度</option>
|
||||
<option value="duckduckgo">DuckDuckGo</option>
|
||||
</select>
|
||||
<input type="text" name="q" placeholder="输入关键词,回车搜索…" autocomplete="off" aria-label="搜索">
|
||||
<button type="submit">ENTER ↵</button>
|
||||
<button type="submit">搜索</button>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<div class="grid">
|
||||
<section class="panel reveal" style="--rd:.15s">
|
||||
<h2><span class="bar">▍</span>📡 自建服务<span class="count">(4)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://note.hyonglin.top"><span class="arrow">❯</span><span class="icon">📝</span><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="arrow">❯</span><span class="icon">📦</span><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="arrow">❯</span><span class="icon">🖥️</span><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="arrow">❯</span><span class="icon">🔗</span><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></a></li>
|
||||
<!-- 天气 -->
|
||||
<section class="card sky" style="--d:.12s">
|
||||
<div class="label">天气</div>
|
||||
<div class="emoji">☀️</div>
|
||||
<div class="temp wtxt">获取中…</div>
|
||||
<div class="wcity"></div>
|
||||
</section>
|
||||
|
||||
<!-- 时间 / 日期 -->
|
||||
<section class="card clockcard" style="--d:.2s">
|
||||
<div class="label">时间</div>
|
||||
<div class="value" id="clockval">--:--:--</div>
|
||||
</section>
|
||||
<section class="card datecard" style="--d:.26s">
|
||||
<div class="label">日期</div>
|
||||
<div class="value" id="dateval">----</div>
|
||||
</section>
|
||||
|
||||
<!-- 自建服务 -->
|
||||
<section class="card panel s-self" style="--d:.34s">
|
||||
<h2>📡 自建服务<span class="count">4</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://note.hyonglin.top"><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.18s">
|
||||
<h2><span class="bar">▍</span>🤖 AI 助手<span class="count">(2)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🤖</span><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">💬</span><span class="name">豆包</span><span class="desc">doubao.com</span></a></li>
|
||||
<!-- AI 助手 -->
|
||||
<section class="card panel s-ai" style="--d:.4s">
|
||||
<h2>🤖 AI 助手<span class="count">2</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.21s">
|
||||
<h2><span class="bar">▍</span>☁️ 云服务<span class="count">(3)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🌐</span><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">☁️</span><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🐧</span><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></a></li>
|
||||
<!-- 云服务 -->
|
||||
<section class="card panel s-cloud" style="--d:.46s">
|
||||
<h2>☁️ 云服务<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.24s">
|
||||
<h2><span class="bar">▍</span>🔧 常用<span class="count">(3)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">📧</span><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🔍</span><span class="name">Bing 搜索</span><span class="desc">bing.com</span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">📺</span><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></a></li>
|
||||
<!-- 常用 -->
|
||||
<section class="card panel s-util" style="--d:.52s">
|
||||
<h2>🔧 常用<span class="count">3</span></h2>
|
||||
<ul class="tiles">
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="reveal" style="--rd:.28s">
|
||||
<span class="code">$ exit 0</span>
|
||||
<span>— end of transmission —</span>
|
||||
<span><a href="/" aria-current="page">终端版</a> · <a href="/bento/">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>
|
||||
<span class="brand">hyonglin.top</span>
|
||||
</footer>
|
||||
<footer style="--d:.58s" class="card"><span><a href="/terminal/">终端版</a> · <a href="/" aria-current="page">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>hyonglin.top</footer>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 黑客帝国数据流:绿色字符雨,低透明度衬在窗口后面 ===== */
|
||||
/* ===== 动态光晕:三团背景光斑缓慢漂移 + 鼠标视差,两团柔光跟随光标(带延迟拖尾) ===== */
|
||||
(function(){
|
||||
var cv = document.getElementById('matrix');
|
||||
if (!cv || !cv.getContext) return;
|
||||
if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
var ctx = cv.getContext('2d');
|
||||
var FONT = 14, W, H, cols, drops = [];
|
||||
var CHARS = 'アカサタナハマヤラワ0123456789ABCDEF+-*/<>=|';
|
||||
function resize() {
|
||||
W = cv.width = window.innerWidth;
|
||||
H = cv.height = window.innerHeight;
|
||||
cols = Math.ceil(W / FONT);
|
||||
drops = [];
|
||||
for (var i = 0; i < cols; i++) drops.push(Math.random() * -H / FONT);
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
function tick() {
|
||||
ctx.fillStyle = 'rgba(2,6,4,.16)'; // 半透明黑做拖尾淡出
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
ctx.font = FONT + 'px monospace';
|
||||
for (var i = 0; i < cols; i++) {
|
||||
var y = drops[i] * FONT;
|
||||
ctx.fillStyle = Math.random() < .12 ? '#c8ffe3' : 'rgba(61,255,156,.7)';
|
||||
ctx.fillText(CHARS[(Math.random() * CHARS.length) | 0], i * FONT, y);
|
||||
if (y > H && Math.random() > .972) drops[i] = -Math.random() * 40;
|
||||
else drops[i] += 1;
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
tick();
|
||||
})();
|
||||
if (!window.matchMedia || matchMedia('(prefers-reduced-motion: reduce)').matches) return; // 减少动态效果:保持静态
|
||||
var o1 = document.getElementById('orb1'),
|
||||
o2 = document.getElementById('orb2'),
|
||||
o3 = document.getElementById('orb3'),
|
||||
gA = document.getElementById('glowa'),
|
||||
gB = document.getElementById('glowb');
|
||||
if (!o1 || !gA) return;
|
||||
gA.style.opacity = '1';
|
||||
gB.style.opacity = '1';
|
||||
|
||||
/* ===== 开机自举动画(可点击/按键跳过,reduced-motion 直接显示) ===== */
|
||||
var booted = false;
|
||||
var bootEl = document.getElementById('bootlog');
|
||||
var BOOT_LINES = [
|
||||
'[ ok ] mount /services .......... 12 items',
|
||||
'[ ok ] weather daemon ........... running',
|
||||
'$ whoami → hyonglin.top — 个人服务导航'
|
||||
];
|
||||
function markReady() { document.body.classList.add('ready'); }
|
||||
if (bootEl && window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
BOOT_LINES.forEach(function(l){ var d = document.createElement('div'); d.className = 'bootline'; d.textContent = l; bootEl.appendChild(d); });
|
||||
booted = true; markReady();
|
||||
} else if (bootEl) {
|
||||
var li = 0, ci = 0, cur = null;
|
||||
function finishBoot() { if (!booted) { booted = true; markReady(); } }
|
||||
function typeLine() {
|
||||
if (booted) return;
|
||||
if (li >= BOOT_LINES.length) { setTimeout(finishBoot, 60); return; }
|
||||
var line = BOOT_LINES[li];
|
||||
if (!cur) { cur = document.createElement('div'); cur.className = 'bootline'; bootEl.appendChild(cur); ci = 0; }
|
||||
if (ci <= line.length) { cur.textContent = line.slice(0, ci++); setTimeout(typeLine, 3); }
|
||||
else { li++; cur = null; setTimeout(typeLine, 45); }
|
||||
}
|
||||
function skipBoot() {
|
||||
if (booted) return;
|
||||
booted = true;
|
||||
bootEl.innerHTML = '';
|
||||
BOOT_LINES.forEach(function(l){ var d = document.createElement('div'); d.className = 'bootline'; d.textContent = l; bootEl.appendChild(d); });
|
||||
markReady();
|
||||
}
|
||||
typeLine();
|
||||
window.addEventListener('keydown', skipBoot, { once: true });
|
||||
window.addEventListener('pointerdown', skipBoot, { once: true });
|
||||
setTimeout(skipBoot, 1250); // 兜底:任何情况下 1.25 秒内一定就绪
|
||||
var W = window.innerWidth, H = window.innerHeight;
|
||||
var tx = W / 2, ty = H / 2; // 光标目标位置
|
||||
var cx = tx, cy = ty; // 主光晕(快)
|
||||
var bx = tx, by = ty; // 副光晕(慢,拖尾感)
|
||||
window.addEventListener('mousemove', function(e){ tx = e.clientX; ty = e.clientY; }, { passive: true });
|
||||
window.addEventListener('resize', function(){ W = window.innerWidth; H = window.innerHeight; });
|
||||
|
||||
var t0 = performance.now();
|
||||
function loop(now) {
|
||||
var t = (now - t0) / 1000;
|
||||
cx += (tx - cx) * .09;
|
||||
cy += (ty - cy) * .09;
|
||||
bx += (tx - bx) * .045;
|
||||
by += (ty - by) * .045;
|
||||
var nx = cx / W - .5, ny = cy / H - .5; // 归一化鼠标位置(-0.5 ~ 0.5)
|
||||
|
||||
o1.style.transform = 'translate(' + (Math.sin(t * .32) * 34 + nx * 70).toFixed(1) + 'px,' + (Math.cos(t * .26) * 28 + ny * 70).toFixed(1) + 'px)';
|
||||
o2.style.transform = 'translate(' + (Math.sin(t * .24 + 2) * 40 - nx * 90).toFixed(1) + 'px,' + (Math.cos(t * .30 + 1) * 34 - ny * 90).toFixed(1) + 'px)';
|
||||
o3.style.transform = 'translate(' + (Math.sin(t * .28 + 4) * 36 + nx * 50).toFixed(1) + 'px,' + (Math.cos(t * .22 + 3) * 30 + ny * 50).toFixed(1) + 'px)';
|
||||
|
||||
gA.style.transform = 'translate(' + (cx - 280).toFixed(1) + 'px,' + (cy - 280).toFixed(1) + 'px)';
|
||||
gB.style.transform = 'translate(' + (bx - 210).toFixed(1) + 'px,' + (by - 210).toFixed(1) + 'px)';
|
||||
requestAnimationFrame(loop);
|
||||
}
|
||||
loop(performance.now()); // 先同步画一帧,避免光晕从屏幕外滑入
|
||||
requestAnimationFrame(loop);
|
||||
})();
|
||||
|
||||
/* ===== 搜索引擎选择 ===== */
|
||||
(function(){
|
||||
@@ -411,8 +355,8 @@
|
||||
updateClock();
|
||||
|
||||
/* ===== 天气:GPS 定位 + Open-Meteo(不依赖 IP) ===== */
|
||||
var emojiBox = function(){ return document.querySelector('#weather .emoji'); };
|
||||
var tempBox = function(){ return document.querySelector('#weather .wtxt'); };
|
||||
var emojiBox = function(){ return document.querySelector('.sky .emoji'); };
|
||||
var tempBox = function(){ return document.querySelector('.wtxt'); };
|
||||
var cityBox = function(){ return document.querySelector('.wcity'); };
|
||||
|
||||
var WMO = {
|
||||
|
||||
@@ -233,8 +233,8 @@
|
||||
<footer class="foot reveal" style="--d:.58s">
|
||||
<span class="fbrand">hyonglin.top</span>
|
||||
<nav class="versions" aria-label="版本切换">
|
||||
<a href="/">终端版<span class="path">/</span></a><span class="sep">·</span>
|
||||
<a href="/bento/">Bento 版<span class="path">/bento/</span></a><span class="sep">·</span>
|
||||
<a href="/terminal/">终端版<span class="path">/terminal/</span></a><span class="sep">·</span>
|
||||
<a href="/">Bento 版<span class="path">/</span></a><span class="sep">·</span>
|
||||
<a href="/brutal/">Brutal 版<span class="path">/brutal/</span></a><span class="sep">·</span>
|
||||
<span class="current">Swiss 版<span class="path">/swiss/</span></span><span class="sep">·</span>
|
||||
<a href="/hud/">HUD 版<span class="path">/hud/</span></a>
|
||||
|
||||
@@ -0,0 +1,461 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https: data:; script-src 'self' 'unsafe-inline'; connect-src https:; style-src 'self' 'unsafe-inline' https:; img-src 'self' data: https: *;">
|
||||
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='12' fill='%23050d08'/%3E%3Ctext x='9' y='43' font-size='28' font-family='monospace' fill='%233dff9c'%3E%3E_%3C/text%3E%3C/svg%3E">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="color-scheme" content="dark">
|
||||
<title>hyonglin.top</title>
|
||||
<style>
|
||||
:root {
|
||||
--bg: #020604;
|
||||
--win: #07130c;
|
||||
--border: #1d3a2b;
|
||||
--border-soft: #14291e;
|
||||
--text: #d7f5e4;
|
||||
--muted: #6d8f7d;
|
||||
--accent: #3dff9c;
|
||||
--accent-dim: #2f8f63;
|
||||
--cyan: #4dd8ff;
|
||||
--amber: #ffc857;
|
||||
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
||||
}
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html, body { height: 100%; }
|
||||
body {
|
||||
font-family: var(--mono);
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(60% 42% at 50% -4%, rgba(61,255,156,.10), transparent 70%),
|
||||
radial-gradient(90% 60% at 50% 110%, rgba(77,216,255,.05), transparent 70%),
|
||||
var(--bg);
|
||||
min-height: 100vh;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
::selection { background: var(--accent); color: #04120b; }
|
||||
|
||||
/* ===== CRT 扫描线 + 暗角 ===== */
|
||||
.crt::before {
|
||||
content: "";
|
||||
position: fixed; inset: 0; z-index: 5; pointer-events: none;
|
||||
background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px, transparent 1px, transparent 3px);
|
||||
opacity: .45;
|
||||
}
|
||||
.crt::after {
|
||||
content: "";
|
||||
position: fixed; inset: 0; z-index: 6; pointer-events: none;
|
||||
background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.42) 100%);
|
||||
}
|
||||
|
||||
/* ===== 黑客帝国数据流背景 ===== */
|
||||
#matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .38; }
|
||||
|
||||
.stage { position: relative; z-index: 1; padding: 34px 18px 40px; display: flex; justify-content: center; }
|
||||
|
||||
/* ===== 终端窗口 ===== */
|
||||
.window {
|
||||
width: 100%; max-width: 960px;
|
||||
background: linear-gradient(180deg, rgba(10,26,17,.96), rgba(6,15,10,.97));
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,.6),
|
||||
0 24px 80px rgba(0,0,0,.55),
|
||||
0 0 42px rgba(61,255,156,.07);
|
||||
overflow: hidden;
|
||||
}
|
||||
.titlebar {
|
||||
display: flex; align-items: center; gap: 8px;
|
||||
padding: 9px 14px;
|
||||
border-bottom: 1px solid var(--border-soft);
|
||||
background: rgba(4,12,8,.6);
|
||||
}
|
||||
.dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.dot.r { background: #ff5f56; } .dot.y { background: #ffbd2e; } .dot.g { background: #27c93f; }
|
||||
.titlebar .t { font-size: .74rem; color: var(--muted); letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.titlebar .mode { margin-left: auto; font-size: .72rem; color: var(--accent-dim); flex-shrink: 0; }
|
||||
|
||||
.inner { padding: 26px 26px 30px; }
|
||||
|
||||
/* ===== 开机日志 ===== */
|
||||
#bootlog { font-size: .78rem; line-height: 1.75; color: var(--accent-dim); margin-bottom: 4px; min-height: 3em; }
|
||||
#bootlog .bootline::before { content: " "; }
|
||||
|
||||
/* ===== 头部 ===== */
|
||||
header { text-align: left; margin-top: 10px; }
|
||||
.prompt-line { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
|
||||
.prompt-line b { color: var(--accent); font-weight: 400; }
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5.4vw, 3.1rem);
|
||||
font-weight: 700; letter-spacing: -.02em; line-height: 1.05;
|
||||
color: #eafff3;
|
||||
text-shadow: 0 0 18px rgba(61,255,156,.4), 0 0 46px rgba(61,255,156,.16);
|
||||
animation: glowpulse 7s ease-in-out infinite;
|
||||
}
|
||||
@keyframes glowpulse { 0%,100% { text-shadow: 0 0 18px rgba(61,255,156,.4), 0 0 46px rgba(61,255,156,.16); } 50% { text-shadow: 0 0 24px rgba(61,255,156,.55), 0 0 60px rgba(61,255,156,.22); } }
|
||||
.cursor { display: inline-block; width: .55em; height: 1em; background: var(--accent); vertical-align: -0.12em; margin-left: .18em; animation: blink 1.1s steps(1) infinite; }
|
||||
@keyframes blink { 50% { opacity: 0; } }
|
||||
p.sub { color: var(--muted); margin-top: 10px; font-size: .9rem; letter-spacing: .02em; }
|
||||
|
||||
/* ===== 状态卡片:天气 / 日期 / 时间 ===== */
|
||||
.info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
|
||||
.card {
|
||||
border: 1px solid var(--border-soft);
|
||||
background: rgba(9,24,16,.55);
|
||||
padding: 12px 16px 14px;
|
||||
position: relative;
|
||||
}
|
||||
.card::before, .card::after { content: ""; position: absolute; width: 8px; height: 8px; pointer-events: none; }
|
||||
.card::before { top: -1px; left: -1px; border-top: 1px solid var(--accent-dim); border-left: 1px solid var(--accent-dim); }
|
||||
.card::after { bottom: -1px; right: -1px; border-bottom: 1px solid var(--accent-dim); border-right: 1px solid var(--accent-dim); }
|
||||
.card .label { font-size: .68rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; }
|
||||
.card .value { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; color: #eafff3; }
|
||||
.card#weather .value { font-size: 1.2rem; display: flex; align-items: center; gap: 8px; }
|
||||
.card#weather .value .emoji { font-size: 1.45rem; filter: saturate(.9); }
|
||||
.wcity { font-size: .72rem; color: var(--muted); margin-top: 5px; min-height: 1em; }
|
||||
|
||||
/* ===== Bing 搜索(提示符样式) ===== */
|
||||
form.search {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
margin-top: 24px; padding: 6px 8px 6px 16px;
|
||||
border: 1px solid var(--border);
|
||||
background: rgba(5,14,9,.7);
|
||||
transition: border-color .16s ease, box-shadow .16s ease;
|
||||
}
|
||||
form.search:focus-within { border-color: var(--accent-dim); box-shadow: 0 0 0 1px rgba(61,255,156,.18), 0 0 24px rgba(61,255,156,.07); }
|
||||
form.search .ps { font-size: .9rem; color: var(--accent); white-space: nowrap; flex-shrink: 0; }
|
||||
form.search select {
|
||||
flex-shrink: 0; cursor: pointer;
|
||||
font-family: var(--mono); font-size: .82rem;
|
||||
color: var(--accent); background: rgba(4,12,8,.75);
|
||||
border: 1px solid var(--border); border-radius: 6px;
|
||||
padding: 6px 8px; outline: none;
|
||||
}
|
||||
form.search select:focus-visible { border-color: var(--accent-dim); }
|
||||
form.search input {
|
||||
flex: 1; min-width: 0; background: none; border: none; outline: none;
|
||||
color: var(--text); font-family: var(--mono); font-size: .92rem; padding: 9px 0; caret-color: var(--accent);
|
||||
}
|
||||
form.search input::placeholder { color: #48645a; }
|
||||
form.search button {
|
||||
border: 1px solid var(--border); cursor: pointer; flex-shrink: 0;
|
||||
padding: 7px 16px; font-family: var(--mono); font-size: .82rem; font-weight: 600;
|
||||
color: var(--accent); background: transparent; letter-spacing: .05em;
|
||||
transition: background .14s ease, color .14s ease;
|
||||
}
|
||||
form.search button:hover { background: var(--accent); color: #04120b; border-color: var(--accent); }
|
||||
|
||||
/* ===== 服务分组 ===== */
|
||||
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 28px; }
|
||||
.panel { border: 1px solid var(--border-soft); background: rgba(7,18,12,.5); padding: 4px 0 6px; }
|
||||
.panel > h2 {
|
||||
display: flex; align-items: baseline; gap: 10px;
|
||||
font-size: .8rem; font-weight: 600; letter-spacing: .08em;
|
||||
color: #bfe9d3; padding: 12px 16px 10px;
|
||||
border-bottom: 1px dashed var(--border-soft);
|
||||
}
|
||||
.panel > h2 .bar { color: var(--accent); }
|
||||
.panel > h2 .count { margin-left: auto; font-size: .7rem; color: var(--muted); font-weight: 400; }
|
||||
|
||||
ul.links { list-style: none; padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; }
|
||||
ul.links a {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
padding: 9px 10px; text-decoration: none; color: var(--text);
|
||||
border-left: 2px solid transparent;
|
||||
transition: background .13s ease, border-color .13s ease;
|
||||
}
|
||||
ul.links a:hover, ul.links a:focus-visible {
|
||||
background: rgba(61,255,156,.07);
|
||||
border-left-color: var(--accent);
|
||||
outline: none;
|
||||
}
|
||||
ul.links .arrow { color: var(--accent-dim); font-size: .85rem; flex-shrink: 0; transition: transform .13s ease, color .13s ease; }
|
||||
ul.links a:hover .arrow { color: var(--accent); transform: translateX(3px); }
|
||||
ul.links .icon {
|
||||
font-size: .95rem; width: 26px; height: 26px; flex-shrink: 0;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
border: 1px solid var(--border-soft); background: rgba(4,12,8,.7);
|
||||
}
|
||||
ul.links .name { font-weight: 600; font-size: .9rem; white-space: nowrap; }
|
||||
ul.links .desc { margin-left: auto; color: var(--muted); font-size: .74rem; text-align: right; overflow: hidden; text-overflow: ellipsis; max-width: 52%; }
|
||||
|
||||
/* ===== 页脚 ===== */
|
||||
footer { margin-top: 30px; padding-top: 16px; border-top: 1px dashed var(--border-soft); display: flex; align-items: baseline; gap: 10px; font-size: .74rem; color: var(--muted); }
|
||||
footer .code { color: var(--accent-dim); }
|
||||
footer a { color: var(--accent-dim); text-decoration: none; border-bottom: 1px dotted var(--accent-dim); transition: color .14s ease, border-color .14s ease; }
|
||||
footer a:hover { color: var(--accent); border-color: var(--accent); }
|
||||
footer .brand { margin-left: auto; color: #bfe9d3; letter-spacing: .06em; }
|
||||
|
||||
/* ===== 入场动画 ===== */
|
||||
.reveal { opacity: 0; transform: translateY(8px); transition: opacity .2s ease var(--rd, 0s), transform .2s ease var(--rd, 0s); }
|
||||
body.ready .reveal { opacity: 1; transform: none; }
|
||||
|
||||
/* ===== 响应式 ===== */
|
||||
@media (max-width: 760px) {
|
||||
.grid { grid-template-columns: 1fr; }
|
||||
.inner { padding: 20px 18px 24px; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.info-row { grid-template-columns: 1fr 1fr; }
|
||||
.card#clock { grid-column: span 2; }
|
||||
ul.links .desc { max-width: 46%; }
|
||||
}
|
||||
@media (max-width: 400px) {
|
||||
ul.links .desc { display: none; }
|
||||
}
|
||||
|
||||
/* ===== 减少动态效果 ===== */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
h1, .cursor { animation: none; }
|
||||
.reveal { transition: none; opacity: 1; transform: none; }
|
||||
.crt::before { display: none; }
|
||||
#matrix { display: none; }
|
||||
}
|
||||
</style>
|
||||
<noscript><style>.reveal{opacity:1!important;transform:none!important}#bootlog{display:none}</style></noscript>
|
||||
</head>
|
||||
<body class="crt">
|
||||
<canvas id="matrix" aria-hidden="true"></canvas>
|
||||
<div class="stage">
|
||||
<main class="window">
|
||||
<div class="titlebar">
|
||||
<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>
|
||||
<span class="t">guest@hyonglin.top: ~</span>
|
||||
<span class="mode">[ bash ]</span>
|
||||
</div>
|
||||
|
||||
<div class="inner">
|
||||
<div id="bootlog" aria-hidden="true"></div>
|
||||
|
||||
<header class="reveal" style="--rd:.02s">
|
||||
<div class="prompt-line"><b>guest@hyonglin.top</b>:~$ whoami</div>
|
||||
<h1>hyonglin.top<span class="cursor"></span></h1>
|
||||
<p class="sub">个人服务导航 · 随时可达</p>
|
||||
</header>
|
||||
|
||||
<div class="info-row reveal" style="--rd:.07s">
|
||||
<div class="card" id="weather">
|
||||
<div class="label">天气</div>
|
||||
<div class="value"><span class="emoji">☀️</span><span class="wtxt">获取中…</span></div>
|
||||
<div class="wcity"></div>
|
||||
</div>
|
||||
<div class="card" id="date">
|
||||
<div class="label">日期</div>
|
||||
<div class="value" id="dateval">----</div>
|
||||
</div>
|
||||
<div class="card" id="clock">
|
||||
<div class="label">时间</div>
|
||||
<div class="value" id="clockval">--:--:--</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form class="search reveal" style="--rd:.11s" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
|
||||
<span class="ps">$</span>
|
||||
<select name="engine" id="engine" aria-label="搜索引擎">
|
||||
<option value="bing" selected>bing</option>
|
||||
<option value="google">google</option>
|
||||
<option value="baidu">baidu</option>
|
||||
<option value="duckduckgo">duckduckgo</option>
|
||||
</select>
|
||||
<input type="text" name="q" placeholder="输入关键词,回车搜索…" autocomplete="off" aria-label="搜索">
|
||||
<button type="submit">ENTER ↵</button>
|
||||
</form>
|
||||
|
||||
<div class="grid">
|
||||
<section class="panel reveal" style="--rd:.15s">
|
||||
<h2><span class="bar">▍</span>📡 自建服务<span class="count">(4)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://note.hyonglin.top"><span class="arrow">❯</span><span class="icon">📝</span><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></a></li>
|
||||
<li><a href="https://git.hyonglin.top"><span class="arrow">❯</span><span class="icon">📦</span><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></a></li>
|
||||
<li><a href="https://ssh.hyonglin.top"><span class="arrow">❯</span><span class="icon">🖥️</span><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></a></li>
|
||||
<li><a href="https://frp.hyonglin.top"><span class="arrow">❯</span><span class="icon">🔗</span><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.18s">
|
||||
<h2><span class="bar">▍</span>🤖 AI 助手<span class="count">(2)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🤖</span><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></a></li>
|
||||
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">💬</span><span class="name">豆包</span><span class="desc">doubao.com</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.21s">
|
||||
<h2><span class="bar">▍</span>☁️ 云服务<span class="count">(3)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🌐</span><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></a></li>
|
||||
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">☁️</span><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></a></li>
|
||||
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🐧</span><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<section class="panel reveal" style="--rd:.24s">
|
||||
<h2><span class="bar">▍</span>🔧 常用<span class="count">(3)</span></h2>
|
||||
<ul class="links">
|
||||
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">📧</span><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></a></li>
|
||||
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">🔍</span><span class="name">Bing 搜索</span><span class="desc">bing.com</span></a></li>
|
||||
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="arrow">❯</span><span class="icon">📺</span><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></a></li>
|
||||
</ul>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<footer class="reveal" style="--rd:.28s">
|
||||
<span class="code">$ exit 0</span>
|
||||
<span>— end of transmission —</span>
|
||||
<span><a href="/terminal/" aria-current="page">终端版</a> · <a href="/">Bento</a> · <a href="/brutal/">Brutal</a> · <a href="/swiss/">Swiss</a> · <a href="/hud/">HUD</a></span>
|
||||
<span class="brand">hyonglin.top</span>
|
||||
</footer>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
/* ===== 黑客帝国数据流:绿色字符雨,低透明度衬在窗口后面 ===== */
|
||||
(function(){
|
||||
var cv = document.getElementById('matrix');
|
||||
if (!cv || !cv.getContext) return;
|
||||
if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
|
||||
var ctx = cv.getContext('2d');
|
||||
var FONT = 14, W, H, cols, drops = [];
|
||||
var CHARS = 'アカサタナハマヤラワ0123456789ABCDEF+-*/<>=|';
|
||||
function resize() {
|
||||
W = cv.width = window.innerWidth;
|
||||
H = cv.height = window.innerHeight;
|
||||
cols = Math.ceil(W / FONT);
|
||||
drops = [];
|
||||
for (var i = 0; i < cols; i++) drops.push(Math.random() * -H / FONT);
|
||||
}
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
function tick() {
|
||||
ctx.fillStyle = 'rgba(2,6,4,.16)'; // 半透明黑做拖尾淡出
|
||||
ctx.fillRect(0, 0, W, H);
|
||||
ctx.font = FONT + 'px monospace';
|
||||
for (var i = 0; i < cols; i++) {
|
||||
var y = drops[i] * FONT;
|
||||
ctx.fillStyle = Math.random() < .12 ? '#c8ffe3' : 'rgba(61,255,156,.7)';
|
||||
ctx.fillText(CHARS[(Math.random() * CHARS.length) | 0], i * FONT, y);
|
||||
if (y > H && Math.random() > .972) drops[i] = -Math.random() * 40;
|
||||
else drops[i] += 1;
|
||||
}
|
||||
requestAnimationFrame(tick);
|
||||
}
|
||||
tick();
|
||||
})();
|
||||
|
||||
/* ===== 开机自举动画(可点击/按键跳过,reduced-motion 直接显示) ===== */
|
||||
var booted = false;
|
||||
var bootEl = document.getElementById('bootlog');
|
||||
var BOOT_LINES = [
|
||||
'[ ok ] mount /services .......... 12 items',
|
||||
'[ ok ] weather daemon ........... running',
|
||||
'$ whoami → hyonglin.top — 个人服务导航'
|
||||
];
|
||||
function markReady() { document.body.classList.add('ready'); }
|
||||
if (bootEl && window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
BOOT_LINES.forEach(function(l){ var d = document.createElement('div'); d.className = 'bootline'; d.textContent = l; bootEl.appendChild(d); });
|
||||
booted = true; markReady();
|
||||
} else if (bootEl) {
|
||||
var li = 0, ci = 0, cur = null;
|
||||
function finishBoot() { if (!booted) { booted = true; markReady(); } }
|
||||
function typeLine() {
|
||||
if (booted) return;
|
||||
if (li >= BOOT_LINES.length) { setTimeout(finishBoot, 60); return; }
|
||||
var line = BOOT_LINES[li];
|
||||
if (!cur) { cur = document.createElement('div'); cur.className = 'bootline'; bootEl.appendChild(cur); ci = 0; }
|
||||
if (ci <= line.length) { cur.textContent = line.slice(0, ci++); setTimeout(typeLine, 3); }
|
||||
else { li++; cur = null; setTimeout(typeLine, 45); }
|
||||
}
|
||||
function skipBoot() {
|
||||
if (booted) return;
|
||||
booted = true;
|
||||
bootEl.innerHTML = '';
|
||||
BOOT_LINES.forEach(function(l){ var d = document.createElement('div'); d.className = 'bootline'; d.textContent = l; bootEl.appendChild(d); });
|
||||
markReady();
|
||||
}
|
||||
typeLine();
|
||||
window.addEventListener('keydown', skipBoot, { once: true });
|
||||
window.addEventListener('pointerdown', skipBoot, { once: true });
|
||||
setTimeout(skipBoot, 1250); // 兜底:任何情况下 1.25 秒内一定就绪
|
||||
}
|
||||
|
||||
/* ===== 搜索引擎选择 ===== */
|
||||
(function(){
|
||||
var sel = document.getElementById('engine');
|
||||
if (!sel) return;
|
||||
var ENGINES = {
|
||||
bing: 'https://www.bing.com/search?q=',
|
||||
google: 'https://www.google.com/search?q=',
|
||||
baidu: 'https://www.baidu.com/s?wd=',
|
||||
duckduckgo: 'https://duckduckgo.com/?q='
|
||||
};
|
||||
var form = sel.closest('form');
|
||||
function apply() { form.action = ENGINES[sel.value] || ENGINES.bing; }
|
||||
sel.addEventListener('change', apply);
|
||||
apply();
|
||||
})();
|
||||
|
||||
/* ===== 日期 + 时钟 ===== */
|
||||
var week = ['日','一','二','三','四','五','六'];
|
||||
function pad2(n) { return (n < 10 ? '0' : '') + n; }
|
||||
function updateClock() {
|
||||
var now = new Date();
|
||||
var c = document.getElementById('clockval');
|
||||
if (c) c.textContent = pad2(now.getHours()) + ':' + pad2(now.getMinutes()) + ':' + pad2(now.getSeconds());
|
||||
var d = document.getElementById('dateval');
|
||||
if (d) d.textContent = now.getFullYear() + '-' + pad2(now.getMonth()+1) + '-' + pad2(now.getDate()) + ' 周' + week[now.getDay()];
|
||||
}
|
||||
setInterval(updateClock, 1000);
|
||||
updateClock();
|
||||
|
||||
/* ===== 天气:GPS 定位 + Open-Meteo(不依赖 IP) ===== */
|
||||
var emojiBox = function(){ return document.querySelector('#weather .emoji'); };
|
||||
var tempBox = function(){ return document.querySelector('#weather .wtxt'); };
|
||||
var cityBox = function(){ return document.querySelector('.wcity'); };
|
||||
|
||||
var WMO = {
|
||||
0:'☀️',1:'🌤',2:'⛅',3:'☁️',45:'🌫',48:'🌫',
|
||||
51:'🌦',53:'🌦',55:'🌦',56:'🌨',57:'🌨',
|
||||
61:'🌧',63:'🌧',65:'🌧',66:'🌨',67:'🌨',
|
||||
71:'🌨',73:'🌨',75:'🌨',77:'🌨',80:'🌦',81:'🌦',82:'🌧',
|
||||
85:'🌨',86:'🌨',95:'⛈',96:'⛈',99:'⛈'
|
||||
};
|
||||
function wmo(w) { return WMO[w] || '🌡️'; }
|
||||
|
||||
function setWeather(temp, wcode, city) {
|
||||
if (tempBox()) tempBox().textContent = temp + '°C';
|
||||
if (emojiBox()) emojiBox().textContent = wmo(wcode);
|
||||
if (city && cityBox()) cityBox().textContent = city;
|
||||
}
|
||||
|
||||
function getWeather(lat, lon, city) {
|
||||
var url = 'https://api.open-meteo.com/v1/forecast?latitude=' + lat + '&longitude=' + lon +
|
||||
'¤t_weather=true&timezone=auto';
|
||||
fetch(url).then(function(r){ return r.json(); }).then(function(d){
|
||||
var cw = d.current_weather || {};
|
||||
setWeather(Math.round(cw.temperature), cw.weathercode, city);
|
||||
}).catch(function(){ tempBox() && (tempBox().textContent = '天气获取失败'); });
|
||||
}
|
||||
|
||||
// 优先浏览器 GPS 定位;失败则 ipwho.is 按 IP 定位;再失败显示默认城市(北京)
|
||||
var DEFAULT_LOC = { lat: 39.9042, lon: 116.4074, city: '北京' };
|
||||
|
||||
function byIP() {
|
||||
fetch('https://ipwho.is/').then(function(r){ return r.json(); }).then(function(d){
|
||||
if (d && d.latitude && d.longitude) getWeather(d.latitude, d.longitude, d.city || '');
|
||||
else { getWeather(DEFAULT_LOC.lat, DEFAULT_LOC.lon, DEFAULT_LOC.city); }
|
||||
}).catch(function(){ getWeather(DEFAULT_LOC.lat, DEFAULT_LOC.lon, DEFAULT_LOC.city); });
|
||||
}
|
||||
|
||||
if (navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(function(pos){
|
||||
getWeather(pos.coords.latitude, pos.coords.longitude, '');
|
||||
}, byIP, { timeout: 8000 });
|
||||
} else {
|
||||
byIP();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user