<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1920, height=1080" />
    <script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
    <style>
      :root { --timeline-columns: 8; }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body {
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background: #f3faff;
        font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
        color: #07194f;
      }
      #root {
        position: relative;
        width: 1920px;
        height: 1080px;
        overflow: hidden;
        background:
          radial-gradient(circle at 82% 16%, rgba(73,217,255,0.26), transparent 30%),
          radial-gradient(circle at 10% 92%, rgba(21,91,255,0.15), transparent 28%),
          linear-gradient(135deg, #ffffff 0%, #f3faff 46%, #dceeff 100%);
      }
      .clip { position: absolute; overflow: hidden; }
      .scene { inset: 0; opacity: 0; }
      .topbar {
        position: absolute;
        z-index: 40;
        top: 42px;
        left: 72px;
        right: 72px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 26px;
        font-weight: 850;
        color: rgba(7,25,79,0.82);
      }
      .brand-pill {
        display: inline-flex;
        gap: 14px;
        align-items: center;
        padding: 14px 24px;
        border-radius: 999px;
        color: #fff;
        background: linear-gradient(135deg, #155bff, #18bfa6);
        box-shadow: 0 16px 40px rgba(21,91,255,0.22);
      }
      .brand-dot {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 0 24px #49d9ff;
      }
      .scene-content {
        width: 100%;
        height: 100%;
        padding: 92px 104px 214px;
        display: grid;
        grid-template-columns: 0.96fr 1.04fr;
        gap: 58px;
        align-items: center;
      }
      .image-panel {
        position: relative;
        width: 100%;
        height: 760px;
        border-radius: 34px;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(21,91,255,0.16);
        box-shadow: 0 34px 90px rgba(17,60,128,0.18);
      }
      .image-panel img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        filter: saturate(1.06) contrast(1.03);
      }
      .image-panel.contain img {
        object-fit: contain;
        padding: 20px;
        background: #fff;
      }
      .copy {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        gap: 26px;
      }
      .kicker {
        width: max-content;
        max-width: 100%;
        color: #155bff;
        background: rgba(21,91,255,0.08);
        border: 1px solid rgba(21,91,255,0.22);
        border-radius: 999px;
        padding: 12px 22px;
        font-size: 27px;
        font-weight: 950;
      }
      h1 {
        font-size: 80px;
        line-height: 1.05;
        font-weight: 950;
        letter-spacing: 0;
      }
      h2 {
        font-size: 64px;
        line-height: 1.08;
        font-weight: 950;
        letter-spacing: 0;
      }
      .lead {
        font-size: 32px;
        line-height: 1.55;
        font-weight: 760;
        color: rgba(7,25,79,0.78);
      }
      .tag-row {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
      }
      .tag {
        padding: 12px 16px;
        border-radius: 16px;
        color: #07194f;
        background: rgba(255,255,255,0.76);
        border: 1px solid rgba(73,217,255,0.34);
        box-shadow: 0 14px 30px rgba(17,60,128,0.08);
        font-size: 24px;
        font-weight: 900;
      }
      .caption {
        position: absolute;
        z-index: 55;
        left: 320px;
        right: 320px;
        bottom: 132px;
        min-height: 78px;
        display: grid;
        place-items: center;
        padding: 14px 32px;
        border-radius: 26px;
        background: rgba(7,25,79,0.88);
        color: #fff;
        font-size: 32px;
        line-height: 1.34;
        font-weight: 850;
        text-align: center;
        box-shadow: 0 20px 55px rgba(7,25,79,0.26);
        opacity: 0;
      }
      .timeline {
        position: absolute;
        z-index: 52;
        left: 70px;
        right: 70px;
        bottom: 28px;
        height: 88px;
        padding: 12px 14px 18px;
        display: grid;
        grid-template-columns: repeat(var(--timeline-columns), minmax(0, 1fr));
        gap: 10px;
        align-items: center;
        overflow: visible;
        border-radius: 30px;
        background: rgba(255,255,255,0.76);
        border: 1px solid rgba(21,91,255,0.15);
        box-shadow: 0 20px 60px rgba(17,60,128,0.14);
        backdrop-filter: blur(12px);
      }
      .timeline-fill {
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 8px;
        height: 8px;
        border-radius: 999px;
        background: rgba(7,25,79,0.12);
        overflow: hidden;
      }
      .timeline-progress {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #155bff, #49d9ff, #18bfa6);
      }
      .chapter-tag {
        position: relative;
        z-index: 2;
        min-width: 0;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 0 10px;
        border-radius: 18px;
        background: rgba(255,255,255,0.72);
        border: 1px solid rgba(21,91,255,0.18);
        color: rgba(7,25,79,0.74);
        font-size: 20px;
        line-height: 1;
        font-weight: 900;
        white-space: nowrap;
        box-shadow: 0 12px 26px rgba(17,60,128,0.08);
      }
      .chapter-time {
        color: #155bff;
        font-variant-numeric: tabular-nums;
      }
      .chapter-title {
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .chapter-tag.active {
        color: #fff;
        background: linear-gradient(135deg, #155bff, #18bfa6);
        border-color: rgba(255,255,255,0.62);
        box-shadow: 0 20px 42px rgba(21,91,255,0.28);
      }
      .chapter-tag.active .chapter-time { color: #fff; }
      .glow-line {
        position: absolute;
        width: 560px;
        height: 560px;
        border-radius: 50%;
        border: 2px solid rgba(73,217,255,0.34);
        right: -160px;
        top: -150px;
      }
    </style>
  </head>
  <body>
    <!-- Sample config: 8 sections, 82 seconds, 8 timeline columns. Generators should replace these values from user input. -->
    <div id="root" data-composition-id="main" data-start="0" data-duration="82" data-width="1920" data-height="1080" style="--timeline-columns: 8">
      <div class="glow-line" data-layout-ignore></div>
      <div class="topbar" data-layout-ignore>
        <div class="brand-pill"><span class="brand-dot"></span><span>IT 基础设施演进史</span></div>
        <div>从硬件到 AI 原生生态</div>
      </div>

      <section id="scene-intro" class="clip scene" data-start="0" data-duration="12.0" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施演进路线图" /></div>
          <div class="copy">
            <div class="kicker">0:00 / 引言</div>
            <h1>IT 基础设施演进史<br />是一组能力的共同进化</h1>
            <p class="lead">计算、网络、存储、安全、监控、平台工程，最终汇入 AI 原生。</p>
            <div class="tag-row"><span class="tag">资源效率</span><span class="tag">系统弹性</span><span class="tag">自动化</span><span class="tag">智能化</span></div>
          </div>
        </div>
      </section>

      <section id="scene-mainline" class="clip scene" data-start="12.2" data-duration="8.6" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/it-infra-evolution-road.png" alt="IT 基础设施主线" /></div>
          <div class="copy">
            <div class="kicker">0:12 / 基础设施主线</div>
            <h2>从物理硬件<br />到 AI 原生基础设施</h2>
            <p class="lead">硬件、虚拟化、云平台、容器、编排治理、智能基础设施，是一条围绕资源效率持续推进的路线。</p>
            <div class="tag-row"><span class="tag">硬件</span><span class="tag">云平台</span><span class="tag">容器</span><span class="tag">AI 原生</span></div>
          </div>
        </div>
      </section>

      <section id="scene-security" class="clip scene" data-start="21.0" data-duration="9.8" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/account-security.png" alt="账户与安全体系" /></div>
          <div class="copy">
            <div class="kicker">0:21 / 账户与安全</div>
            <h2>安全边界<br />从网络转向身份</h2>
            <p class="lead">谁访问、什么身份、什么权限、凭证是否可信、是否可审计，成为现代安全的中心问题。</p>
            <div class="tag-row"><span class="tag">IAM</span><span class="tag">SSO</span><span class="tag">RBAC</span><span class="tag">Zero Trust</span></div>
          </div>
        </div>
      </section>

      <section id="scene-monitoring" class="clip scene" data-start="31.0" data-duration="9.2" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/observability-history.png" alt="监控的前生今世" /></div>
          <div class="copy">
            <div class="kicker">0:31 / 监控与可观测性</div>
            <h2>从事后告警<br />走向 AI 自愈</h2>
            <p class="lead">指标、日志、链路、事件、拓扑和上下文一起进入运维系统，让系统从“报警”走向“预测与定位”。</p>
            <div class="tag-row"><span class="tag">Metrics</span><span class="tag">Logs</span><span class="tag">Traces</span><span class="tag">AIOps</span></div>
          </div>
        </div>
      </section>

      <section id="scene-network" class="clip scene" data-start="40.4" data-duration="10.0" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/network-protocol.png" alt="网络与协议" /></div>
          <div class="copy">
            <div class="kicker">0:40 / 网络与协议</div>
            <h2>网络从连接一切<br />走向理解一切</h2>
            <p class="lead">从 TCP/IP、HTTP、负载均衡，到服务网格和 AI 网络，网络正在承担更智能的路由与流量治理。</p>
            <div class="tag-row"><span class="tag">TCP/IP</span><span class="tag">HTTP</span><span class="tag">Service Mesh</span><span class="tag">AI Network</span></div>
          </div>
        </div>
      </section>

      <section id="scene-storage" class="clip scene" data-start="50.6" data-duration="9.4" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel contain"><img src="assets/images/storage-evolution.png" alt="存储演进之路" /></div>
          <div class="copy">
            <div class="kicker">0:51 / 存储服务</div>
            <h2>数据从存下来<br />走向高效流动</h2>
            <p class="lead">硬盘、RAID、SAN、对象存储、云原生存储和 AI 数据湖，让数据成为可调度、可治理的生产资料。</p>
            <div class="tag-row"><span class="tag">RAID / SAN</span><span class="tag">对象存储</span><span class="tag">CSI / Ceph</span><span class="tag">AI 数据湖</span></div>
          </div>
        </div>
      </section>

      <section id="scene-platform" class="clip scene" data-start="60.2" data-duration="9.0" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel"><img src="assets/images/platform-engineering.png" alt="从手工运维到现代平台工程" /></div>
          <div class="copy">
            <div class="kicker">1:00 / 平台工程</div>
            <h2>从人肉运维<br />到平台化交付</h2>
            <p class="lead">脚本、配置管理、基础设施即代码、CI/CD 和 GitOps，最终沉淀成可复用的平台能力。</p>
            <div class="tag-row"><span class="tag">Shell</span><span class="tag">IaC</span><span class="tag">CI/CD</span><span class="tag">GitOps</span></div>
          </div>
        </div>
      </section>

      <section id="scene-ai" class="clip scene" data-start="69.4" data-duration="11.6" data-track-index="1">
        <div class="scene-content">
          <div class="image-panel contain"><img src="assets/images/ai-coevolution.png" alt="与 AI 共同进化" /></div>
          <div class="copy">
            <div class="kicker">1:09 / 与 AI 共同进化</div>
            <h2>基础设施从工具系统<br />变成 AI 协同系统</h2>
            <p class="lead">AI 不只是跑在基础设施之上，也会重新定义基础设施的交付、治理、优化和自治方式。</p>
            <div class="tag-row"><span class="tag">AI Agent</span><span class="tag">MCP</span><span class="tag">OpenClaw</span><span class="tag">Autonomous Infra</span></div>
          </div>
        </div>
      </section>

      <div class="caption clip" id="cap-intro" data-start="0.2" data-duration="11.6" data-track-index="10">IT 基础设施演进史，不只是服务器升级，而是一组能力的共同进化。</div>
      <div class="caption clip" id="cap-1" data-start="12.3" data-duration="8.3" data-track-index="10">主线从硬件出发，经过云平台、容器和编排治理，持续提升资源效率。</div>
      <div class="caption clip" id="cap-2" data-start="21.1" data-duration="9.5" data-track-index="10">账户与安全体系，把边界从网络迁移到身份。</div>
      <div class="caption clip" id="cap-3" data-start="31.1" data-duration="8.9" data-track-index="10">监控从指标告警走向可观测性，再走向 AI Native 运维。</div>
      <div class="caption clip" id="cap-4" data-start="40.5" data-duration="9.7" data-track-index="10">网络与协议，从连接一切走向理解一切。</div>
      <div class="caption clip" id="cap-5" data-start="50.7" data-duration="9.1" data-track-index="10">存储服务从硬盘和 SAN，走向云原生存储和 AI 数据湖。</div>
      <div class="caption clip" id="cap-6" data-start="60.3" data-duration="8.7" data-track-index="10">平台工程把运维能力沉淀成稳定、可审计、可复用的平台能力。</div>
      <div class="caption clip" id="cap-7" data-start="69.5" data-duration="9.4" data-track-index="10">最终，基础设施从人操作系统，走向 AI 协同和自主演进。</div>

      <div class="timeline" data-layout-ignore>
        <div class="chapter-tag" id="chapter-0"><span class="chapter-time">0:00</span><span class="chapter-title">引言</span></div>
        <div class="chapter-tag" id="chapter-1"><span class="chapter-time">0:12</span><span class="chapter-title">主线</span></div>
        <div class="chapter-tag" id="chapter-2"><span class="chapter-time">0:21</span><span class="chapter-title">安全</span></div>
        <div class="chapter-tag" id="chapter-3"><span class="chapter-time">0:31</span><span class="chapter-title">监控</span></div>
        <div class="chapter-tag" id="chapter-4"><span class="chapter-time">0:40</span><span class="chapter-title">网络</span></div>
        <div class="chapter-tag" id="chapter-5"><span class="chapter-time">0:51</span><span class="chapter-title">存储</span></div>
        <div class="chapter-tag" id="chapter-6"><span class="chapter-time">1:00</span><span class="chapter-title">平台工程</span></div>
        <div class="chapter-tag" id="chapter-7"><span class="chapter-time">1:09</span><span class="chapter-title">AI 共进化</span></div>
        <div class="timeline-fill"><div class="timeline-progress"></div></div>
      </div>

      <audio id="bgm" class="clip" data-start="0" data-duration="82" data-track-index="20" data-volume="0.10" src="assets/audio/bgm.wav"></audio>
      <audio id="vo-intro" class="clip" data-start="0" data-duration="11.856" data-track-index="5" data-volume="0.92" src="assets/audio/intro.mp3"></audio>
      <audio id="vo-1" class="clip" data-start="12.2" data-duration="8.352" data-track-index="5" data-volume="0.92" src="assets/audio/card1.mp3"></audio>
      <audio id="vo-2" class="clip" data-start="21.0" data-duration="9.648" data-track-index="5" data-volume="0.92" src="assets/audio/card2.mp3"></audio>
      <audio id="vo-3" class="clip" data-start="31.0" data-duration="8.928" data-track-index="5" data-volume="0.92" src="assets/audio/card3.mp3"></audio>
      <audio id="vo-4" class="clip" data-start="40.4" data-duration="9.840" data-track-index="5" data-volume="0.92" src="assets/audio/card4.mp3"></audio>
      <audio id="vo-5" class="clip" data-start="50.6" data-duration="9.240" data-track-index="5" data-volume="0.92" src="assets/audio/card5.mp3"></audio>
      <audio id="vo-6" class="clip" data-start="60.2" data-duration="8.808" data-track-index="5" data-volume="0.92" src="assets/audio/card6.mp3"></audio>
      <audio id="vo-7" class="clip" data-start="69.4" data-duration="8.712" data-track-index="5" data-volume="0.92" src="assets/audio/card7.mp3"></audio>
      <audio id="sfx-1" class="clip" data-start="12.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-2" class="clip" data-start="20.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-3" class="clip" data-start="30.92" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-4" class="clip" data-start="40.32" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-5" class="clip" data-start="50.52" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-6" class="clip" data-start="60.12" data-duration="0.45" data-track-index="6" data-volume="0.35" src="assets/audio/sfx/whoosh.wav"></audio>
      <audio id="sfx-7" class="clip" data-start="69.32" data-duration="0.32" data-track-index="7" data-volume="0.32" src="assets/audio/sfx/impact.wav"></audio>
    </div>

    <script>
      window.__timelines = window.__timelines || {};
      const rootDuration = Number(document.querySelector("#root").dataset.duration || 82);
      const tl = gsap.timeline({ paused: true });
      // Sample section config. Regenerate these arrays from user input for non-8-section or non-82-second videos.
      const scenes = ["#scene-intro", "#scene-mainline", "#scene-security", "#scene-monitoring", "#scene-network", "#scene-storage", "#scene-platform", "#scene-ai"];
      const starts = [0, 12.2, 21.0, 31.0, 40.4, 50.6, 60.2, 69.4];
      const durations = [12.0, 8.6, 9.8, 9.2, 10.0, 9.4, 9.0, 11.6];
      const captions = ["#cap-intro", "#cap-1", "#cap-2", "#cap-3", "#cap-4", "#cap-5", "#cap-6", "#cap-7"];
      const captionStarts = [0.2, 12.3, 21.1, 31.1, 40.5, 50.7, 60.3, 69.5];
      const captionDurations = [11.6, 8.3, 9.5, 8.9, 9.7, 9.1, 8.7, 9.4];
      const chapters = ["#chapter-0", "#chapter-1", "#chapter-2", "#chapter-3", "#chapter-4", "#chapter-5", "#chapter-6", "#chapter-7"];

      scenes.forEach((scene, index) => {
        const start = starts[index];
        tl.set(scene, { opacity: 1 }, start);
        tl.to(scene, { opacity: 0, duration: 0.28, ease: "power1.in" }, start + durations[index] - 0.28);
        tl.from(`${scene} .image-panel`, { x: -78, opacity: 0, scale: 0.96, duration: 0.72, ease: "power3.out" }, start + 0.08);
        tl.from(`${scene} .kicker`, { y: 28, opacity: 0, duration: 0.42, ease: "power2.out" }, start + 0.18);
        tl.from(`${scene} h1, ${scene} h2`, { y: 46, opacity: 0, duration: 0.62, ease: "power3.out" }, start + 0.3);
        tl.from(`${scene} .lead`, { y: 36, opacity: 0, duration: 0.54, ease: "power2.out" }, start + 0.58);
        tl.from(`${scene} .tag`, { y: 24, opacity: 0, scale: 0.94, duration: 0.42, stagger: 0.06, ease: "power2.out" }, start + 0.82);
        tl.to(`${scene} .image-panel img`, { y: -70, scale: 1.1, duration: Math.max(6, durations[index] - 1), ease: "none" }, start + 0.4);
      });

      captions.forEach((caption, index) => {
        const start = captionStarts[index];
        const duration = captionDurations[index];
        tl.to(caption, { opacity: 1, y: 0, duration: 0.16, ease: "power1.out" }, start);
        tl.to(caption, { opacity: 0, y: 14, duration: 0.16, ease: "power1.in" }, start + duration - 0.16);
      });

      chapters.forEach((chapter, index) => {
        const start = starts[index];
        const duration = durations[index];
        tl.to(chapter, { y: -8, scale: 1.04, duration: 0.18, ease: "power1.out" }, start);
        tl.set(chapter, { className: "chapter-tag active" }, start);
        tl.set(chapter, { className: "chapter-tag" }, start + duration - 0.1);
        tl.to(chapter, { y: 0, scale: 1, duration: 0.18, ease: "power1.in" }, start + duration - 0.28);
      });

      tl.to(".timeline-progress", { width: "100%", duration: rootDuration, ease: "none" }, 0);
      tl.from(".topbar", { y: -28, opacity: 0, duration: 0.5, ease: "power2.out" }, 0.1);
      tl.to(".glow-line", { scale: 1.18, rotation: 20, duration: rootDuration, ease: "none" }, 0);
      tl.to("#root", { opacity: 0, duration: 0.65, ease: "power2.in" }, Math.max(0, rootDuration - 0.75));
      window.__timelines["main"] = tl;
    </script>
  </body>
</html>
