index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fdfdfc">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#101010">
<title>HA7CH AI Native School</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
<meta name="description" content="加载即入学。把 HA7CH School 装进你的 Agent，跟着学 AI Native 与 FDE。">
<style>
  :root {
    color-scheme: light dark;
    --bg: #fdfdfc;
    --fg: #111;
    --body: #282828;
    --muted: rgba(0, 0, 0, .42);
    --rule: #ececeb;
    --focus: rgba(0, 122, 255, .5);
    --selection: #ededed;
    --fade-rgb: 255, 255, 255;
    --logo-filter: brightness(0);
    --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #101010;
      --fg: #f4f3f0;
      --body: rgba(255, 255, 255, .68);
      --muted: rgba(255, 255, 255, .46);
      --rule: #232320;
      --focus: rgba(76, 157, 255, .55);
      --selection: #2e2e2a;
      --fade-rgb: 16, 16, 16;
      --logo-filter: brightness(0) invert(1);
    }
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { min-height: 100%; background: var(--bg); color: var(--fg); scroll-behavior: smooth; }
  body {
    min-height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font);
    font-size: 16px;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body::before {
    position: fixed;
    inset: 0 0 auto;
    z-index: 2;
    height: 6rem;
    pointer-events: none;
    content: "";
    background: linear-gradient(180deg, rgb(var(--fade-rgb)) 0%, rgba(var(--fade-rgb), .78) 26%, rgba(var(--fade-rgb), 0) 100%);
  }
  ::selection { background: var(--selection); }
  a { color: inherit; text-decoration: none; }
  button { font: inherit; }

  .page {
    width: 100%;
    max-width: 36.375rem;
    padding: 4.75rem 1rem 3rem;
    margin: 0 auto;
  }

  .topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 3.5rem;
  }
  .identity { display: flex; align-items: flex-end; gap: .6rem; }
  .brand-logo {
    display: block;
    width: 9.5rem;
    height: auto;
    filter: var(--logo-filter);
  }
  .byline, .nav-link {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 460;
    line-height: 1.2;
    letter-spacing: -.002em;
    white-space: nowrap;
  }
  .byline a, .nav-link { transition: color .15s ease; }
  .byline a:hover, .nav-link:hover { color: var(--fg); }

  .hero { animation: enter .45s ease both; }
  h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 570;
    line-height: 1.2;
    letter-spacing: -.045em;
  }
  .tagline {
    max-width: 32rem;
    margin: .7rem 0 0;
    color: var(--body);
    font-size: .9375rem;
    font-weight: 440;
    line-height: 1.7;
    letter-spacing: -.008em;
    text-wrap: pretty;
  }

  .enroll {
    margin-top: 2.25rem;
    padding: 1rem 0 1.1rem;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
  }
  .enroll-label {
    display: block;
    margin-bottom: .7rem;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 460;
  }
  .command-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
  }
  .command-row code {
    min-width: 0;
    color: var(--fg);
    font: .8125rem/1.65 var(--mono);
    overflow-wrap: anywhere;
  }
  .copy-button {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: .8125rem;
    line-height: 1.65;
    transition: color .15s ease;
  }
  .copy-button:hover { color: var(--fg); }
  .copy-button:focus-visible, a:focus-visible {
    border-radius: 2px;
    outline: 2px solid var(--focus);
    outline-offset: 3px;
  }
  .enroll-note {
    margin: .65rem 0 0;
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.5;
  }

  .section {
    padding-top: 3rem;
    animation: enter .45s .08s ease both;
  }
  .section-title {
    margin: 0;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--rule);
    color: var(--muted);
    font-size: .875rem;
    font-weight: 460;
    line-height: 1.25rem;
    letter-spacing: -.005em;
  }

  .rows { list-style: none; padding: .5rem 0 0; margin: 0; }
  .row {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    min-height: 3.25rem;
    padding: .85rem 0 .85rem 6.75rem;
    border-bottom: 1px solid var(--rule);
  }
  .row:last-child { border-bottom: 0; }
  .row-label {
    position: absolute;
    left: 0;
    max-width: 5.75rem;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 460;
    line-height: 1.25rem;
  }
  .row-copy { min-width: 0; flex: 1; }
  .row-title {
    display: block;
    color: var(--fg);
    font-size: .875rem;
    font-weight: 540;
    line-height: 1.25rem;
    letter-spacing: -.008em;
  }
  .row-description {
    display: block;
    max-width: 21rem;
    margin-top: .22rem;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 440;
    line-height: 1.35rem;
  }
  .row-meta {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 460;
    line-height: 1.25rem;
    white-space: nowrap;
  }

  .link-row { color: inherit; transition: opacity .14s ease; }
  .link-row .row-title { display: inline-flex; align-items: center; transition: transform .14s ease; }
  .link-row .row-title::after {
    width: .375rem;
    height: .375rem;
    margin-left: .5rem;
    content: "";
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    opacity: .42;
    transform: rotate(45deg);
    transition: transform .14s ease;
  }
  .link-row:hover .row-title { transform: translateX(.0625rem); }
  .link-row:hover .row-title::after { transform: translateX(.2rem) rotate(45deg); }

  footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    color: var(--muted);
    font-size: .75rem;
    line-height: 1.5;
  }

  @keyframes enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (hover: hover) and (min-width: 521px) {
    .rows:has(.link-row:hover) .link-row { opacity: .35; }
    .rows:has(.link-row:hover) .link-row:hover { opacity: 1; }
  }
  @media (max-width: 768px) {
    body::before { display: none; }
    .page { padding: 2rem 1.5rem 2.5rem; }
    .topbar { margin-bottom: 3rem; }
  }
  @media (max-width: 520px) {
    .brand-logo { width: 8.4rem; }
    .byline { display: none; }
    h1 { font-size: 1.8rem; }
    .row { gap: .75rem; padding-left: 4.7rem; }
    .row-label { max-width: 4rem; }
    .row-meta { font-size: .75rem; }
    .command-row { gap: .75rem; }
    footer { flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
</style>
</head>
<body>
<main class="page">
  <header class="topbar">
    <div class="identity">
      <img class="brand-logo" src="/assets/brand/ha7ch-school-logo.png" width="1600" height="600" alt="HA7CH School">
      <span class="byline">by <a href="https://ha7ch.com">HA7CH</a></span>
    </div>
    <a class="nav-link" href="https://github.com/HA7CH/ha7ch-school">GitHub ↗</a>
  </header>

  <section class="hero" aria-labelledby="school-title">
    <h1 id="school-title">加载即入学。</h1>
    <p class="tagline">把 HA7CH School 装进你的 Agent，跟着学 AI Native 与 FDE。</p>

    <div class="enroll">
      <span class="enroll-label">发给 Claude Code 或 Codex</span>
      <div class="command-row">
        <code id="install-command">读 https://school.ha7ch.com/install.md ，帮我把 HA7CH School 装上</code>
        <button class="copy-button" type="button" data-copy-target="install-command" aria-live="polite">复制</button>
      </div>
      <p class="enroll-note">学习进度保存在本机。</p>
    </div>
  </section>

  <section class="section" aria-labelledby="courses-title">
    <h2 class="section-title" id="courses-title">课程</h2>
    <ul class="rows">
      <li class="row">
        <span class="row-label">Course 01</span>
        <span class="row-copy">
          <span class="row-title">AI Native</span>
          <span class="row-description">理解 AI 时代怎么工作，并做出一个 AI Native 产品。</span>
        </span>
        <span class="row-meta">4 节</span>
      </li>
      <li class="row">
        <span class="row-label">Course 02</span>
        <span class="row-copy">
          <span class="row-title">FDE</span>
          <span class="row-description">理解 FDE、判断是否适合，并进入真实企业场景。</span>
        </span>
        <span class="row-meta">4 节</span>
      </li>
      <li class="row">
        <span class="row-label">共修</span>
        <span class="row-copy">
          <span class="row-title">GitHub</span>
          <span class="row-description">完成你的第一个 Issue 和 PR。</span>
        </span>
        <span class="row-meta">必修</span>
      </li>
      <li class="row">
        <span class="row-label">加修</span>
        <span class="row-copy">
          <span class="row-title">与一号位沟通</span>
          <span class="row-description">把技术价值推进成可执行的 POC。</span>
        </span>
        <span class="row-meta">选修</span>
      </li>
    </ul>
  </section>

  <section class="section" aria-labelledby="offline-title">
    <h2 class="section-title" id="offline-title">线下进阶</h2>
    <div class="rows">
      <a class="row link-row" href="https://github.com/HA7CH/anc-fde-camp/blob/main/SKILL.md">
        <span class="row-label">FDE Camp</span>
        <span class="row-copy">
          <span class="row-title">把公开课带进企业现场</span>
          <span class="row-description">下一场 · 北京。把企业判断、AI 构建、客户沟通与现场交付串成一条路。深圳场已于 9 月 13 日结束。</span>
        </span>
        <span class="row-meta">2026.9.26 起</span>
      </a>
    </div>
  </section>

  <section class="section" aria-labelledby="entrances-title">
    <h2 class="section-title" id="entrances-title">其他入口</h2>
    <div class="rows">
      <a class="row link-row" href="/school.md">
        <span class="row-label">免安装</span>
        <span class="row-copy">
          <span class="row-title">直接开课</span>
          <span class="row-description">读 school.md，直接开始。</span>
        </span>
      </a>
      <a class="row link-row" href="https://www.npmjs.com/package/@ha7ch/school">
        <span class="row-label">Terminal</span>
        <span class="row-copy">
          <span class="row-title">npx @ha7ch/school</span>
          <span class="row-description">在终端安装 School。</span>
        </span>
      </a>
      <a class="row link-row" href="/WALL.md">
        <span class="row-label">Wall</span>
        <span class="row-copy">
          <span class="row-title">校友墙</span>
          <span class="row-description">看看已经完成第一个 PR 的同学。</span>
        </span>
      </a>
    </div>
  </section>

  <footer>
    <span>Made by HA7CH</span>
  </footer>
</main>

<script>
  const copyButton = document.querySelector("[data-copy-target]");
  copyButton?.addEventListener("click", async () => {
    const target = document.getElementById(copyButton.dataset.copyTarget);
    if (!target) return;
    try {
      await navigator.clipboard.writeText(target.textContent.trim());
      copyButton.textContent = "已复制";
      window.setTimeout(() => { copyButton.textContent = "复制"; }, 1600);
    } catch {
      copyButton.textContent = "请手动复制";
    }
  });
</script>
</body>
</html>