<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#F6F2EA">
<meta name="color-scheme" content="light">
<title>欢迎来到航海家学院 · Compass 航海家</title>
<meta name="description" content="航海家学院：雅思听说读写，每天一段航程。试航篇微信小游戏现已开放，二十来分钟拿回自己的海图。">
<link rel="icon" type="image/png" href="assets/img/crest.png">
<link rel="preload" href="assets/fonts/compass-song.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/compass-caslon.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/img/academy-dawn.webp" as="image" fetchpriority="high">
<link rel="preload" href="assets/img/academy-day.webp" as="image">
<link rel="preload" href="assets/img/academy-dusk.webp" as="image">
<link rel="stylesheet" href="assets/site.css">
</head>
<body>
<a class="skip-link" href="#work">跳到正文</a>

<!-- 预载器 -->
<div id="boot" aria-hidden="true">
  <img class="boot-mark" src="assets/img/crest.png" alt="" width="78" height="72">
  <p class="boot-word"><span lang="en">Com<em>pass</em></span>航海家学院</p>
  <p class="boot-sub" lang="en">IELTS PREPARATION</p>
  <div class="boot-track"><i id="bootbar"></i></div>
  <p class="mono boot-pct" id="bootpct">开学准备中 0%</p>
</div>

<!-- 顶部导航 -->
<nav id="nav" aria-label="站点导航">
  <a class="brand" href="#top" aria-label="Compass 航海家学院 首页">
    <img src="assets/img/crest.png" alt="" width="52" height="48">
  </a>
  <p class="brand-word"><span class="wl-en" lang="en">Com<em>pass</em></span><span class="wl-zh">航海家学院</span></p>
  <div class="nav-end">
    <a class="nav-link" href="../claim.html">认领报告</a>
    <button class="btn btn--sm" type="button" data-open="modal-play">开始试航 <span class="arw" aria-hidden="true">→</span></button>
  </div>
</nav>

<!-- 左导轨 -->
<div class="rail" aria-hidden="true">
  <span class="dots"><i></i><i></i><i></i><i></i></span>
  <span class="ticks" id="ticks"><i></i><i></i><i></i><i></i></span>
</div>

<!-- 滚动提示 -->
<div id="hint" aria-hidden="true">
  <span class="hint-word">滚动</span>
  <span class="bar"></span>
</div>

<!-- 背景影片层（三关键帧：晨启→日间→暮色，p 驱动淡切） -->
<div id="bg" aria-hidden="true">
  <img class="film" data-k="0" src="assets/img/academy-dawn.webp" alt="" draggable="false">
  <img class="film" data-k="1" src="assets/img/academy-day.webp" alt="" draggable="false">
  <img class="film" data-k="2" src="assets/img/academy-dusk.webp" alt="" draggable="false">
  <!-- hero 常驻自播环境循环（D173）：叠在 k0 晨启静帧上，就绪后淡入；k1/k2 淡切与降级路径仍走静帧组 -->
  <video id="heroLoop" muted loop playsinline webkit-playsinline preload="auto" disablepictureinpicture poster="assets/img/academy-dawn.webp" aria-hidden="true">
    <source src="assets/vid/hero-loop-1080.mp4" type="video/mp4">
  </video>
  <video id="film" playsinline webkit-playsinline muted preload="auto" disablepictureinpicture hidden></video>
  <i class="veil"></i>
</div>

<!-- 滚动轨道 -->
<div id="scroll-track" aria-hidden="true"></div>

<!-- 纸纹颗粒 -->
<div id="grain" aria-hidden="true"></div>

<!-- 像素溶洞画布 -->
<canvas id="hole" aria-hidden="true"></canvas>

