404.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
<link rel="apple-touch-icon" href="./apple-touch-icon.svg">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>404 · 所寻之处，一切皆空</title>
<style>
  :root{
    --bg:#0E1214; --raised:#191F23; --line:#232C31;
    --ink:#E7E9E6; --dim:#7E8A90; --faint:#7d8a93;
    --accent:#D97757; --lime:#E1FCAD;
    --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
    --ease-out:cubic-bezier(.2,.7,.2,1);
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    background:var(--bg); color:var(--ink);
    font-family:"Inter","Segoe UI",-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100dvh;
    display:grid;
    grid-template-rows:auto 1fr auto;
    overflow-x:hidden;
  }

  /* 背景层 */
  .bg{
    position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(900px 520px at 88% -6%, #1C262B 0%, transparent 62%),
      radial-gradient(700px 480px at -4% 108%, #161E22 0%, transparent 58%),
      linear-gradient(180deg,#0F1316 0%,#0C1012 100%);
  }
  .bg::after{
    content:''; position:absolute; inset:0; opacity:.03;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  }
  .rail{
    position:fixed; top:0; left:0; width:1px; height:100%; z-index:0;
    background:linear-gradient(180deg,
      transparent 0%,
      rgba(215,119,87,.6) 14%,
      rgba(215,119,87,.18) 55%,
      transparent 100%);
    pointer-events:none;
  }

  /* 顶栏 */
  header{
    padding:clamp(20px,3vh,32px) clamp(20px,5vw,56px);
    display:flex; align-items:center; justify-content:space-between;
    gap:16px;
  }
  .brand{
    display:inline-flex; align-items:center; gap:10px;
    font-family:var(--mono); font-size:12px; letter-spacing:.06em;
    color:var(--faint);
    text-decoration:none;
    transition:color 140ms var(--ease-out);
  }
  .brand:hover{color:var(--ink)}
  .brand-mark{
    width:26px; height:26px; display:grid; place-items:center;
    border-radius:5px;
    background:rgba(215,119,87,.10);
    border:1px solid rgba(215,119,87,.24);
    color:var(--accent);
  }
  .brand-mark svg{width:14px;height:14px}

  .status{
    font-family:var(--mono); font-size:11px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--faint);
    display:inline-flex; align-items:center; gap:9px;
    padding:6px 11px;
    border:1px solid var(--line); border-radius:4px;
    background:rgba(255,255,255,.012);
  }
  .status .dot{
    width:5px;height:5px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 3px rgba(215,119,87,.15);
  }

  /* 主内容 */
  main{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(240px,.7fr);
    gap:clamp(32px,5vw,72px);
    align-items:center;
    padding:clamp(32px,5vh,64px) clamp(20px,5vw,56px);
    max-width:1160px; width:100%; margin:0 auto;
  }
  @media (max-width:820px){
    main{grid-template-columns:1fr; gap:40px; align-items:start}
  }

  .big{
    font-family:var(--mono);
    font-size:clamp(96px,18vw,180px);
    font-weight:600;
    line-height:.86;
    letter-spacing:-.06em;
    color:var(--ink);
    font-variant-numeric:tabular-nums;
    margin:0 0 24px;
    position:relative;
  }
  .big::after{
    content:'';
    display:block;
    width:64px; height:2px;
    margin-top:22px;
    background:var(--accent);
  }
  .big .slash{
    color:var(--accent);
    font-weight:400;
  }

  h1{
    font-size:clamp(22px,3vw,30px);
    font-weight:640; letter-spacing:-.015em;
    line-height:1.3;
    margin:0 0 18px;
    max-width:22ch;
  }

  .lede{
    font-size:clamp(14px,1.6vw,15.5px);
    line-height:1.78;
    color:var(--dim);
    max-width:46ch;
    margin:0 0 36px;
  }
  .lede code{
    font-family:var(--mono); font-size:.88em;
    color:#9AA5AB;
    background:rgba(255,255,255,.045);
    padding:2px 6px; border-radius:3px;
  }

  .actions{
    display:flex; flex-wrap:wrap; gap:10px;
  }
  .btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 18px;
    border-radius:6px;
    text-decoration:none;
    font-size:13.5px; font-family:inherit;
    font-weight:500;
    border:1px solid var(--line);
    color:var(--ink);
    background:var(--raised);
    transition:border-color 140ms var(--ease-out),
               background 140ms var(--ease-out),
               transform 140ms var(--ease-out),
               color 140ms var(--ease-out);
  }
  .btn svg{width:14px;height:14px;flex:none}
  .btn:hover{border-color:#3A464E;background:#1C2328}
  .btn:active{transform:translateY(1px) scale(.985)}
  .btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

  /* 主按钮：椭圆，Claude 橙——只出现一次 */
  .btn.primary{
    background:var(--accent);
    color:#1A1008;
    border-color:var(--accent);
    border-radius:999px;
    padding:11px 22px;
    font-weight:560;
  }
  .btn.primary:hover{
    background:#E28A6C;
    border-color:#E28A6C;
  }

  /* 右侧装饰：断了的那条曲线 */
  .aside{
    display:flex; flex-direction:column;
    align-items:flex-end; gap:20px;
  }
  @media (max-width:820px){
    .aside{align-items:flex-start}
  }

  .curve{
    width:100%; max-width:340px;
    aspect-ratio:340/200;
    color:var(--accent);
    opacity:.7;
  }
  .curve path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-dasharray:4 6;
  }
  .curve .solid{
    stroke:var(--ink);
    stroke-dasharray:none;
    opacity:.5;
  }
  .curve .broken{
    stroke:var(--accent);
    stroke-dasharray:4 6;
    opacity:.9;
  }
  .curve .dot{
    fill:var(--accent);
  }

  .aside-cap{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--faint);
    line-height:1.7;
    max-width:34ch;
    text-align:right;
  }
  .aside-cap b{color:#8B959B;font-weight:500}
  @media (max-width:820px){
    .aside-cap{text-align:left}
  }

  /* 底部 */
  footer{
    padding:clamp(20px,3vh,32px) clamp(20px,5vw,56px);
    border-top:1px solid var(--line);
    display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between;
    font-family:var(--mono); font-size:11.5px; color:#414B51;
    max-width:1160px; width:100%; margin:0 auto;
  }
  footer span{line-height:1.7}
  footer .right{color:#333C42}

  /* 进入动效 */
  @keyframes rise-in{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
  }
  @media (prefers-reduced-motion:no-preference){
    .reveal{
      opacity:0;
      animation:rise-in 520ms var(--ease-out) forwards;
      animation-delay:calc(var(--i,0) * 80ms);
    }
    .curve .broken{
      stroke-dashoffset:60;
      animation:draw 900ms 320ms var(--ease-out) forwards;
    }
    @keyframes draw{
      to{stroke-dashoffset:0}
    }
  }
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{
      animation-duration:.01ms !important;
      animation-iteration-count:1 !important;
      transition-duration:.01ms !important;
    }
    .reveal{opacity:1}
  }

  /* ============================================================
     响应式：桌面 / 平板 / 手机
     ============================================================
     断点（与全站一致，只写在下面这一段里；上面 820 那三档是既有的，一条没删）：
       桌面       ≥ 1024px  —— 下面一律不碰，视觉与交互和改造前逐像素一致
       平板   768 – 1023px  —— 紧凑版
       手机        ≤ 767px  —— 重点适配
       手机窄屏    ≤ 400px  —— 小屏微调

     为什么这么写：
       ① 全部用 max-width 覆盖，桌面端一条规则都不命中。
       ② 颜色一律走上面的 token，新规则里一个写死的色值都没有。
       ③ 本页 body 是三行 grid（顶栏 / 正文 / 页脚）+ min-height:100dvh，
          版面结构小屏上本来就成立，要收的只是「行内留白」和字号。
       ④ 既有的 820 那三档只管布局（正文从两列变一列），768–820 这段字号还是桌面值，
          在手机上偏小；下面这一档把正文顶到 ≥16px，并把留白按屏宽收一收。
       ⑤ 触摸目标 ≥48px：顶部品牌链接和两个按钮都给到 48px 高。
       ⑥ 触屏没有 hover，`btn` 的悬停底色在 ≤767 撤掉，另补 `:active`。
       ⑦ `env(safe-area-inset-*)` 在没有刘海 / 没有 home 指示条的设备上等于 0，
          所以这些补白在老设备上不会凭空多出来。
       ============================================================ */

  @media (max-width:1023px){
    /* 平板 / 手机横屏（横屏 iPhone 宽 844px，落的正是这一档）：让开刘海与 home 指示条 */
    header, main, footer{
      padding-left:max(clamp(20px,5vw,56px), env(safe-area-inset-left));
      padding-right:max(clamp(20px,5vw,56px), env(safe-area-inset-right));
    }
    header{ padding-top:max(clamp(20px,3vh,32px), env(safe-area-inset-top)); }
    footer{ padding-bottom:max(clamp(20px,3vh,32px), env(safe-area-inset-bottom)); }
    /* 触摸目标 ≥48 × 48 */
    .brand, .btn{ min-height:48px; }
    img, video, canvas, iframe{ max-width:100%; height:auto; }
    /* 兜底：算漏了也不会整页横滚。clip 不产生滚动容器，不会毁掉任何 sticky；
       老浏览器不认这个值 → 保持原样，不制造新的回归 */
    html{ overflow-x:clip; }
  }

  @media (max-width:767px){
    /* ---------- 顶栏 ---------- */
    header{ gap:12px; }

    /* ---------- 正文 ---------- */
    main{
      gap:28px;
      padding-top:max(24px, env(safe-area-inset-top));
      padding-bottom:32px;
    }
    .big{ font-size:clamp(76px,24vw,120px); margin-bottom:18px; }
    .big::after{ margin-top:16px; }
    h1{ font-size:clamp(22px,6.4vw,26px); margin-bottom:14px; }
    .lede{ font-size:16px; margin-bottom:26px; }   /* 正文 ≥16px */
    .actions{ gap:10px; }
    .btn{ min-height:48px; padding:12px 20px; font-size:15px; }
    .btn:hover{ border-color:var(--line); background:var(--raised); }         /* 触屏没有 hover */
    .btn:active{ transform:translateY(1px) scale(.99); border-color:var(--accent); }
    .btn.primary:hover{ background:var(--accent); border-color:var(--accent); }

    /* ---------- 右侧那条断了的曲线 ---------- */
    .aside{ gap:14px; }
    .curve{ max-width:280px; }
    .aside-cap{ font-size:12.5px; }

    /* ---------- 页脚 ---------- */
    footer{ gap:8px; font-size:12px; }
  }

  @media (max-width:400px){
    /* 极窄屏：只收留白与「非正文」的元信息，正文仍然守住 16px */
    main{
      padding-top:20px;
      padding-bottom:26px;
      gap:22px;
    }
    .big{ font-size:clamp(64px,26vw,88px); margin-bottom:14px; }
    .big::after{ width:48px; margin-top:13px; }
    h1{ font-size:21px; }
    .lede{ margin-bottom:22px; }
    .actions{ flex-direction:column; }
    .btn{ width:100%; justify-content:center; }
    .curve{ max-width:230px; }
    .aside-cap{ font-size:12px; }
    footer{ font-size:11.5px; }
  }
</style>
</head>
<body>

<div class="bg"></div>
<div class="rail"></div>

<header>
  <a class="brand" href="/">
    <span class="brand-mark" aria-hidden="true">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
           stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
        <path d="M3 17c2.6 0 3.4-10 6.6-10S13 15 16 15s2.4-4 5-4"/>
      </svg>
    </span>
    www.jinsuper.cn
  </a>
  <span class="status"><span class="dot"></span> HTTP 404</span>
</header>

<main>
  <div class="reveal" style="--i:0">
    <div class="big">4<span class="slash"> / </span>4</div>
    <h1>这条路径上没有东西。</h1>
    <p class="lede">
      可能是链接过期了，可能是文件名敲错了一个字母，也可能是我们手滑把它删了。
      反正现在它不在这儿——<code>404</code> 就是这样，说了等于没说。
    </p>
    <div class="actions">
      <a class="btn primary" href="/">
        回首页
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
             stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M5 12h13"/><path d="m13 6 6 6-6 6"/>
        </svg>
      </a>
      <a class="btn" href="/Skills/">
        看看工具箱
      </a>
    </div>
  </div>

  <aside class="aside reveal" style="--i:1">
    <svg class="curve" viewBox="0 0 340 200" aria-hidden="true">
      <!-- 坐标轴：很淡 -->
      <line class="solid" x1="14" y1="150" x2="326" y2="150"/>
      <line class="solid" x1="14" y1="20" x2="14" y2="180"/>
      <!-- 左边一段正弦，正常 -->
      <path class="solid"
            d="M14 150 C 40 150, 50 70, 76 70 S 112 150, 138 150"/>
      <!-- 右边断了 -->
      <path class="broken"
            d="M160 150 C 186 150, 196 76, 222 76"/>
      <!-- 断开后一小段 -->
      <path class="broken"
            d="M238 100 C 256 130, 274 150, 300 150"/>
      <!-- 断点 -->
      <circle class="dot" cx="222" cy="76" r="3"/>
      <circle class="dot" cx="238" cy="100" r="3"/>
    </svg>
    <p class="aside-cap">
      <b>图注：</b>这条曲线在 x≈222 的地方断了。<br>
      你要找的页面，大概也停在那儿。
    </p>
  </aside>
</main>

<footer>
  <span>Retinbox · 静态托管</span>
  <span class="right">还在的话，首页大概还在——试试上面那个按钮。</span>
</footer>

<script>
/* ═══════════════════════════════════════════════════
   路径修正
   ---------------------------------------------------
   静态托管下，目录后面漏写尾斜杠就会 404：
     /Skills   ✗      /Skills/   ✓
   线上平台对 /Skills 会做 301，但换个环境（或换个写法）就未必。
   这里做一层兜底：命中已知目录就补上斜杠跳过去，别让用户卡在 404。
   ═══════════════════════════════════════════════════ */
(function(){
  'use strict';

  /* 已知目录（小写 → 规范形式） */
  var DIRS = {
    '/skills': '/Skills/',
    '/p': '/p/',
    '/docs': '/docs/',
    '/web': '/web/',
    '/old': '/old/',
    '/asset': '/asset/',
    '/public': '/public/'
  };

  var raw = location.pathname || '';
  if (raw === '/' || raw === '') return;

  /* ── 专区目录改名：811 → class（2026-10）─────────────────────────
     站内引用 / sitemap / 站点索引都换成 /class/ 了，站外的老链接还会落到这儿。
     前缀能对上就直接换掉跳过去；认不出（比如 /811x）就当普通 404 照常显示。 */
  var legacy = raw.match(/^\/811(\/.*)?$/i);
  if (legacy){
    location.replace('/class' + (legacy[1] || '/') + (location.search || '') + (location.hash || ''));
    return;
  }

  var key = (raw.replace(/\/+$/, '') || '/').toLowerCase();
  var target = DIRS[key];

  /* 已经有尾斜杠的不再处理，避免自己跳自己 */
  if (target && !raw.endsWith('/')){
    location.replace(target + (location.search || '') + (location.hash || ''));
  }
})();
</script>

</body>
</html>