feat: 主页多风格改版(终端版加速+矩阵背景,新增 Bento/Brutal/Swiss/HUD 四版本)

- 终端版 /:开机动画时间减半、绿色数据流背景、页脚五版本切换
- Bento /bento/:网格卡片 + 鼠标互动动态光晕,深浅色自适应
- Brutal /brutal/:新粗野主义撞色硬阴影风
- Swiss /swiss/:极简瑞士细分割线排版
- HUD /hud/:赛博朋克霓虹切角面板
- 各版本内容一致:天气/日期/时间、四引擎搜索框、四组 12 链接
This commit is contained in:
ylhan
2026-08-27 00:14:20 +08:00
parent b5e806f97e
commit e49ce2e4a1
5 changed files with 1837 additions and 467 deletions
+405
View File
@@ -0,0 +1,405 @@
<!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%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">
<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>
</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 +
'&current_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>
+348
View File
@@ -0,0 +1,348 @@
<!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 x='3' y='3' width='58' height='58' rx='12' fill='%23f5d337' stroke='%231a1a1a' stroke-width='6'/%3E%3Cpath d='M14 40 L28 26 L36 34 L50 20' fill='none' stroke='%231a1a1a' stroke-width='7'/%3E%3Ccircle cx='46' cy='46' r='6' fill='%23ff4d8d' stroke='%231a1a1a' stroke-width='4'/%3E%3C/svg%3E">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hyonglin.top</title>
<style>
:root {
--bg: #f5d337;
--ink: #1a1a1a;
--paper: #ffffff;
--pink: #ff4d8d;
--blue: #29c5ff;
--green: #0fd67b;
--orange: #ff8a3d;
}
* { 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;
color: var(--ink);
background-color: var(--bg);
/* 网格纸纹理 + SVG 噪点 */
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"),
linear-gradient(rgba(26,26,26,.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,26,26,.07) 1px, transparent 1px);
background-size: 140px 140px, 36px 36px, 36px 36px;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--pink); color: #fff; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 34px 20px 40px; }
/* ===== 粗野网格:6 列,与 bento 版同构 ===== */
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; }
.card {
background: var(--paper);
border: 3px solid var(--ink);
border-radius: 4px;
box-shadow: 6px 6px 0 var(--ink);
padding: 20px 22px;
position: relative;
animation: slam .5s cubic-bezier(.2,.9,.3,1.15) both;
animation-delay: var(--d, 0s);
}
@keyframes slam { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } }
/* ===== Hero:巨型标题 + 贴纸 + 搜索 ===== */
.hero { grid-column: span 4; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; background: var(--paper); }
.hero h1 {
font-size: clamp(2.6rem, 7vw, 5rem);
font-weight: 900; letter-spacing: -.04em; line-height: .98;
text-transform: lowercase;
text-shadow: 3px 3px 0 var(--pink), 6px 6px 0 var(--blue);
}
.hero p.sub { margin-top: 14px; font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.sticker {
position: absolute; top: -16px; right: 18px; z-index: 2;
background: var(--orange); color: var(--ink);
border: 3px solid var(--ink); border-radius: 999px;
padding: 7px 14px; font-size: .78rem; font-weight: 900; letter-spacing: .06em;
box-shadow: 3px 3px 0 var(--ink);
transform: rotate(6deg);
animation: wiggle 2.6s ease-in-out infinite alternate;
}
@keyframes wiggle { from { transform: rotate(4deg); } to { transform: rotate(9deg); } }
form.search {
display: flex; align-items: center; gap: 10px;
margin-top: 26px; padding: 8px 8px 8px 14px;
background: var(--paper);
border: 3px solid var(--ink); border-radius: 4px;
box-shadow: 5px 5px 0 var(--ink);
}
form.search:focus-within { box-shadow: 7px 7px 0 var(--pink); }
form.search .sicon { font-size: 1.05rem; flex-shrink: 0; }
form.search select {
flex-shrink: 0; cursor: pointer;
font-family: inherit; font-size: .84rem; font-weight: 800; color: var(--ink);
background: #fffbe8; border: 2px solid var(--ink); border-radius: 3px;
padding: 7px 6px; outline: none; max-width: 122px;
}
form.search input {
flex: 1; min-width: 0; background: none; border: none; outline: none;
color: var(--ink); font-family: inherit; font-size: .95rem; padding: 8px 0;
}
form.search input::placeholder { color: rgba(26,26,26,.45); font-weight: 600; }
form.search button {
border: 3px solid var(--ink); cursor: pointer; flex-shrink: 0;
padding: 9px 22px; border-radius: 3px;
font-family: inherit; font-size: .9rem; font-weight: 900; letter-spacing: .04em; color: var(--ink);
background: var(--pink); box-shadow: 3px 3px 0 var(--ink);
transition: transform .12s ease, box-shadow .12s ease;
}
form.search button:hover { transform: translate(-2px,-2px); box-shadow: 5px 5px 0 var(--ink); }
/* ===== 信息块:天气 / 时间 / 日期(保留三个独立元素) ===== */
.sky { grid-column: span 2; grid-row: span 2; display: flex; flex-direction: column; justify-content: center; gap: 6px; background: var(--blue); }
.card .label { font-size: .74rem; color: rgba(26,26,26,.65); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px; font-weight: 900; }
.sky .emoji { font-size: 3.2rem; line-height: 1; }
.sky .temp { font-size: clamp(2.2rem, 4vw, 2.8rem); font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.wcity { font-size: .85rem; font-weight: 700; color: rgba(26,26,26,.7); min-height: 1.2em; }
.clockcard, .datecard { grid-column: span 3; display: flex; flex-direction: column; justify-content: center; }
.clockcard { background: var(--paper); }
.datecard { background: var(--green); }
.clockcard .value { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 900; 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: 900; font-variant-numeric: tabular-nums; letter-spacing: .02em; line-height: 1.15; }
/* ===== 服务分组面板:四色撞色块面 ===== */
.panel { grid-column: span 3; border-radius: 4px; }
.s-self { background: var(--green); }
.s-ai { background: var(--pink); }
.s-cloud { background: var(--blue); }
.s-util { background: var(--orange); }
.panel > h2 { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; font-weight: 900; letter-spacing: -.01em; margin-bottom: 16px; }
.panel > h2 .count {
margin-left: auto; font-size: .78rem; font-weight: 900; color: var(--ink);
background: #fffbe8; border: 2px solid var(--ink); border-radius: 999px;
padding: 3px 12px; box-shadow: 2px 2px 0 var(--ink);
}
ul.tiles { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
ul.tiles a {
display: flex; align-items: center; gap: 10px;
padding: 12px 13px;
background: #fffbe8;
border: 3px solid var(--ink); border-radius: 4px;
box-shadow: 4px 4px 0 var(--ink);
text-decoration: none; color: var(--ink);
transition: transform .12s ease, box-shadow .12s ease;
}
ul.tiles a:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink); }
ul.tiles a:focus-visible { outline: 3px dashed var(--ink); outline-offset: 2px; }
ul.tiles .icon {
font-size: 1.15rem; width: 40px; height: 40px; flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
border: 2px solid var(--ink); border-radius: 3px; background: #fff;
}
ul.tiles .meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
ul.tiles .name { font-weight: 800; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.tiles .desc { color: rgba(26,26,26,.55); font-size: .74rem; font-weight: 600; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.tiles .go { font-weight: 900; flex-shrink: 0; transform: translate(1px, -1px); }
/* ===== 页脚 ===== */
footer.card { background: none; border: none; box-shadow: none; padding: 8px 0; text-align: center; }
footer .brand { font-weight: 900; letter-spacing: .02em; margin-right: 10px; }
footer nav { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px 4px; font-size: .8rem; font-weight: 700; color: rgba(26,26,26,.75); }
footer a { color: var(--ink); text-decoration: none; border-bottom: 2px solid transparent; padding: 1px 2px; transition: background .1s ease; }
footer a:hover { background: #fffbe8; border-bottom-color: var(--ink); }
/* ===== 响应式:窄屏单列 ===== */
@media (max-width: 860px) {
.grid { grid-template-columns: 1fr; gap: 14px; }
.hero, .sky, .clockcard, .datecard, .panel { grid-column: auto; grid-row: auto; }
.sky { flex-direction: row; align-items: center; gap: 18px; }
.sky .emoji { font-size: 2.6rem; }
}
@media (max-width: 540px) {
.wrap { padding: 22px 14px 30px; }
ul.tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.card { animation: none; }
.sticker { animation: none; }
ul.tiles a, form.search button { transition: none; }
}
</style>
</head>
<body>
<main class="wrap">
<div class="grid">
<!-- Hero:标题 + 搜索 -->
<section class="card hero" style="--d:.05s">
<span class="sticker">随时可达 ★</span>
<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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</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><span class="go">↗</span></a></li>
</ul>
</section>
<footer style="--d:.58s" class="card">
<span class="brand">hyonglin.top</span>
<nav>
<a href="/">终端版</a> /
<a href="/bento/">Bento 版</a> /
<span aria-current="page">Brutal 版(当前)</span> /
<a href="/swiss/">Swiss 版</a> /
<a href="/hud/">HUD 版</a>
</nav>
</footer>
</div>
</main>
<script>
/* ===== 搜索引擎选择 ===== */
(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 +
'&current_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>
+411
View File
@@ -0,0 +1,411 @@
<!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' fill='%23050a14'/%3E%3Cpath d='M8 22V8h14M56 42v14H42' stroke='%2300f0ff' stroke-width='4' fill='none'/%3E%3Ctext x='22' y='44' font-family='monospace' font-size='22' fill='%23ff2d95'%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: #04070f;
--cyan: #00f0ff;
--mag: #ff2d95;
--text: #d6f3ff;
--muted: #5f8299;
--fill-a: rgba(7,15,30,.92);
--fill-b: rgba(4,8,18,.95);
--edge-soft: rgba(0,240,255,.35);
--mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: var(--mono);
background:
radial-gradient(56% 38% at 50% -6%, rgba(0,240,255,.10), transparent 70%),
radial-gradient(50% 34% at 88% 108%, rgba(255,45,149,.09), transparent 70%),
var(--bg);
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
::selection { background: var(--cyan); color: #03121a; }
/* ===== 背景:细网格 + 扫描线 + 巡扫光带 ===== */
body::before {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image:
linear-gradient(rgba(0,240,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,240,255,.05) 1px, transparent 1px);
background-size: 44px 44px;
}
body::after {
content: ""; position: fixed; inset: 0; z-index: 7; pointer-events: none;
background: repeating-linear-gradient(0deg, rgba(0,240,255,.03) 0 1px, transparent 1px 3px);
}
.scanline {
position: fixed; left: 0; right: 0; top: -18%; height: 16%; z-index: 1; pointer-events: none;
background: linear-gradient(180deg, transparent, rgba(0,240,255,.07), transparent);
animation: sweepband 9s linear infinite;
}
@keyframes sweepband { from { top: -18%; } to { top: 118%; } }
/* ===== 四角坐标装饰文字 ===== */
.coords span { position: fixed; z-index: 2; font-size: .62rem; letter-spacing: .14em; color: rgba(0,240,255,.4); pointer-events: none; }
.coords .tl { top: 10px; left: 14px; }
.coords .tr { top: 10px; right: 14px; color: rgba(255,45,149,.45); }
.coords .bl { bottom: 10px; left: 14px; color: rgba(255,45,149,.4); }
.coords .br { bottom: 10px; right: 14px; }
.wrap { position: relative; z-index: 3; max-width: 1080px; margin: 0 auto; padding: 42px 20px 46px; }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
/* ===== HUD 面板:clip-path 切角 + 霓虹描边(外框 1px 渐变) ===== */
.card {
position: relative; padding: 1px;
background: linear-gradient(135deg, rgba(0,240,255,.75), rgba(0,240,255,.16) 32%, rgba(255,45,149,.28) 72%, rgba(255,45,149,.6));
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
animation: rise .55s cubic-bezier(.2,.7,.3,1) both;
animation-delay: var(--d, 0s);
}
.card > .in {
clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 15px, 100% 100%, 15px 100%, 0 calc(100% - 15px));
background: linear-gradient(160deg, var(--fill-a), var(--fill-b));
padding: 16px 18px; position: relative; height: 100%;
}
/* 四角 L 形角标(单伪元素绘四个角) */
.card > .in::before {
content: ""; position: absolute; inset: 5px; pointer-events: none;
background:
linear-gradient(var(--cyan), var(--cyan)) top left / 12px 2px,
linear-gradient(var(--cyan), var(--cyan)) top left / 2px 12px,
linear-gradient(var(--cyan), var(--cyan)) top right / 12px 2px,
linear-gradient(var(--cyan), var(--cyan)) top right / 2px 12px,
linear-gradient(rgba(0,240,255,.6), rgba(0,240,255,.6)) bottom left / 12px 2px,
linear-gradient(rgba(0,240,255,.6), rgba(0,240,255,.6)) bottom left / 2px 12px,
linear-gradient(var(--mag), var(--mag)) bottom right / 12px 2px,
linear-gradient(var(--mag), var(--mag)) bottom right / 2px 12px;
background-repeat: no-repeat; opacity: .85;
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ===== 头部:状态标签 + glitch 标题 ===== */
.head .in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px 22px; }
.tags { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: .68rem; letter-spacing: .18em; color: var(--cyan); border: 1px solid var(--edge-soft); padding: 4px 12px; }
.tag.dim { color: var(--muted); border-color: rgba(95,130,153,.3); }
.dot { width: 6px; height: 6px; background: var(--cyan); box-shadow: 0 0 8px var(--cyan); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: .15; } }
h1.glitch {
position: relative; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700;
letter-spacing: .04em; color: #eaffff;
text-shadow: 0 0 16px rgba(0,240,255,.4);
}
h1.glitch::before, h1.glitch::after { content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; }
h1.glitch::before { color: var(--cyan); opacity: .75; transform: translate(-2px, -1.5px); animation: gl1 3.4s steps(1) infinite; }
h1.glitch::after { color: var(--mag); opacity: .6; transform: translate(2px, 1.5px); animation: gl2 2.9s steps(1) infinite; }
@keyframes gl1 {
0%, 91% { clip-path: inset(0 0 0 0); transform: translate(-2px, -1.5px); }
92% { clip-path: inset(18% 0 58% 0); transform: translate(-7px, 0); }
94% { clip-path: inset(62% 0 8% 0); transform: translate(5px, -2px); }
96% { clip-path: inset(38% 0 40% 0); transform: translate(-5px, 1px); }
97%, 100% { clip-path: inset(0 0 0 0); transform: translate(-2px, -1.5px); }
}
@keyframes gl2 {
0%, 88% { clip-path: inset(0 0 0 0); transform: translate(2px, 1.5px); }
89% { clip-path: inset(56% 0 24% 0); transform: translate(7px, 1px); }
91% { clip-path: inset(8% 0 74% 0); transform: translate(-5px, -1px); }
93%, 100% { clip-path: inset(0 0 0 0); transform: translate(2px, 1.5px); }
}
.head p.sub { color: var(--muted); margin-top: 10px; font-size: .92rem; letter-spacing: .12em; }
/* ===== HUD 数据读数:天气 / 日期 / 时间 ===== */
.sky, .datecard, .clockcard { grid-column: span 2; }
.card .label { display: flex; justify-content: space-between; align-items: baseline; font-size: .7rem; letter-spacing: .18em; color: var(--muted); margin-bottom: 10px; text-transform: uppercase; }
.card .label .unit { font-size: .62rem; color: rgba(255,45,149,.75); letter-spacing: .1em; }
.sky .in { display: flex; flex-direction: column; justify-content: center; gap: 6px; align-items: center; text-align: center; }
.sky .emoji { font-size: 2.4rem; line-height: 1; filter: drop-shadow(0 0 10px rgba(0,240,255,.35)); }
.sky .temp { font-size: clamp(1.9rem, 3.6vw, 2.4rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--cyan); text-shadow: 0 0 14px rgba(0,240,255,.45); }
.wcity { font-size: .76rem; color: var(--muted); min-height: 1.2em; letter-spacing: .08em; }
.datecard .in, .clockcard .in { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.datecard .value { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: .06em; color: var(--text); }
.clockcard .value { font-size: clamp(1.7rem, 3.4vw, 2.2rem); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .08em; color: #eaffff; text-shadow: 0 0 16px rgba(0,240,255,.5); }
/* ===== 搜索:命令输入行 ===== */
form.search { grid-column: span 6; }
form.search .in { display: flex; align-items: center; gap: 10px; padding: 8px 14px; transition: background .15s ease; }
form.search:focus-within .in { background: rgba(0,240,255,.05); }
form.search .ps { font-size: .82rem; color: var(--cyan); letter-spacing: .1em; white-space: nowrap; flex-shrink: 0; text-shadow: 0 0 8px rgba(0,240,255,.5); }
form.search select {
flex-shrink: 0; cursor: pointer;
font-family: var(--mono); font-size: .8rem; color: var(--cyan);
background: transparent; border: 1px solid var(--edge-soft);
padding: 7px 9px; outline: none; max-width: 128px;
}
form.search select:focus-visible { border-color: var(--cyan); }
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: 8px 0; caret-color: var(--cyan); }
form.search input::placeholder { color: #3d5a6e; }
form.search button {
border: none; cursor: pointer; flex-shrink: 0;
font-family: var(--mono); font-size: .82rem; font-weight: 700; letter-spacing: .14em;
color: #03121a; background: linear-gradient(120deg, var(--cyan), #6cf5ff);
padding: 9px 20px; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
transition: filter .14s ease;
}
form.search button:hover { filter: brightness(1.15) drop-shadow(0 0 10px rgba(0,240,255,.6)); }
/* ===== 服务分组面板 ===== */
.panel { grid-column: span 3; }
.panel > .in > h2 { display: flex; align-items: center; gap: 9px; font-size: .88rem; font-weight: 700; letter-spacing: .1em; margin-bottom: 12px; color: #eaffff; }
.panel > .in > h2::before { content: "▞"; color: var(--cyan); text-shadow: 0 0 8px rgba(0,240,255,.7); }
.panel > .in > h2 .count { margin-left: auto; font-size: .68rem; color: var(--mag); letter-spacing: .1em; }
ul.links { list-style: none; display: flex; flex-direction: column; gap: 7px; }
ul.links a {
position: relative; overflow: hidden;
display: flex; align-items: center; gap: 10px;
padding: 9px 12px; text-decoration: none; color: var(--text);
border: 1px solid rgba(0,240,255,.16); background: rgba(3,9,18,.5);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
ul.links a::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 42%, rgba(0,240,255,.16) 50%, transparent 58%);
transform: translateX(-105%);
}
ul.links a:hover {
border-color: var(--cyan);
box-shadow: 0 0 14px rgba(0,240,255,.22), inset 0 0 12px rgba(0,240,255,.07);
transform: translateX(3px);
}
ul.links a:hover::after { animation: sweep .65s ease; }
@keyframes sweep { to { transform: translateX(105%); } }
ul.links .idx { font-size: .68rem; color: var(--muted); letter-spacing: .08em; flex-shrink: 0; transition: color .15s ease, text-shadow .15s ease; }
ul.links a:hover .idx { color: var(--cyan); text-shadow: 0 0 8px rgba(0,240,255,.7); }
ul.links .icon { font-size: 1rem; width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(0,240,255,.2); background: rgba(0,240,255,.06); }
ul.links .meta { display: flex; flex-direction: column; min-width: 0; }
ul.links .name { font-weight: 650; font-size: .88rem; letter-spacing: .03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.links .desc { color: var(--muted); font-size: .72rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.links .arr { margin-left: auto; flex-shrink: 0; color: var(--mag); font-size: .85rem; transition: transform .15s ease, text-shadow .15s ease; }
ul.links a:hover .arr { transform: translate(2px, -2px); text-shadow: 0 0 8px rgba(255,45,149,.8); }
/* ===== 页脚:版本切换 ===== */
footer.foot { grid-column: span 6; }
footer.foot .in { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; font-size: .74rem; color: var(--muted); letter-spacing: .06em; }
footer.foot .brand { color: #eaffff; text-shadow: 0 0 10px rgba(0,240,255,.35); }
footer.foot nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
footer.foot a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; transition: color .14s ease, border-color .14s ease; }
footer.foot a:hover { color: var(--cyan); border-color: var(--cyan); }
footer.foot i { font-style: normal; color: rgba(0,240,255,.35); }
footer.foot .cur { color: var(--mag); text-shadow: 0 0 8px rgba(255,45,149,.6); }
/* ===== 响应式:窄屏单列 ===== */
@media (max-width: 760px) {
.grid { grid-template-columns: 1fr; gap: 12px; }
.sky, .datecard, .clockcard, form.search, .panel, footer.foot { grid-column: auto; }
.wrap { padding: 30px 14px 36px; }
.coords span { display: none; }
}
/* ===== 减少动态效果:全部降级为静态 ===== */
@media (prefers-reduced-motion: reduce) {
.scanline { display: none; }
.card { animation: none; }
h1.glitch::before, h1.glitch::after { display: none; }
.dot { animation: none; }
ul.links a:hover::after { animation: none; opacity: 0; }
ul.links a, ul.links .arr, form.search button { transition: none; }
}
</style>
</head>
<body>
<div class="scanline" aria-hidden="true"></div>
<div class="coords" aria-hidden="true">
<span class="tl">39.9042°N / 116.4074°E</span>
<span class="tr">SYS v3.1.7 // UPLINK STABLE</span>
<span class="bl">GRID::0x5F_A3 · CH-04</span>
<span class="br">NODE:HYONGLIN · LOCK ▮</span>
</div>
<main class="wrap">
<div class="grid">
<!-- 头部:状态 + 标题 -->
<section class="card head" style="--d:.02s"><div class="in">
<div class="tags">
<span class="tag"><i class="dot"></i>SYSTEM ONLINE</span>
<span class="tag dim">NODE 39.90N · 116.40E // SECURE</span>
</div>
<h1 class="glitch" data-text="hyonglin.top">hyonglin.top</h1>
<p class="sub">个人服务导航 · 随时可达</p>
</div></section>
<!-- 天气 -->
<section class="card sky" style="--d:.08s"><div class="in">
<div class="label">天气<span class="unit">WX-TLM</span></div>
<div class="emoji">☀️</div>
<div class="temp wtxt">获取中…</div>
<div class="wcity"></div>
</div></section>
<!-- 日期 -->
<section class="card datecard" style="--d:.14s"><div class="in">
<div class="label">日期<span class="unit">DATE</span></div>
<div class="value" id="dateval">----</div>
</div></section>
<!-- 时间 -->
<section class="card clockcard" style="--d:.2s"><div class="in">
<div class="label">时间<span class="unit">LOCAL</span></div>
<div class="value" id="clockval">--:--:--</div>
</div></section>
<!-- 搜索:命令输入行 -->
<form class="card search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener"><div class="in">
<span class="ps">&gt; QUERY</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>
</div></form>
<!-- 自建服务 -->
<section class="card panel s-self" style="--d:.3s"><div class="in">
<h2>📡 自建服务<span class="count">[4]</span></h2>
<ul class="links">
<li><a href="https://note.hyonglin.top"><span class="idx">01</span><span class="icon">📝</span><span class="meta"><span class="name">笔记</span><span class="desc">note.hyonglin.top · SilverBullet</span></span><span class="arr">↗</span></a></li>
<li><a href="https://git.hyonglin.top"><span class="idx">02</span><span class="icon">📦</span><span class="meta"><span class="name">Git 服务</span><span class="desc">git.hyonglin.top · Gitea</span></span><span class="arr">↗</span></a></li>
<li><a href="https://ssh.hyonglin.top"><span class="idx">03</span><span class="icon">🖥️</span><span class="meta"><span class="name">网页 SSH 终端</span><span class="desc">ssh.hyonglin.top</span></span><span class="arr">↗</span></a></li>
<li><a href="https://frp.hyonglin.top"><span class="idx">04</span><span class="icon">🔗</span><span class="meta"><span class="name">frp 管理面板</span><span class="desc">frp.hyonglin.top</span></span><span class="arr">↗</span></a></li>
</ul>
</div></section>
<!-- AI 助手 -->
<section class="card panel s-ai" style="--d:.36s"><div class="in">
<h2>🤖 AI 助手<span class="count">[2]</span></h2>
<ul class="links">
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="idx">01</span><span class="icon">🤖</span><span class="meta"><span class="name">DeepSeek</span><span class="desc">chat.deepseek.com</span></span><span class="arr">↗</span></a></li>
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="idx">02</span><span class="icon">💬</span><span class="meta"><span class="name">豆包</span><span class="desc">doubao.com</span></span><span class="arr">↗</span></a></li>
</ul>
</div></section>
<!-- 云服务 -->
<section class="card panel s-cloud" style="--d:.42s"><div class="in">
<h2>☁️ 云服务<span class="count">[3]</span></h2>
<ul class="links">
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="idx">01</span><span class="icon">🌐</span><span class="meta"><span class="name">Cloudflare</span><span class="desc">dash.cloudflare.com</span></span><span class="arr">↗</span></a></li>
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="idx">02</span><span class="icon">☁️</span><span class="meta"><span class="name">华为云</span><span class="desc">auth.huaweicloud.com</span></span><span class="arr">↗</span></a></li>
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="idx">03</span><span class="icon">🐧</span><span class="meta"><span class="name">腾讯云</span><span class="desc">console.cloud.tencent.com</span></span><span class="arr">↗</span></a></li>
</ul>
</div></section>
<!-- 常用 -->
<section class="card panel s-util" style="--d:.48s"><div class="in">
<h2>🔧 常用<span class="count">[3]</span></h2>
<ul class="links">
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="idx">01</span><span class="icon">📧</span><span class="meta"><span class="name">QQ 邮箱</span><span class="desc">wx.mail.qq.com</span></span><span class="arr">↗</span></a></li>
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="idx">02</span><span class="icon">🔍</span><span class="meta"><span class="name">Bing 搜索</span><span class="desc">bing.com</span></span><span class="arr">↗</span></a></li>
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="idx">03</span><span class="icon">📺</span><span class="meta"><span class="name">哔哩哔哩</span><span class="desc">bilibili.com</span></span><span class="arr">↗</span></a></li>
</ul>
</div></section>
<!-- 页脚:版本切换 -->
<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="/brutal/">Brutal 版</a><i>·</i>
<a href="/swiss/">Swiss 版</a><i>·</i>
<span class="cur">◉ HUD 版</span>
</nav>
</div></footer>
</div>
</main>
<script>
/* ===== 搜索引擎选择 ===== */
(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 +
'&current_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>
+352 -467
View File
@@ -2,515 +2,400 @@
<html lang="zh-CN"> <html lang="zh-CN">
<head> <head>
<meta charset="UTF-8"> <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 100 100'%3E%3Ctext y='.9em' font-size='90'%3E🛰️%3C/text%3E%3C/svg%3E"> <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="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark">
<title>hyonglin.top</title> <title>hyonglin.top</title>
<style> <style>
:root { :root {
--bg: #0d1b2a; --bg: #020604;
--card: rgba(255,255,255,.09); --win: #07130c;
--card-hover: rgba(255,255,255,.16); --border: #1d3a2b;
--text: #f0f4fb; --border-soft: #14291e;
--muted: #a8b6c9; --text: #d7f5e4;
--accent: #7dd3fc; --muted: #6d8f7d;
--border: rgba(255,255,255,.12); --accent: #3dff9c;
--shadow: 0 8px 30px rgba(0,0,0,.35); --accent-dim: #2f8f63;
--glass-blur: 12px; --cyan: #4dd8ff;
} --amber: #ffc857;
@media (prefers-color-scheme: light) { --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
:root {
--bg: #eef4fb;
--card: rgba(255,255,255,.62);
--card-hover: rgba(255,255,255,.85);
--text: #15202e;
--muted: #5b6b7f;
--accent: #0e7490;
--border: rgba(20,40,70,.12);
--shadow: 0 8px 30px rgba(30,60,90,.12);
}
.search button { color: #fff; }
} }
* { box-sizing: border-box; margin: 0; padding: 0; } * { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; } html, body { height: 100%; }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; font-family: var(--mono);
background: var(--bg);
color: var(--text); 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; min-height: 100vh;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
overflow-x: hidden; overflow-x: hidden;
} }
::selection { background: var(--accent); color: #04120b; }
/* ===== 极光背景 ===== */ /* ===== CRT 扫描线 + 暗角 ===== */
#aurora { .crt::before {
position: fixed; content: "";
inset: 0; position: fixed; inset: 0; z-index: 5; pointer-events: none;
width: 100%; background: repeating-linear-gradient(0deg, rgba(0,0,0,.20) 0px, rgba(0,0,0,.20) 1px, transparent 1px, transparent 3px);
height: 100%; opacity: .45;
z-index: 0;
pointer-events: none;
} }
.aurora-overlay { .crt::after {
position: fixed; content: "";
inset: 0; position: fixed; inset: 0; z-index: 6; pointer-events: none;
z-index: 1; background: radial-gradient(120% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.42) 100%);
pointer-events: none;
background: linear-gradient(
to bottom,
transparent 0%,
transparent 74%,
rgba(13,27,42,.3) 90%,
var(--bg) 100%
);
} }
.wrap { /* ===== 黑客帝国数据流背景 ===== */
position: relative; #matrix { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: .38; }
z-index: 2;
max-width: 960px;
margin: 0 auto;
padding: 40px 24px 48px;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* ===== 顶部:标题 + 时钟 + 天气 ===== */ .stage { position: relative; z-index: 1; padding: 34px 18px 40px; display: flex; justify-content: center; }
header {
text-align: center; /* ===== 终端窗口 ===== */
margin-bottom: 34px; .window {
} width: 100%; max-width: 960px;
header h1 { background: linear-gradient(180deg, rgba(10,26,17,.96), rgba(6,15,10,.97));
font-size: 2.4rem;
font-weight: 700;
letter-spacing: -0.02em;
text-shadow: 0 2px 24px rgba(125,211,252,.25);
}
header p.sub {
color: var(--muted);
margin-top: 6px;
font-size: .95rem;
}
.hero-row {
display: flex;
justify-content: center;
gap: 28px;
margin-top: 26px;
flex-wrap: wrap;
}
.hero-box {
background: var(--card);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 16px;
padding: 14px 22px;
min-width: 130px;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow);
}
.hero-box .label {
font-size: .72rem;
color: var(--muted);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: 6px;
}
.hero-box .value {
font-size: 1.7rem;
font-weight: 650;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.hero-box#clock .value { font-size: 1.9rem; }
.hero-box#weather .value { font-size: 1.25rem; display: flex; align-items: center; gap: 8px; }
.hero-box#weather .value .emoji { font-size: 1.5rem; }
/* ===== Bing 搜索框 ===== */
.search {
display: flex;
align-items: center;
gap: 10px;
max-width: 520px;
margin: 26px auto 0;
padding: 6px 6px 6px 18px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 999px;
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow);
transition: border-color .16s ease;
}
.search:focus-within { border-color: var(--accent); }
.search .sicon { font-size: 1rem; opacity: .75; }
.search input {
flex: 1;
min-width: 0;
background: none;
border: none;
outline: none;
color: var(--text);
font-size: .95rem;
padding: 8px 0;
}
.search input::placeholder { color: var(--muted); }
.search button {
border: none;
cursor: pointer;
padding: 9px 22px;
border-radius: 999px;
font-size: .9rem;
font-weight: 600;
color: #06202e;
background: var(--accent);
flex-shrink: 0;
}
/* ===== 链接网格(多列) ===== */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-top: 8px;
}
.col h2 {
font-size: .8rem;
font-weight: 600;
color: var(--muted);
letter-spacing: .1em;
margin: 0 0 12px 4px;
display: flex;
align-items: center;
gap: 8px;
}
ul.links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
ul.links a {
display: flex;
align-items: center;
gap: 12px;
padding: 13px 15px;
background: var(--card);
border: 1px solid var(--border);
border-radius: 12px;
text-decoration: none;
color: var(--text);
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
box-shadow: var(--shadow);
transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
ul.links a:hover {
transform: translateY(-3px);
background: var(--card-hover);
border-color: var(--accent);
}
.icon {
font-size: 1.3rem;
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--accent) 16%, transparent);
border-radius: 10px; border-radius: 10px;
flex-shrink: 0; 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;
} }
.meta { display: flex; flex-direction: column; min-width: 0; } .titlebar {
.meta .name { font-weight: 600; font-size: .95rem; } display: flex; align-items: center; gap: 8px;
.meta .desc { color: var(--muted); font-size: .78rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 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; }
footer { .inner { padding: 26px 26px 30px; }
margin-top: auto;
text-align: center; /* ===== 开机日志 ===== */
color: var(--muted); #bootlog { font-size: .78rem; line-height: 1.75; color: var(--accent-dim); margin-bottom: 4px; min-height: 3em; }
font-size: .8rem; #bootlog .bootline::before { content: " "; }
padding-top: 40px;
/* ===== 头部 ===== */
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: 820px) { @media (max-width: 760px) {
.grid { grid-template-columns: repeat(2, 1fr); } .grid { grid-template-columns: 1fr; }
.inner { padding: 20px 18px 24px; }
} }
@media (max-width: 560px) { @media (max-width: 560px) {
.grid { grid-template-columns: 1fr; } .info-row { grid-template-columns: 1fr 1fr; }
header h1 { font-size: 2rem; } .card#clock { grid-column: span 2; }
.hero-box .value { font-size: 1.4rem; } ul.links .desc { max-width: 46%; }
.hero-box#clock .value { font-size: 1.6rem; } }
@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> </style>
<noscript><style>.reveal{opacity:1!important;transform:none!important}#bootlog{display:none}</style></noscript>
</head> </head>
<body> <body class="crt">
<canvas id="aurora"></canvas> <canvas id="matrix" aria-hidden="true"></canvas>
<div class="aurora-overlay"></div> <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>
<main class="wrap"> <div class="inner">
<header> <div id="bootlog" aria-hidden="true"></div>
<h1>hyonglin.top</h1>
<p class="sub">个人服务导航 · 随时可达</p> <header class="reveal" style="--rd:.02s">
<div class="hero-row"> <div class="prompt-line"><b>guest@hyonglin.top</b>:~$ whoami</div>
<div class="hero-box" id="weather"> <h1>hyonglin.top<span class="cursor"></span></h1>
<div class="label">天气</div> <p class="sub">个人服务导航 · 随时可达</p>
<div class="value"><span class="emoji">☀️</span><span class="wtxt">获取中…</span></div> </header>
<div class="wcity" style="font-size:.72rem;color:var(--muted);margin-top:4px"></div>
<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> </div>
<div class="hero-box" id="date">
<div class="label">日期</div> <form class="search reveal" style="--rd:.11s" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
<div class="value" id="dateval">----</div> <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> </div>
<div class="hero-box" id="clock">
<div class="label">时间</div>
<div class="value" id="clockval">--:--:--</div>
</div>
</div>
<form class="search" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
<span class="sicon">🔍</span>
<input type="text" name="q" placeholder="Bing 搜索…" autocomplete="off">
<button type="submit">搜索</button>
</form>
</header>
<div class="grid"> <footer class="reveal" style="--rd:.28s">
<div class="col"> <span class="code">$ exit 0</span>
<h2>📡 自建服务</h2> <span>— end of transmission —</span>
<ul class="links"> <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>
<li> <span class="brand">hyonglin.top</span>
<a href="https://note.hyonglin.top"> </footer>
<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>
</div> </div>
</main>
<div class="col"> </div>
<h2>🤖 AI 助手</h2>
<ul class="links">
<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>
</div>
<div class="col">
<h2>☁️ 云服务</h2>
<ul class="links">
<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>
</div>
<div class="col">
<h2>🔧 常用</h2>
<ul class="links">
<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>
</div>
</div>
<footer>hyonglin.top</footer>
</main>
<script> <script>
// 用 try/catch 包裹:老浏览器没 addEventListener 时报这一行也不影响后续 /* ===== 黑客帝国数据流:绿色字符雨,低透明度衬在窗口后面 ===== */
var mql = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)'); (function(){
if (mql && mql.addEventListener) { var cv = document.getElementById('matrix');
mql.addEventListener('change', function(){}); if (!cv || !cv.getContext) return;
} else if (mql && mql.addListener) { if (window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) return;
mql.addListener(function(){}); var ctx = cv.getContext('2d');
} var FONT = 14, W, H, cols, drops = [];
var CHARS = 'アカサタナハマヤラワ0123456789ABCDEF+-*/<>=|';
/* ===== 夜晚星空:闪烁星星 + 流星 + 鼠标视差,无模糊 ===== */ function resize() {
var aurora = document.getElementById('aurora'); W = cv.width = window.innerWidth;
var ctx = aurora.getContext('2d'); H = cv.height = window.innerHeight;
var W, H, stars = [], meteors = []; cols = Math.ceil(W / FONT);
var mouse = { x: -9999, y: -9999, px: -9999, py: -9999 }; drops = [];
var nextMeteor = 2; // 页面打开 2 秒后来第一颗流星 for (var i = 0; i < cols; i++) drops.push(Math.random() * -H / FONT);
function resize() {
W = aurora.width = window.innerWidth;
H = aurora.height = window.innerHeight;
// 星星:锐利小像素点,明暗闪烁,少量亮星带十字芒
stars = [];
var scount = Math.min(240, Math.round(W * H / 8500));
for (var j = 0; j < scount; j++) {
stars.push({
x: Math.random() * W,
y: Math.random() * H * 0.9,
r: 0.6 + Math.random() * 1.3,
phase: Math.random() * Math.PI * 2,
tw: 0.6 + Math.random() * 2.2, // 闪烁速度
depth: 0.3 + Math.random() * 0.7, // 视差深度
cross: Math.random() < 0.08 // 少量亮星画十字芒
});
} }
} window.addEventListener('resize', resize);
resize();
function spawnMeteor(t) { function tick() {
var ang = Math.PI * (0.70 + Math.random() * 0.14); // 斜向左下 ctx.fillStyle = 'rgba(2,6,4,.16)'; // 半透明黑做拖尾淡出
var sp = 9 + Math.random() * 6; ctx.fillRect(0, 0, W, H);
meteors.push({ ctx.font = FONT + 'px monospace';
x: W * (0.3 + Math.random() * 0.7), for (var i = 0; i < cols; i++) {
y: Math.random() * H * 0.3, var y = drops[i] * FONT;
vx: Math.cos(ang) * sp, ctx.fillStyle = Math.random() < .12 ? '#c8ffe3' : 'rgba(61,255,156,.7)';
vy: -Math.sin(ang) * sp, ctx.fillText(CHARS[(Math.random() * CHARS.length) | 0], i * FONT, y);
born: t, if (y > H && Math.random() > .972) drops[i] = -Math.random() * 40;
life: 0.9 + Math.random() * 0.6 else drops[i] += 1;
});
}
function frame() {
var t = Date.now() / 1000;
// --- 夜空底色 ---
ctx.globalCompositeOperation = 'source-over';
var sky = ctx.createLinearGradient(0, 0, 0, H);
sky.addColorStop(0, '#01030a');
sky.addColorStop(0.45, '#050d1d');
sky.addColorStop(1, '#0a1a2e');
ctx.fillStyle = sky;
ctx.fillRect(0, 0, W, H);
// --- 星星:闪烁 + 轻微视差(随鼠标反向漂移),fillRect 边缘锐利 ---
var px = (mouse.x - W / 2) * -0.012;
var py = (mouse.y - H / 2) * -0.012;
for (var j = 0; j < stars.length; j++) {
var s = stars[j];
var a = 0.35 + 0.65 * (0.5 + 0.5 * Math.sin(t * s.tw + s.phase));
var sx = s.x + px * s.depth * 8;
var sy = s.y + py * s.depth * 8;
ctx.fillStyle = 'rgba(255,255,255,' + a.toFixed(3) + ')';
ctx.fillRect(sx, sy, s.r, s.r);
if (s.cross) { // 亮星十字芒:细直线,无模糊
ctx.strokeStyle = 'rgba(255,255,255,' + (a * 0.6).toFixed(3) + ')';
ctx.lineWidth = 1;
var cl = s.r * 3.2;
ctx.beginPath();
ctx.moveTo(sx - cl, sy + s.r / 2); ctx.lineTo(sx + s.r + cl, sy + s.r / 2);
ctx.moveTo(sx + s.r / 2, sy - cl); ctx.lineTo(sx + s.r / 2, sy + s.r + cl);
ctx.stroke();
} }
requestAnimationFrame(tick);
} }
tick();
})();
// --- 流星:每 3~9 秒一颗,锐利线段拖尾 --- /* ===== 开机自举动画(可点击/按键跳过,reduced-motion 直接显示) ===== */
if (t > nextMeteor) { spawnMeteor(t); nextMeteor = t + 3 + Math.random() * 6; } var booted = false;
for (var m = meteors.length - 1; m >= 0; m--) { var bootEl = document.getElementById('bootlog');
var mt = meteors[m]; var BOOT_LINES = [
var age = t - mt.born; '[ ok ] mount /services .......... 12 items',
if (age > mt.life) { meteors.splice(m, 1); continue; } '[ ok ] weather daemon ........... running',
mt.x += mt.vx; '$ whoami → hyonglin.top — 个人服务导航'
mt.y += mt.vy; ];
var fade = 1 - age / mt.life; function markReady() { document.body.classList.add('ready'); }
ctx.strokeStyle = 'rgba(200,240,255,' + (0.9 * fade).toFixed(3) + ')'; if (bootEl && window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches) {
ctx.lineWidth = 1.5; BOOT_LINES.forEach(function(l){ var d = document.createElement('div'); d.className = 'bootline'; d.textContent = l; bootEl.appendChild(d); });
ctx.beginPath(); booted = true; markReady();
ctx.moveTo(mt.x, mt.y); } else if (bootEl) {
ctx.lineTo(mt.x - mt.vx * 14, mt.y - mt.vy * 14); var li = 0, ci = 0, cur = null;
ctx.stroke(); function finishBoot() { if (!booted) { booted = true; markReady(); } }
ctx.fillStyle = 'rgba(255,255,255,' + fade.toFixed(3) + ')'; function typeLine() {
ctx.fillRect(mt.x, mt.y, 2, 2); 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() {
requestAnimationFrame(frame); 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 秒内一定就绪
} }
window.addEventListener('resize', resize); /* ===== 搜索引擎选择 ===== */
window.addEventListener('mousemove', function(e) { mouse.x = e.clientX; mouse.y = e.clientY; }); (function(){
resize(); var sel = document.getElementById('engine');
frame(); 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 = ['日','一','二','三','四','五','六']; var week = ['日','一','二','三','四','五','六'];
@@ -526,7 +411,7 @@
updateClock(); updateClock();
/* ===== 天气:GPS 定位 + Open-Meteo(不依赖 IP) ===== */ /* ===== 天气:GPS 定位 + Open-Meteo(不依赖 IP) ===== */
var emojiBox = function(){ var e = document.querySelector('#weather .emoji'); return e; }; var emojiBox = function(){ return document.querySelector('#weather .emoji'); };
var tempBox = function(){ return document.querySelector('#weather .wtxt'); }; var tempBox = function(){ return document.querySelector('#weather .wtxt'); };
var cityBox = function(){ return document.querySelector('.wcity'); }; var cityBox = function(){ return document.querySelector('.wcity'); };
@@ -573,4 +458,4 @@
} }
</script> </script>
</body> </body>
</html> </html>
+321
View File
@@ -0,0 +1,321 @@
<!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' fill='%23111111'/%3E%3Crect x='18' y='18' width='28' height='28' fill='%23ff3b30'/%3E%3C/svg%3E">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="light dark">
<title>hyonglin.top</title>
<style>
/* ===== Swiss / Editorial:浅色为主,深色自适应 ===== */
:root {
--bg: #f4f4f2;
--text: #111111;
--muted: #6b6b70;
--line: rgba(17,17,17,.22);
--accent: #ff3b30;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #0f0f10;
--text: #f4f4f2;
--muted: #8a8a8e;
--line: rgba(255,255,255,.2);
--accent: #ff453a;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
background: var(--bg);
color: var(--text);
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }
.page { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px) 0; }
/* ===== 入场:克制的淡入上移 ===== */
.reveal { animation: fadeup .7s ease both; animation-delay: var(--d, 0s); }
@keyframes fadeup { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
/* ===== 报头 ===== */
.masthead { padding-top: 40px; }
.meta-row { display: flex; justify-content: space-between; gap: 16px; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 14px; }
.meta-row .sq { display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-right: 10px; vertical-align: middle; }
h1 { font-size: clamp(3rem, 9vw, 7.5rem); font-weight: 200; letter-spacing: -.03em; line-height: .98; margin-top: clamp(24px, 4vh, 48px); }
p.sub { margin-top: 14px; font-size: .8rem; letter-spacing: .35em; color: var(--muted); text-transform: uppercase; }
/* ===== 数据栏:天气 / 日期 / 时间(杂志数据页) ===== */
.data { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: clamp(28px, 5vh, 56px); }
.cell { padding: 26px 0 30px; min-width: 0; }
.cell + .cell { border-left: 1px solid var(--line); padding-left: clamp(18px, 3vw, 40px); }
.label { display: flex; align-items: center; gap: 9px; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.label::before { content: ""; width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; }
.big { font-size: clamp(2rem, 5vw, 3.6rem); font-weight: 250; font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.05; display: flex; align-items: baseline; gap: .28em; white-space: nowrap; }
.sky .emoji { font-size: .62em; transform: translateY(-.04em); }
.wcity { margin-top: 10px; font-size: .78rem; color: var(--muted); letter-spacing: .06em; min-height: 1.2em; }
/* ===== 搜索行 ===== */
form.search { display: flex; align-items: center; gap: clamp(12px, 2vw, 24px); padding: 18px 0; border-top: 1px solid var(--line); margin-top: -1px; }
.slabel { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); flex-shrink: 0; }
form.search select {
cursor: pointer; flex-shrink: 0;
font-family: inherit; font-size: .85rem; color: var(--text);
background: transparent; border: 1px solid var(--line); border-radius: 0;
padding: 9px 12px; outline: none; max-width: 130px;
}
form.search select:focus-visible { border-color: var(--accent); }
form.search input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-family: inherit; font-size: 1rem; padding: 8px 0; caret-color: var(--accent); }
form.search input::placeholder { color: var(--muted); }
form.search button {
border: 1px solid var(--line); background: transparent; cursor: pointer; flex-shrink: 0;
width: 44px; height: 38px; font-size: 1.05rem; color: var(--text);
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
form.search button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ===== 分组:编号索引式列表 ===== */
.group { border-top: 1px solid var(--line); margin-top: -1px; }
.ghead { display: grid; grid-template-columns: clamp(64px, 8vw, 96px) 1fr auto; align-items: baseline; gap: 18px; padding: 20px 0 6px; }
.ghead .num { font-size: clamp(1.5rem, 2.6vw, 2.1rem); font-weight: 300; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ghead h2 { font-size: .82rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ghead h2 .en { font-family: var(--mono); font-size: .68rem; font-weight: 400; letter-spacing: .18em; color: var(--muted); text-transform: uppercase; }
.ghead .count { font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: .12em; }
ul.rows { list-style: none; }
ul.rows li + li a, ul.rows li:first-child a { border-top: 1px solid var(--line); }
ul.rows a {
display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
padding: 15px 0; text-decoration: none; color: var(--text);
transition: color .15s ease;
}
ul.rows .name { font-size: clamp(1rem, 1.6vw, 1.18rem); font-weight: 450; letter-spacing: .01em; }
ul.rows .arrow { opacity: 0; transform: translateX(-6px); color: var(--accent); transition: opacity .15s ease, transform .15s ease; }
ul.rows a:hover .name, ul.rows a:focus-visible .name { color: var(--accent); }
ul.rows a:hover .arrow, ul.rows a:focus-visible .arrow { opacity: 1; transform: none; }
ul.rows .dom { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--muted); letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56%; }
a:focus-visible, button:focus-visible, select:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
/* ===== 页脚:版本切换行 ===== */
.foot { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: clamp(36px, 7vh, 72px); padding: 22px 0 40px; }
.fbrand { font-size: .9rem; font-weight: 600; letter-spacing: .04em; }
nav.versions { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .78rem; color: var(--muted); }
nav.versions .sep { opacity: .6; }
nav.versions a { color: var(--muted); text-decoration: none; transition: color .15s ease; }
nav.versions a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
nav.versions .path { font-family: var(--mono); font-size: .72rem; margin-left: 3px; }
nav.versions .current { color: var(--text); }
nav.versions .current::after { content: "(当前)"; color: var(--accent); font-size: .72rem; margin-left: 4px; }
/* ===== 响应式:窄屏分区堆叠 ===== */
@media (max-width: 720px) {
.data { grid-template-columns: 1fr; }
.cell + .cell { border-left: none; padding-left: 0; border-top: 1px solid var(--line); }
.ghead { grid-template-columns: auto 1fr; }
.ghead .count { display: none; }
ul.rows a { gap: 8px; }
ul.rows .dom { margin-left: 0; max-width: 100%; width: 100%; order: 3; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
.reveal { animation: none; }
ul.rows a, ul.rows .arrow, form.search button, nav.versions a { transition: none; }
}
</style>
</head>
<body>
<main class="page">
<!-- 报头 -->
<header class="masthead reveal" style="--d:.02s">
<div class="meta-row">
<span><span class="sq"></span>HYONGLIN.TOP — INDEX</span>
<span>NAVIGATION / 导航索引</span>
</div>
<h1>hyonglin.top</h1>
<p class="sub">个人服务导航 · 随时可达</p>
</header>
<!-- 数据栏:天气 / 日期 / 时间 -->
<section class="data reveal" style="--d:.1s" aria-label="天气与时间">
<div class="cell sky">
<span class="label">天气 Weather</span>
<span class="big"><span class="emoji">☀️</span><span class="wtxt">获取中…</span></span>
<span class="wcity"></span>
</div>
<div class="cell">
<span class="label">日期 Date</span>
<span class="big" id="dateval">----</span>
</div>
<div class="cell">
<span class="label">时间 Time</span>
<span class="big" id="clockval">--:--:--</span>
</div>
</section>
<!-- 搜索 -->
<form class="search reveal" style="--d:.18s" action="https://www.bing.com/search" method="get" target="_blank" rel="noopener">
<span class="slabel">Search</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" aria-label="搜索">→</button>
</form>
<!-- 01 自建服务 -->
<section class="group reveal" style="--d:.26s">
<header class="ghead">
<span class="num">01</span>
<h2>自建服务<span class="en">Self-Hosted</span></h2>
<span class="count">4 ITEMS</span>
</header>
<ul class="rows">
<li><a href="https://note.hyonglin.top"><span class="name">笔记</span><span class="arrow">→</span><span class="dom">note.hyonglin.top · SilverBullet</span></a></li>
<li><a href="https://git.hyonglin.top"><span class="name">Git 服务</span><span class="arrow">→</span><span class="dom">git.hyonglin.top · Gitea</span></a></li>
<li><a href="https://ssh.hyonglin.top"><span class="name">网页 SSH 终端</span><span class="arrow">→</span><span class="dom">ssh.hyonglin.top</span></a></li>
<li><a href="https://frp.hyonglin.top"><span class="name">frp 管理面板</span><span class="arrow">→</span><span class="dom">frp.hyonglin.top</span></a></li>
</ul>
</section>
<!-- 02 AI 助手 -->
<section class="group reveal" style="--d:.34s">
<header class="ghead">
<span class="num">02</span>
<h2>AI 助手<span class="en">AI Assistants</span></h2>
<span class="count">2 ITEMS</span>
</header>
<ul class="rows">
<li><a href="https://chat.deepseek.com/" target="_blank" rel="noopener"><span class="name">DeepSeek</span><span class="arrow">→</span><span class="dom">chat.deepseek.com</span></a></li>
<li><a href="https://www.doubao.com/chat/" target="_blank" rel="noopener"><span class="name">豆包</span><span class="arrow">→</span><span class="dom">doubao.com</span></a></li>
</ul>
</section>
<!-- 03 云服务 -->
<section class="group reveal" style="--d:.42s">
<header class="ghead">
<span class="num">03</span>
<h2>云服务<span class="en">Cloud Services</span></h2>
<span class="count">3 ITEMS</span>
</header>
<ul class="rows">
<li><a href="https://dash.cloudflare.com/" target="_blank" rel="noopener"><span class="name">Cloudflare</span><span class="arrow">→</span><span class="dom">dash.cloudflare.com</span></a></li>
<li><a href="https://auth.huaweicloud.com/" target="_blank" rel="noopener"><span class="name">华为云</span><span class="arrow">→</span><span class="dom">auth.huaweicloud.com</span></a></li>
<li><a href="https://console.cloud.tencent.com/" target="_blank" rel="noopener"><span class="name">腾讯云</span><span class="arrow">→</span><span class="dom">console.cloud.tencent.com</span></a></li>
</ul>
</section>
<!-- 04 常用 -->
<section class="group reveal" style="--d:.5s">
<header class="ghead">
<span class="num">04</span>
<h2>常用<span class="en">Utilities</span></h2>
<span class="count">3 ITEMS</span>
</header>
<ul class="rows">
<li><a href="https://wx.mail.qq.com/" target="_blank" rel="noopener"><span class="name">QQ 邮箱</span><span class="arrow">→</span><span class="dom">wx.mail.qq.com</span></a></li>
<li><a href="https://www.bing.com/" target="_blank" rel="noopener"><span class="name">Bing 搜索</span><span class="arrow">→</span><span class="dom">bing.com</span></a></li>
<li><a href="https://www.bilibili.com/" target="_blank" rel="noopener"><span class="name">哔哩哔哩</span><span class="arrow">→</span><span class="dom">bilibili.com</span></a></li>
</ul>
</section>
<!-- 页脚:版本切换 -->
<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="/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>
</nav>
</footer>
</main>
<script>
/* ===== 搜索引擎选择 ===== */
(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 +
'&current_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>