<!-- 内容区（溶洞揭开） -->
<section id="work" aria-label="学院日常与入学">
  <div class="work-bg-wrap" aria-hidden="true"><img class="work-bg" id="workImg" alt="" decoding="async" src="assets/img/sea-tall.webp"></div>

  <div class="work-art" id="workArt" aria-hidden="true">
    <div class="art-layer" data-art="0"><img src="assets/img/academy-schedule.webp" alt="" loading="lazy"></div>
    <div class="art-layer" data-art="1">
      <div class="crew-wall" id="crewWall">
        <figure class="on" tabindex="0"><img src="assets/img/crew-radio-operator.webp" alt="广播员立绘" loading="lazy"><figcaption><b>广播员</b><span>听力 <i lang="en">Radio Operator</i></span><em>只出声，不给字。</em></figcaption></figure>
        <figure tabindex="0"><img src="assets/img/crew-chart-keeper.webp" alt="守图人立绘" loading="lazy"><figcaption><b>守图人</b><span>阅读 <i lang="en">Chart Keeper</i></span><em>专找卡住你的词。</em></figcaption></figure>
        <figure tabindex="0"><img src="assets/img/crew-registrar.webp" alt="记录官立绘" loading="lazy"><figcaption><b>记录官</b><span>写作 <i lang="en">Scribe</i></span><em>按四维逐项批。</em></figcaption></figure>
        <figure tabindex="0"><img src="assets/img/crew-harbour-master.webp" alt="港务长立绘" loading="lazy"><figcaption><b>港务长</b><span>口语 <i lang="en">Harbour Master</i></span><em>热身完还有追问。</em></figcaption></figure>
      </div>
    </div>
    <div class="art-layer" data-art="2">
      <img class="stn" data-stn="0" src="assets/img/stn-tower.webp" alt="" loading="lazy">
      <img class="stn" data-stn="1" src="assets/img/stn-chart.webp" alt="" loading="lazy">
      <img class="stn" data-stn="2" src="assets/img/stn-log.webp" alt="" loading="lazy">
      <img class="stn" data-stn="3" src="assets/img/stn-deck.webp" alt="" loading="lazy">
    </div>
    <div class="art-layer" data-art="3">
      <figure class="report-plate">
        <div class="sig-card">
          <p class="sig-head"><b>试航记录</b><span class="mono" lang="en">Trial Record</span></p>
          <ul class="sig-list">
            <li><span>听力</span><i class="dot dot--a" aria-hidden="true"></i><em>已形成信号</em></li>
            <li><span>阅读</span><i class="dot dot--b" aria-hidden="true"></i><em>仍需补充证据</em></li>
            <li><span>写作</span><i class="dot dot--c" aria-hidden="true"></i><em>建议优先观察</em></li>
            <li><span>口语</span><i class="dot dot--a" aria-hidden="true"></i><em>已形成信号</em></li>
          </ul>
          <p class="sig-foot mono" lang="en">Signals, not scores</p>
        </div>
        <span class="wax"><img src="assets/img/wax-seal.png" alt="" width="64" height="64"></span>
      </figure>
    </div>
    <div class="art-layer" data-art="4"><img src="assets/img/admission-gate.webp" alt="" loading="lazy"></div>
    <div class="art-layer" data-art="5"><img src="assets/img/academy-dawn.webp" alt="" loading="lazy"></div>
    <i class="art-veil"></i>
  </div>

  <i class="work-rule work-fade" aria-hidden="true"></i>
  <div class="work-scroll" id="workScroll">
    <div class="work-ticks work-fade" id="workTicks" aria-hidden="true"></div>

    <div class="work-col work-fade" id="workCol">

      <article class="work-item">
        <h3>每天从一张课表开始</h3>
        <figure class="m-art"><img src="assets/img/academy-schedule.webp" alt="学院书桌一角：羊皮纸课表、黄铜罗盘、羽毛笔与一杯热茶。" loading="lazy"></figure>
        <ol class="wsteps">
          <li><i>01</i><div><b>看状态</b><span>今日课表写明：四科各练哪一段。</span></div></li>
          <li><i>02</i><div><b>去练习</b><span>教练按你的水平排好量，点开就练。</span></div></li>
          <li><i>03</i><div><b>留记录</b><span>练过的量，自动记进航海日志。</span></div></li>
          <li><i>04</i><div><b>接明天</b><span>今天收在这，明天从这继续。</span></div></li>
        </ol>
      </article>

      <article class="work-item">
        <h3>四位教练，一人一科</h3>
        <div class="m-art crew-wall-m">
          <figure><img src="assets/img/crew-radio-operator.webp" alt="广播员立绘" loading="lazy"><figcaption><b>广播员</b><span>听力</span></figcaption></figure>
          <figure><img src="assets/img/crew-chart-keeper.webp" alt="守图人立绘" loading="lazy"><figcaption><b>守图人</b><span>阅读</span></figcaption></figure>
          <figure><img src="assets/img/crew-registrar.webp" alt="记录官立绘" loading="lazy"><figcaption><b>记录官</b><span>写作</span></figcaption></figure>
          <figure><img src="assets/img/crew-harbour-master.webp" alt="港务长立绘" loading="lazy"><figcaption><b>港务长</b><span>口语</span></figcaption></figure>
        </div>
        <p class="wnote">一人一科，按你的节奏带。</p>
        <button class="text-action" type="button" data-open="modal-play">先在试航里见见他们 <span aria-hidden="true">→</span></button>
      </article>

      <article class="work-item" id="lines-item">
        <h3>四间教室，各练一科</h3>
        <figure class="m-art"><img src="assets/img/stn-tower.webp" alt="听力观测室内景：无线电设备与窗外海港。" loading="lazy"></figure>
        <ul class="wlist wlines">
          <li data-line="0" class="lit"><b>听力 · 观测室</b><span>只出声，不给字，逼你真的去听</span></li>
          <li data-line="1"><b>阅读 · 档案室</b><span>先找出卡住你的那一档词汇</span></li>
          <li data-line="2"><b>写作 · 制图室</b><span>按四维 rubric 判，说得出哪项弱</span></li>
          <li data-line="3"><b>口语 · 甲板</b><span>热身加追问，和真考一个结构</span></li>
        </ul>
      </article>

      <article class="work-item" id="report-item">
        <h3>二十来分钟，<br>拿回自己的海图</h3>
        <figure class="m-art m-art--card">
          <div class="sig-card">
            <p class="sig-head"><b>试航记录</b><span class="mono" lang="en">Trial Record</span></p>
            <ul class="sig-list">
              <li><span>听力</span><i class="dot dot--a" aria-hidden="true"></i><em>已形成信号</em></li>
              <li><span>阅读</span><i class="dot dot--b" aria-hidden="true"></i><em>仍需补充证据</em></li>
              <li><span>写作</span><i class="dot dot--c" aria-hidden="true"></i><em>建议优先观察</em></li>
              <li><span>口语</span><i class="dot dot--a" aria-hidden="true"></i><em>已形成信号</em></li>
            </ul>
            <p class="sig-foot mono" lang="en">Signals, not scores</p>
          </div>
        </figure>
        <p class="wnote">不写分数，只留四科信号和下一步。</p>
        <button class="text-action" type="button" data-open="modal-play">去拿一份自己的报告 <span aria-hidden="true">→</span></button>
      </article>

      <article class="work-item">
        <h3>选一种方式入学</h3>
        <figure class="m-art"><img src="assets/img/admission-gate.webp" alt="清晨，新生拖着行李箱走向学院拱廊大门。" loading="lazy"></figure>
        <div class="wboard">
          <div class="wrow">
            <div><b>试航篇</b><span>二十来分钟，四站各测一遍</span></div>
            <strong>现已开放</strong>
            <button type="button" data-open="modal-play">开始</button>
          </div>
          <div class="wrow">
            <div><b>远征篇</b><span>四科日常训练主系统</span></div>
            <strong>筹备中</strong>
            <button type="button" data-open="modal-book">预约</button>
          </div>
          <div class="wrow">
            <div><b>试航报告</b><span>测完关注公众号，领完整版</span></div>
            <strong>免费</strong>
            <a href="../claim.html">认领</a>
          </div>
          <div class="wrow">
            <div><b>老师合作</b><span>题库校准，教研合作</span></div>
            <strong>来信聊</strong>
            <a href="mailto:septem@colatech.cn" lang="en">来信</a>
          </div>
        </div>
      </article>

      <article class="work-item wclose">
        <h3>学院的门开着。</h3>
        <figure class="m-art"><img src="assets/img/academy-dawn.webp" alt="清晨的航海家学院港口，学员抵达。" loading="lazy"></figure>
        <div class="cta-row">
          <button class="btn" type="button" data-open="modal-play">开始试航 <span class="arw" aria-hidden="true">→</span></button>
          <button class="btn btn--ghost" type="button" data-open="modal-book">预约远征提醒 <span class="arw" aria-hidden="true">→</span></button>
        </div>
      </article>
    </div>

    <footer class="site-footer">
      <div class="foot-brand">
        <img src="assets/img/crest.png" alt="" width="36" height="33">
        <p class="foot-word"><span lang="en">Com<em>pass</em></span>航海家学院</p>
      </div>
      <nav class="foot-nav" aria-label="页脚导航">
        <a href="../privacy.html">隐私政策</a>
        <a href="../privacy.html">用户协议</a>
        <a href="../claim.html">认领报告</a>
        <a href="mailto:septem@colatech.cn" lang="en">septem@colatech.cn</a>
      </nav>
      <p class="foot-legal">
        <span>© 2026 Compass 航海家</span>
        <span>独立备考工具，与 IELTS 官方无隶属或背书关系</span>
        <span>京ICP备XXXXXXXX号-X</span>
      </p>
    </footer>
  </div>
  <span class="mono work-pct work-fade" id="workPct">0%</span>
