<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#f5f0e4" />
    <meta
      name="description"
      content="音乐生芽——把植物种在播放器上，用音乐浇灌成长。3班7组作品。"
    />
    <title>音乐生芽 · 项目背景与使用说明</title>
    <link rel="stylesheet" href="/landing.css" />
  </head>
  <body>
    <a class="skip-link" href="#main">跳到主要内容</a>

    <header class="site-header">
      <a class="brand" href="#top" aria-label="音乐生芽首页">
        <svg viewBox="0 0 40 40" aria-hidden="true">
          <path d="M20 34V15" />
          <path d="M20 20C12 20 8 15 8 8c8 0 12 5 12 12Z" />
          <path d="M20 25c8 0 12-5 12-12-8 0-12 5-12 12Z" />
        </svg>
        <span>音乐生芽</span>
      </a>
      <nav class="site-nav" aria-label="页面导航">
        <a href="#background">项目背景</a>
        <a href="#play">核心玩法</a>
        <a href="#guide">如何体验</a>
      </nav>
      <a class="header-cta" href="/demo.html">
        进入 Demo
        <svg viewBox="0 0 20 20" aria-hidden="true"><path d="m7 4 6 6-6 6" /></svg>
      </a>
    </header>

    <main id="main">
      <section class="hero" id="top">
        <div class="hero-copy reveal">
          <h1>音乐生芽</h1>
          <p class="team">3班7组 · 王玉泽、高一、吴怡丰</p>
          <h2>把植物种在播放器上</h2>
          <p class="hero-intro">
            用音乐浇灌成长，让每一次聆听、分享与陪伴，
            都长成一段有温度的音乐记忆。
          </p>
          <div class="hero-actions">
            <a class="primary-button" href="/demo.html">
              进入 Demo
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
            </a>
            <a class="text-link" href="#background">
              先了解它
              <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
            </a>
          </div>
        </div>

        <div class="hero-visual reveal" aria-label="植物从唱片与播放器中生长的项目概念图">
          <div class="orbit-copy" aria-hidden="true">
            <span>听歌 = 成长</span>
            <i></i>
            <span>分享 = 生长</span>
          </div>
          <div class="record" aria-hidden="true">
            <span class="record-ring ring-one"></span>
            <span class="record-ring ring-two"></span>
            <span class="record-ring ring-three"></span>
            <span class="record-label"></span>
          </div>
          <div class="phone-shell">
            <div class="phone-top"><span></span></div>
            <img
              src="/assets/default-player-preview.png"
              alt="音乐生芽播放器界面"
              class="phone-preview"
            />
            <img
              src="/plant_assets/money_f/5.png"
              alt=""
              class="hero-plant"
              aria-hidden="true"
            />
          </div>
          <svg class="root-lines" viewBox="0 0 720 280" aria-hidden="true">
            <path d="M364 8c-12 47 1 88-24 125-21 32-70 37-111 89" />
            <path d="M364 8c4 51-12 102 18 144 26 35 73 37 122 92" />
            <path d="M364 8c-1 75 6 130-2 259" />
            <path d="M361 131c-43 15-82 7-125-7-48-15-95-5-139 33" />
            <path d="M374 153c39 7 68 0 101-18 50-26 101-17 150 21" />
          </svg>
        </div>

        <a class="scroll-cue" href="#background">
          <span>向下生长</span>
          <svg viewBox="0 0 20 28" aria-hidden="true"><path d="M10 1v24M3 18l7 7 7-7" /></svg>
        </a>
      </section>

      <section class="story section" id="background">
        <div class="section-heading reveal">
          <p class="section-index">01 / 项目背景</p>
          <h2>种地的本能，<br />遇见听歌的日常</h2>
          <p>
            从 QQ 农场的集体记忆，到《星露谷物语》的长期陪伴，再到蚂蚁森林与小火花的社交仪式感——年轻人想要的，不只是养成，更是一起留下痕迹。
          </p>
        </div>

        <div class="story-path reveal">
          <svg class="vine" viewBox="0 0 1120 170" preserveAspectRatio="none" aria-hidden="true">
            <path d="M8 103c123-75 190 61 317-4 138-70 209 53 345-1 142-57 258 53 442-39" />
          </svg>
          <article>
            <span class="story-number">01</span>
            <div class="story-symbol">
              <svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 40V20M24 28c-8 0-12-4-12-11 7 0 12 4 12 11Zm0 5c8 0 12-4 12-11-7 0-12 4-12 11ZM31 9v8M31 9l7-2v8" /></svg>
            </div>
            <h3>听歌驱动</h3>
            <p>把最自然的音乐行为，变成可见的成长。</p>
          </article>
          <article>
            <span class="story-number">02</span>
            <div class="story-symbol">
              <svg viewBox="0 0 48 48" aria-hidden="true"><circle cx="14" cy="24" r="5" /><circle cx="34" cy="14" r="5" /><circle cx="34" cy="34" r="5" /><path d="m18 22 11-6M18 26l11 6" /></svg>
            </div>
            <h3>分享生长</h3>
            <p>第一次分享获得植物，持续分享让关系升温。</p>
          </article>
          <article>
            <span class="story-number">03</span>
            <div class="story-symbol">
              <svg viewBox="0 0 48 48" aria-hidden="true"><path d="M24 39V24M24 30c-7 0-11-4-11-10 7 0 11 4 11 10Zm0 0c7 0 11-4 11-10-7 0-11 4-11 10Z" /><circle cx="15" cy="15" r="5" /><path d="m30 14 3-5 3 5 6 1-4 4 1 6-6-3-5 3 1-6-4-4Z" /></svg>
            </div>
            <h3>粉丝共鸣</h3>
            <p>小石榴、四叶草，把艺人粉丝文化种进 Q 音。</p>
          </article>
        </div>

        <div class="difference reveal">
          <div class="difference-art" aria-hidden="true">
            <div class="mini-record"></div>
            <svg viewBox="0 0 500 360">
              <path d="M245 14c4 74-14 105-35 150-17 37-13 84-69 175" />
              <path d="M245 14c-8 85 21 107 49 153 22 36 29 78 70 165" />
              <path d="M237 151c-51 26-100 30-159 13" />
              <path d="M266 151c52 14 102 3 153-31" />
            </svg>
          </div>
          <div class="difference-copy">
            <h3>不是另一个蚂蚁森林</h3>
            <p class="difference-lead">同样是养成，我们把音乐平台独有的行为、关系与情感放进每一次生长。</p>
            <div class="compare-table" role="table" aria-label="音乐生芽与竞品对比">
              <div class="compare-row compare-head" role="row">
                <span role="columnheader">维度</span>
                <span role="columnheader">常见竞品</span>
                <span aria-hidden="true"></span>
                <span role="columnheader">音乐生芽</span>
              </div>
              <div class="compare-row" role="row">
                <strong role="cell">成长驱动</strong><span role="cell">步数 / 低碳行为</span><b aria-hidden="true">→</b><em role="cell">听歌时长</em>
              </div>
              <div class="compare-row" role="row">
                <strong role="cell">玩法核心</strong><span role="cell">个人养成</span><b aria-hidden="true">→</b><em role="cell">分享即成长</em>
              </div>
              <div class="compare-row" role="row">
                <strong role="cell">平台基因</strong><span role="cell">通用</span><b aria-hidden="true">→</b><em role="cell">Q 音艺人粉丝生态</em>
              </div>
              <div class="compare-row" role="row">
                <strong role="cell">情感出口</strong><span role="cell">环保公益</span><b aria-hidden="true">→</b><em role="cell">情侣密友纪念</em>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="play section" id="play">
        <div class="section-heading play-heading reveal">
          <p class="section-index">02 / 核心玩法</p>
          <h2>植物，<br class="mobile-break" />真的种在播放器上</h2>
          <p>听歌是阳光，分享是水。成长不再是一串抽象数字，而是一棵始终陪在播放器右下角的植物。</p>
        </div>

        <div class="player-feature reveal">
          <div class="feature-phone">
            <div class="phone-speaker"></div>
            <img src="/assets/default-player-preview.png" alt="音乐生芽播放器 Demo 预览" />
            <span class="plant-hotspot">
              <img src="/plant_assets/money_f/5.png" alt="播放器右下角的专属陪伴植物" />
              <i></i>
            </span>
            <span class="hotspot-label">就在这里</span>
          </div>
          <div class="feature-list">
            <article>
              <span>01</span>
              <div>
                <h3>专属陪伴植物</h3>
                <p>播放器右下角出现专属陪伴植物，树木、花朵、蔬菜、水果都可以成为你的音乐伙伴。</p>
              </div>
            </article>
            <article>
              <span>02</span>
              <div>
                <h3>听歌即成长</h3>
                <p>成长进度与音乐播放时长深度绑定。听歌时长越长，成长值越高。</p>
              </div>
            </article>
            <article>
              <span>03</span>
              <div>
                <h3>分享可加速</h3>
                <p>完成求浇水、一起养等分享活动，额外获得成长值。</p>
              </div>
            </article>
            <article>
              <span>04</span>
              <div>
                <h3>五级成长解锁</h3>
                <p>从种子到成熟共有五个生长等级，每级需累积指定成长值解锁。</p>
              </div>
            </article>
          </div>
        </div>

        <div class="relationship reveal">
          <h2>一棵植物，长出三种关系</h2>
          <div class="growth-line" aria-hidden="true"></div>
          <div class="relationship-items">
            <article>
              <span class="relationship-icon seed-icon"></span>
              <p class="relationship-step">听歌</p>
              <h3>让它长大</h3>
              <p>播放时长成为成长值，植物从种子、发芽到成熟，一共五个阶段。</p>
            </article>
            <article>
              <span class="relationship-icon sprout-icon"></span>
              <p class="relationship-step">分享</p>
              <h3>让它相遇</h3>
              <p>求浇水、邀请一起养，让每一次转发都有具体的回应。</p>
            </article>
            <article>
              <span class="relationship-icon gift-icon">
                <svg viewBox="0 0 52 52" aria-hidden="true"><path d="M9 22h34v24H9zM6 15h40v9H6zM26 15v31M25 15c-8 0-12-3-12-7 0-3 2-5 5-5 5 0 8 7 8 12Zm1 0c8 0 12-3 12-7 0-3-2-5-5-5-5 0-8 7-8 12Z" /></svg>
              </span>
              <p class="relationship-step">赠送</p>
              <h3>让记忆留下</h3>
              <p>成熟植物带着寄语与点播歌曲，成为送给重要之人的纪念。</p>
            </article>
          </div>
        </div>
      </section>

      <section class="guide" id="guide">
        <div class="guide-inner">
          <div class="section-heading guide-heading reveal">
            <p class="section-index">03 / 如何体验</p>
            <h2>三步开始你的音乐生芽</h2>
          </div>
          <ol class="steps reveal">
            <li>
              <span>01</span>
              <div><h3>输入名字</h3><p>进入 Demo 后登录，建立独立的种植进度。</p></div>
            </li>
            <li>
              <span>02</span>
              <div><h3>打开植物</h3><p>点击播放器右下角的植物图标。</p></div>
            </li>
            <li>
              <span>03</span>
              <div><h3>开始生长</h3><p>去浇水、一起养，成熟后送给好友。</p></div>
            </li>
          </ol>
          <div class="final-cta reveal">
            <div>
              <h2>准备好，听一首会发芽的歌了吗？</h2>
              <p>从第一粒种子开始，体验听歌、分享与陪伴如何成为一段看得见的成长。</p>
            </div>
            <a href="/demo.html">
              <span>进入音乐生芽 Demo</span>
              <svg viewBox="0 0 28 28" aria-hidden="true"><path d="M3 14h21M16 5l9 9-9 9" /></svg>
            </a>
          </div>
        </div>
      </section>
    </main>

    <footer class="site-footer">
      <span>音乐生芽</span>
      <p>3班7组 · 王玉泽、高一、吴怡丰</p>
      <a href="#top">回到顶部 ↑</a>
    </footer>

    <script type="module" src="/landing.js"></script>
  </body>
</html>
