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="description" content="写给瀚予的一封信：从哈尔滨到贵阳，再到下一站河南。" />
    <title>写给瀚予的一封信</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext y='48' font-size='44'%3E%F0%9F%92%8C%3C/text%3E%3C/svg%3E" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="ambient" aria-hidden="true">
      <span class="orb orb-a"></span>
      <span class="orb orb-b"></span>
      <span class="rainline rainline-a"></span>
      <span class="rainline rainline-b"></span>
    </div>

    <header class="hero" id="top">
      <nav class="nav" aria-label="页面导航">
        <a href="#letter">信</a>
        <a href="#memories">这几天</a>
        <a href="#photos">照片</a>
        <a href="#promise">下一站</a>
      </nav>

      <section class="envelope" aria-labelledby="pageTitle">
        <p class="eyebrow">Harbin -> Guiyang / April to Now</p>
        <h1 id="pageTitle">瀚予，打开这封信的时候，请慢一点。</h1>
        <p class="hero-copy">
          这不是一封把几天行程重新说一遍的信。它是我在你离开以后，才慢慢反应过来的心疼、感谢、想念和承诺。
        </p>
        <div class="hero-actions">
          <button class="primary-button" id="openLetter" type="button">打开这封信</button>
          <button class="sound-button" id="musicToggle" type="button" aria-pressed="false">
            播放
          </button>
        </div>
      </section>
    </header>

    <main>
      <section class="letter-section" id="letter" aria-labelledby="letterTitle">
        <div class="section-kicker">Letter 01</div>
        <article class="letter-paper reveal">
          <h2 id="letterTitle">写给从很远地方来见我的你</h2>
          <p>瀚予：</p>
          <p>
            你走以后，贵阳好像突然安静了很多。以前我总觉得分别只是一件需要面对的事情，到了时间就去机场、去车站，说几句路上小心，然后各自回到原来的生活。可是这一次不一样。你真的从哈尔滨来到贵阳，真的拖着那么多行李，一个人穿过那么远的路来到我身边，又真的在短短几天之后离开。我后知后觉地发现，原来一个人来过之后，城市会变得不一样；原来你离开之后，我才开始更清楚地明白，你这一次奔赴有多重。
          </p>
          <p>
            第一天你三点多到机场，我帮你叫车去宾馆。那家宾馆你不太喜欢，我们又重新订了一个。现在想起来，我最心疼的不是这件事麻烦，而是你一个人搬着那么多行李，在陌生城市里来来回回。你明明已经很累了，却还在努力把自己安顿好，然后等着见我。那时候我只是想快点解决问题，快点见到你，可现在我会反复想：你到底是带着多大的喜欢，才会把那些辛苦都忍下来。
          </p>
          <p>
            我们去吃丝娃娃，你喜欢上了脆哨。这个很小的细节，我却记得特别牢。因为它让我觉得，你不是来完成一次见面，你是真的把贵阳放进了自己的体验里，把我生活的城市也认真尝了一口。那天晚上我们终于靠得很近，很多话没有说出来，但身体和心都知道：这不是隔着屏幕的想念了，你就在我身边。只是可惜，那时候我还没有真正理解分别会有多痛。第一天我睡得很早，因为第二天要上班，也因为我还天真地觉得我们还有好几天。
          </p>
          <p>
            第二天我在上班，你一个人出去逛。你去看贵阳的古着店，穿得特别漂亮，做什么都分享给我看。你吃到了难吃的宽心粉，去了花果园，一个人买东西、喝东西、看这个城市。你分享给我的每一张图、每一句话，我当时都在工作间隙看，可我心里其实一直有一点愧疚：你那么远来找我，我却不能完整地陪在你身边。临近我下班，你还为了方便我，选了离我更近的地方吃烤鸡。你总是这样，把自己的期待放在心里，却又会先替我想。我打车用最快速度去见你，排了很久的队，前面还有二十多桌。那顿饭味道还行，可我现在记住的不是烤鸡，是我在路上越来越想见你的那种着急。
          </p>
          <p>
            星期五那天，我下午终于能陪你。可是你心情不好，天也下雨。你美美地去了公园，却没有拍到满意的照片，在地铁上还遇到让人烦的人，所以提前回来等我。我知道你那天不是单纯不开心，你是满怀期待地来到一座城市，想留下好看的照片、好看的心情、好看的回忆，却被天气和意外打乱了。我下班后和你去了青云集，那里有很多可以逛的小店，也有本地特色。你想买冰箱贴，像是想把这趟贵阳装进口袋里带走。我们一起吃酸汤火锅，又等了很久。你爸妈查岗的时候，你很害怕，心情一下高一下低。那天我最记得的是，不管在哪里，你都会贴着我。你靠近我的时候，我心里其实很开心，也很踏实。那种感觉像是在嘈杂的人群里，突然有了一个只属于我的位置。
          </p>
          <p>
            星期六我给你补过生日。布置场景、拍照片，看你开心，我也开心。差一点把你的包搞掉，还好最后没有。那天之后，你好像更爱我了。我不知道该怎么形容那种感觉，好像我们不是只多过了一天，而是多拥有了一层关系里的确认。生日本来应该是被认真记住、被温柔对待的日子，我很庆幸我能补给你一点点仪式感，也庆幸那些照片里有你很漂亮、很开心的样子。以后我还想给你补很多很多这样的时刻，不是为了弥补什么，而是想让你一次又一次地感觉到：你在我这里值得被认真对待。
          </p>
          <p>
            星期天本来想去公园，后来下雨，我们没有去成。我们一起吃了豆米火锅，还不错。那天晚上我又因为第二天要上班睡得很早。可我后来才知道，你一个人哭了很久，想到快要分别，眼睛都哭肿了。最让我难受的是，你那么难过，却没有把我叫醒。你只是轻轻碰我，没有真的打扰我。瀚予，我想到这里真的很心疼。你明明可以叫醒我的，明明可以让我陪你说话，明明可以把那份难受分一点给我，可你还是选择自己忍着。你太乖了，也太让人心疼了。我那时睡着了，没有陪到你，这是我这几天里最遗憾的事情之一。
          </p>
          <p>
            第二天我们没有出门。你的眼睛肿了，没办法化妆拍照，我们就在酒店点外卖。你还是乖乖等我回来。明明你第二天就要走了，明明分别已经压在你心上，可你还是用很安静的方式陪着我。直到现在我才真正懂，分别不是从机场那一刻开始的。分别从你半夜一个人哭的时候就已经开始了，从你舍不得却不想吵醒我的时候就已经开始了。
          </p>
          <p>
            我们四月份认识，之前在哈尔滨谈恋爱。我们从天南到地北，把脚印落在中国那么多地方。听起来好像很浪漫，可只有我们知道，真正难的不是一起去过哪里，而是每一次见面之前的等待，每一次分别之后的空落，每一次隔着距离还要继续相信彼此。你这次从哈尔滨到贵阳，让我更确定一件事：我不是只想和你拥有短暂的快乐，我想和你拥有更长的以后。
          </p>
          <p>
            所以这封信里，我想认真对你说谢谢。谢谢你带着疲惫和行李来见我，谢谢你在我上班的时候自己探索这座城市还什么都分享给我，谢谢你愿意贴着我、依赖我，也谢谢你在难受的时候还替我着想。更谢谢你让我知道，被一个人坚定地奔赴，原来是这么珍贵的事情。
          </p>
          <p>
            我也想对你承诺：我会更珍惜你。以后我不会只在分别之后才后知后觉地心疼你，我会在你还在我身边的时候，就更认真地抱你、陪你、听你说话。我会去河南找你，不让奔赴总是只由你来完成。下一次换我走向你，换我把想念装进行李里，换我去你的城市，把你的生活也认真看一遍。
          </p>
          <p>
            瀚予，短短几天不够我们抵消所有想念，但已经足够让我更爱你。你来过贵阳，也来过我心里更深的地方。等下一次见面，我希望我们都不用把舍不得藏得那么辛苦。你可以叫醒我，可以抱着我哭，可以把不开心直接交给我。爱不是只在开心的时候陪你吃饭、拍照、逛街，爱也是在你难受的时候，我能醒着听你说，能陪你熬过那一阵心酸。
          </p>
          <p>
            这一次你从哈尔滨来到贵阳，下一次我去河南找你。我们继续从天南走到地北，继续把那些很远的地方，慢慢走成我们共同的回忆。
          </p>
          <p class="signature">想你，也认真爱你的我</p>
        </article>
      </section>

      <section class="memory-section" id="memories" aria-labelledby="memoryTitle">
        <div class="section-kicker">Memory Reel</div>
        <h2 id="memoryTitle">这些瞬间，不只是“发生过”。</h2>
        <div class="memory-grid">
          <button class="memory-card reveal" type="button">
            <span>机场</span>
            <strong>她把远方拖进贵阳</strong>
            <em>三点多、行李、重新订酒店</em>
            <p>我后来才懂，你那天不是简单地到了，而是把一路辛苦都藏起来，只把想见我留在脸上。</p>
          </button>
          <button class="memory-card reveal" type="button">
            <span>丝娃娃</span>
            <strong>她喜欢上脆哨</strong>
            <em>贵州味道从这里开始</em>
            <p>一个小小的脆哨，让我觉得我的城市被你认真尝过，也被你温柔记住了。</p>
          </button>
          <button class="memory-card reveal" type="button">
            <span>工作日</span>
            <strong>她一个人漂亮地逛</strong>
            <em>古着店、宽心粉、花果园</em>
            <p>你什么都分享给我看，而我在屏幕这边又开心又愧疚，想快点下班见你。</p>
          </button>
          <button class="memory-card reveal" type="button">
            <span>青云集</span>
            <strong>她在人群里贴着我</strong>
            <em>冰箱贴、酸汤火锅、查岗</em>
            <p>那晚你心情起伏，可你靠近我的时候，我像在雨后的城市里终于找到了灯。</p>
          </button>
          <button class="memory-card reveal" type="button">
            <span>生日</span>
            <strong>我想认真补给她</strong>
            <em>布置、照片、差点丢包</em>
            <p>我想让你知道，你值得被安排、被等待、被庆祝，值得拥有不敷衍的仪式感。</p>
          </button>
          <button class="memory-card reveal" type="button">
            <span>夜晚</span>
            <strong>她哭了，却没叫醒我</strong>
            <em>分别提前在心里开始</em>
            <p>这是我最心疼的地方。以后难过的时候，不要一个人忍着，把我叫醒，好不好。</p>
          </button>
        </div>
      </section>

      <section class="photo-section" id="photos" aria-labelledby="photoTitle">
        <div class="section-kicker">Photo Slots</div>
        <h2 id="photoTitle">照片先留空，等你们把回忆放进去。</h2>
        <div class="photo-reel">
          <button class="photo-card reveal" data-image="assets/photos/airport.jpg" type="button">
            <span>airport.jpg</span>
            <strong>哈尔滨到贵阳</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/siwawa.jpg" type="button">
            <span>siwawa.jpg</span>
            <strong>丝娃娃和脆哨</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/solo.jpg" type="button">
            <span>solo.jpg</span>
            <strong>她一个人的贵阳</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/qingyun.jpg" type="button">
            <span>qingyun.jpg</span>
            <strong>青云集那晚</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/birthday.jpg" type="button">
            <span>birthday.jpg</span>
            <strong>补过的生日</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/rain.jpg" type="button">
            <span>rain.jpg</span>
            <strong>下雨没去成的公园</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/hotel.jpg" type="button">
            <span>hotel.jpg</span>
            <strong>离别前的酒店</strong>
          </button>
          <button class="photo-card reveal" data-image="assets/photos/henan.jpg" type="button">
            <span>henan.jpg</span>
            <strong>下一站河南</strong>
          </button>
        </div>
      </section>

      <section class="promise-section reveal" id="promise" aria-labelledby="promiseTitle">
        <div>
          <div class="section-kicker">Next Stop</div>
          <h2 id="promiseTitle">下一次，换我去河南找你。</h2>
        </div>
        <p>
          这不是一句为了让分别好受一点才说的话。你已经走过那么远来到我身边，所以我也要认真走向你。我们会继续把地图上的距离，变成照片、饭、拥抱、争吵后的和好、下一次见面前的期待，和很多很多属于我们的以后。
        </p>
        <a class="top-link" href="#top">再读一遍这封信</a>
      </section>
    </main>

    <audio id="letterAudio" preload="metadata" data-src="assets/audio/bushuo.mp3"></audio>
    <script src="script.js"></script>
  </body>
</html>