</section>

<!-- 影片段落（四段 + 收束画框） -->
<main id="stage">
  <section class="panel hero" data-panel aria-label="入学">
    <div class="inner">
      <h1>欢迎来到<br><span class="h1-mark">COM<em>PASS</em></span>学院</h1>
      <i class="gold-rule" aria-hidden="true"></i>
      <div class="cta-row">
        <button class="btn" type="button" data-open="modal-play">开始试航 <span class="arw" aria-hidden="true">→</span></button>
        <button class="btn btn--ghost" type="button" data-scroll="campus">先进学院看看 <span class="arw" aria-hidden="true">↓</span></button>
      </div>
    </div>
  </section>

  <section class="panel framed verse" data-panel aria-label="出海的人">
    <i class="vrule"></i>
  </section>

  <section class="panel framed" data-panel aria-label="四科教室">
    <i class="vrule"></i>
    <div class="inner">
      <h2>听说读写，<br>各有教室</h2>
    </div>
  </section>

  <section class="panel expedition" data-panel aria-label="远征篇">
    <div class="inner">
      <h2>练到上岸那天。</h2>
      <div class="cta-row">
        <button class="btn" type="button" data-open="modal-book">预约远征提醒 <span class="arw" aria-hidden="true">→</span></button>
      </div>
    </div>
  </section>

  <div class="frame" id="frame" aria-hidden="true">
    <i class="fv fv--l"></i><i class="fv fv--r"></i><i class="fh fh--t"></i><i class="fh fh--b"></i>
    <svg class="spark s-tl" viewBox="0 0 12 12"><path d="M6 0C6.4 3.8 8.2 5.6 12 6 8.2 6.4 6.4 8.2 6 12 5.6 8.2 3.8 6.4 0 6 3.8 5.6 5.6 3.8 6 0Z"/></svg>
    <svg class="spark s-tr" viewBox="0 0 12 12"><path d="M6 0C6.4 3.8 8.2 5.6 12 6 8.2 6.4 6.4 8.2 6 12 5.6 8.2 3.8 6.4 0 6 3.8 5.6 5.6 3.8 6 0Z"/></svg>
    <svg class="spark s-bl" viewBox="0 0 12 12"><path d="M6 0C6.4 3.8 8.2 5.6 12 6 8.2 6.4 6.4 8.2 6 12 5.6 8.2 3.8 6.4 0 6 3.8 5.6 5.6 3.8 6 0Z"/></svg>
    <svg class="spark s-br" viewBox="0 0 12 12"><path d="M6 0C6.4 3.8 8.2 5.6 12 6 8.2 6.4 6.4 8.2 6 12 5.6 8.2 3.8 6.4 0 6 3.8 5.6 5.6 3.8 6 0Z"/></svg>
  </div>
</main>

<!-- 双码弹层 -->
<dialog class="sheet" id="modal-play" aria-labelledby="play-title">
  <header class="sheet-bar">
    <p class="mono sheet-label">Trial Run</p>
    <h2 id="play-title">开始试航</h2>
    <button class="sheet-x" type="button" data-close aria-label="关闭">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>
    </button>
  </header>
  <div class="sheet-qrs">
    <figure>
      <div class="qr-slot qr-slot--mp"><img src="assets/img/compass-mark.png" alt="" width="40" height="40"><span>小程序码</span></div>
      <figcaption><b>微信扫码开玩</b><span>小程序码直接开测，二十来分钟</span></figcaption>
    </figure>
    <figure>
      <div class="qr-slot qr-slot--gzh"><img src="assets/img/compass-mark.png" alt="" width="40" height="40"><span>公众号</span></div>
      <figcaption><b>关注公众号</b><span>领完整报告，收开航通知</span></figcaption>
    </figure>
  </div>
  <p class="sheet-alt">手机上看到这页？微信搜一搜「Compass 航海家」直接开玩。<button class="sheet-copy" id="copy-name" type="button">复制名称</button></p>
  <p class="sheet-foot">报告不写分数：四科各留一档信号，外加下一步建议。</p>
</dialog>

<!-- 预约弹层 -->
<dialog class="sheet" id="modal-book" aria-labelledby="book-title">
  <header class="sheet-bar">
    <p class="mono sheet-label">Expedition</p>
    <h2 id="book-title">预约远征篇内测</h2>
    <button class="sheet-x" type="button" data-close aria-label="关闭">
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg>
    </button>
  </header>
  <form class="sheet-form" id="book-form" novalidate>
    <label class="field">
      <span>手机号</span>
      <input type="tel" name="phone" inputmode="numeric" autocomplete="tel" placeholder="开放内测那天发短信给你">
      <em>请输入 11 位手机号</em>
    </label>
    <label class="field">
      <span>打算哪个月考</span>
      <input type="month" name="date">
      <em>选一个月份，大概就行</em>
    </label>
    <label class="field">
      <span>现在在哪个阶段</span>
      <select name="stage">
        <option value="">请选择</option>
        <option>刚开始了解雅思</option>
        <option>在背单词、刷题</option>
        <option>考过，还没到线</option>
        <option>临考冲刺</option>
      </select>
      <em>选一个最接近的</em>
    </label>
    <label class="agree">
      <input type="checkbox" name="privacy">
      <span>我已阅读并同意<a href="../privacy.html">《隐私政策》</a></span>
    </label>
    <p class="agree-err">先勾选同意隐私政策</p>
    <button class="sheet-submit" type="submit">
      <span>预约</span>
      <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h12m-5-5 5 5-5 5"/></svg>
    </button>
  </form>
  <div class="sheet-done" hidden>
    <p class="sheet-done-title">记下了</p>
    <p>内测开放那天会发短信到这个号码。在那之前，可以先去试航看看自己站在哪。</p>
    <button class="text-action" type="button" data-close>知道了</button>
  </div>
</dialog>

<script src="assets/site.js" defer></script>
</body>
</html>
