<!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="#706bb4" />
    <title>Happy Birthday · 生日快乐，妈妈</title>
    <style>
      :root {
        --bg: #706bb4;
        --ink: #2b193d;
        --soft: rgba(43, 25, 61, 0.68);
        --line: rgba(43, 25, 61, 0.32);
        --panel: rgba(255, 255, 255, 0.09);
        --pad: clamp(22px, 6vw, 72px);
      }
      * {
        box-sizing: border-box;
      }
      html {
        background: var(--bg);
      }
      body {
        margin: 0;
        color: var(--ink);
        background: var(--bg);
        font-family:
          'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      body:before {
        content: '';
        position: fixed;
        inset: 0;
        pointer-events: none;
        z-index: 20;
        opacity: 0.23;
        mix-blend-mode: soft-light;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' seed='18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.55'/%3E%3C/svg%3E");
      }
      .paper {
        min-height: 100svh;
        overflow: hidden;
      }
      main {
        max-width: 1200px;
        margin: auto;
        padding: calc(28px + env(safe-area-inset-top)) var(--pad)
          calc(46px + env(safe-area-inset-bottom));
      }
      .mast {
        display: flex;
        justify-content: space-between;
        font-size: 11px;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }
      .hero {
        min-height: 72svh;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 15vh 0 8vh;
      }
      .kicker,
      .story-no {
        font-size: 11px;
        letter-spacing: 0.17em;
        color: var(--soft);
      }
      .hero-title-row {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 32px;
        margin-top: 18px;
      }
      h1 {
        display: grid;
        gap: 12px;
        margin: 0;
        color: #fff;
        line-height: 0.92;
      }
      .pearl-title {
        font-family: Didot, 'Bodoni 72', 'Times New Roman', serif;
        font-size: clamp(50px, 9.6vw, 116px);
        font-style: italic;
        font-weight: 700;
        letter-spacing: -0.055em;
        color: transparent;
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.82);
        background-image: radial-gradient(
          circle,
          #fff 0 29%,
          #e3e1f2 33% 47%,
          rgba(255, 255, 255, 0.24) 50% 58%,
          transparent 61%
        );
        background-size: 8px 8px;
        -webkit-background-clip: text;
        background-clip: text;
        filter: drop-shadow(0 4px 12px rgba(53, 35, 91, 0.24));
      }
      .cn-title {
        font-family: 'Songti SC', 'STSong', serif;
        font-size: clamp(38px, 6.8vw, 82px);
        font-weight: 500;
        letter-spacing: -0.045em;
      }
      .birthday-date {
        flex: 0 0 auto;
        padding-bottom: 7px;
        color: rgba(255, 255, 255, 0.86);
        font-size: 12px;
        letter-spacing: 0.18em;
      }
      .hero-foot {
        display: flex;
        justify-content: space-between;
        gap: 24px;
        margin-top: 34px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
      }
      .hero-foot p {
        margin: 0;
        color: var(--soft);
        line-height: 1.8;
      }
      .album {
        padding: 72px 0;
      }
      .section-top {
        display: flex;
        justify-content: space-between;
        align-items: end;
        margin-bottom: 36px;
      }
      .section-top h2 {
        margin: 0;
        font-size: clamp(32px, 5vw, 58px);
        font-weight: 500;
        letter-spacing: -0.05em;
      }
      .editor-bar {
        position: sticky;
        top: 12px;
        z-index: 10;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
        margin-bottom: 42px;
      }
      .autosave {
        align-self: center;
        margin-right: auto;
        color: var(--soft);
        font-size: 11px;
        letter-spacing: 0.06em;
      }
      .btn {
        appearance: none;
        border: 1px solid var(--line);
        background: rgba(112, 107, 180, 0.88);
        color: var(--ink);
        min-height: 44px;
        padding: 10px 15px;
        font: 500 13px inherit;
        cursor: pointer;
      }
      .btn.primary {
        background: var(--ink);
        color: #b9b4df;
      }
      .stories {
        display: flex;
        flex-direction: column;
        gap: clamp(90px, 14vw, 180px);
      }
      .story {
        display: grid;
        grid-template-columns: minmax(0, 1.08fr) minmax(260px, 0.92fr);
        gap: clamp(28px, 7vw, 92px);
        align-items: center;
      }
      .story:nth-child(even) .photo-wrap {
        order: 2;
      }
      .story:nth-child(even) .copy {
        order: 1;
      }
      .photo-wrap {
        min-width: 0;
      }
      .gallery {
        display: flex;
        align-items: center;
        gap: 14px;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
        cursor: grab;
      }
      .gallery.is-dragging {
        cursor: grabbing;
      }
      .gallery::-webkit-scrollbar {
        display: none;
      }
      .photo-card {
        display: block;
        flex: 0 0 auto;
        position: relative;
        scroll-snap-align: center;
        width: 56%;
        transition: width 260ms ease;
      }
      .photo-card.size-small {
        width: 34%;
      }
      .photo-card.size-large {
        width: 76%;
      }
      .photo-card.size-hero {
        width: 92%;
      }
      .memory-photo {
        display: block;
        width: 100%;
        height: 100%;
        cursor: zoom-in;
      }
      .mode-natural .photo-card {
        width: auto;
        max-width: 92%;
      }
      .mode-natural .memory-photo {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 76vh;
        object-fit: contain;
      }
      .mode-natural .size-small .memory-photo {
        max-height: 32vh;
      }
      .mode-natural .size-medium .memory-photo {
        max-height: 48vh;
      }
      .mode-natural .size-large .memory-photo {
        max-height: 64vh;
      }
      .mode-landscape .photo-card {
        aspect-ratio: 4/3;
      }
      .mode-square .photo-card {
        aspect-ratio: 1;
      }
      .mode-circle {
        gap: 18px;
        padding: 10px 2px 18px;
      }
      .mode-circle .photo-card {
        width: clamp(132px, 31%, 210px);
        aspect-ratio: 1;
        border-radius: 50%;
        overflow: hidden;
      }
      .mode-circle .size-small {
        width: 110px;
      }
      .mode-circle .size-large {
        width: 240px;
      }
      .mode-circle .size-hero {
        width: 290px;
      }
      .mode-landscape .memory-photo,
      .mode-square .memory-photo,
      .mode-circle .memory-photo,
      .mode-stack .memory-photo {
        object-fit: cover;
      }
      .mode-stack {
        gap: 0;
        padding: 44px 0 54px;
        scroll-padding-inline: 24%;
        scroll-snap-type: x mandatory;
      }
      .mode-stack::before,
      .mode-stack::after,
      .mode-deck::before,
      .mode-deck::after {
        content: '';
        flex: 0 0 24%;
      }
      .mode-stack .photo-card {
        width: min(76%, 430px);
        aspect-ratio: 4/3;
        margin-right: -15%;
        padding: 10px 10px 48px;
        border: 0;
        background: var(--frame-color, #f2efe2);
        box-shadow: 0 18px 42px rgba(43, 25, 61, 0.22);
        filter: saturate(0.72) brightness(0.88);
        opacity: 0.74;
        transform: rotate(-3deg) scale(0.88);
        transition:
          transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
          filter 300ms ease,
          opacity 300ms ease,
          box-shadow 300ms ease;
      }
      .mode-stack .size-small {
        width: 48%;
      }
      .mode-stack .size-large {
        width: 84%;
      }
      .mode-stack .size-hero {
        width: 94%;
      }
      .mode-stack .photo-card:nth-child(even) {
        transform: rotate(3deg) translateY(10px) scale(0.88);
      }
      .mode-stack .photo-card.is-active {
        z-index: 4;
        filter: none;
        opacity: 1;
        transform: rotate(0) translateY(-8px) scale(1.08);
        box-shadow: 0 25px 58px rgba(43, 25, 61, 0.32);
      }
      .mode-stack .photo-card:last-child {
        margin-right: 0;
      }
      .mode-deck {
        min-height: clamp(360px, 48vw, 560px);
        align-items: center;
        gap: 0;
        padding: 54px 0 66px;
        scroll-padding-inline: 28%;
        perspective: 1100px;
        perspective-origin: 50% 45%;
        scroll-snap-type: x mandatory;
      }
      .mode-deck .photo-card {
        width: min(64%, 350px);
        aspect-ratio: 3/4;
        margin-right: -38%;
        overflow: hidden;
        border: 7px solid var(--frame-color, #f2efe2);
        background: var(--frame-color, #f2efe2);
        box-shadow: 14px 18px 35px rgba(43, 25, 61, 0.2);
        filter: saturate(0.72) brightness(0.8);
        opacity: 0.68;
        transform: rotateY(-48deg) translateZ(-90px) scale(0.88);
        transform-origin: center right;
        transition:
          transform 380ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 280ms ease,
          opacity 280ms ease,
          box-shadow 280ms ease;
      }
      .mode-deck .size-small {
        width: 42%;
      }
      .mode-deck .size-large {
        width: 74%;
      }
      .mode-deck .size-hero {
        width: 84%;
      }
      .mode-deck .photo-card:nth-child(even) {
        transform: rotateY(-38deg) translateY(22px) translateZ(-60px) scale(0.9);
      }
      .mode-deck .photo-card:last-child {
        margin-right: 0;
      }
      .mode-deck .memory-photo {
        object-fit: cover;
      }
      .mode-deck .photo-card.is-active {
        z-index: 8;
        filter: none;
        opacity: 1;
        transform: rotateY(0) translate3d(20px, -18px, 150px) scale(1.13);
        box-shadow: 28px 32px 70px rgba(43, 25, 61, 0.34);
      }
      .gallery-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 14px;
        margin-top: -2px;
      }
      .gallery-nav button {
        width: 38px;
        height: 38px;
        padding: 0;
        border-radius: 50%;
      }
      .gallery-position {
        min-width: 52px;
        text-align: center;
        font-size: 11px;
        letter-spacing: 0.12em;
      }
      .page-ripple {
        position: fixed;
        z-index: 30;
        width: 18px;
        height: 18px;
        border: 1px solid rgba(255, 255, 255, 0.78);
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.15);
        animation: page-ripple 900ms cubic-bezier(0.12, 0.72, 0.22, 1) forwards;
        box-shadow: 0 0 22px rgba(255, 255, 255, 0.4);
      }
      .page-ripple::after {
        content: '';
        position: absolute;
        inset: 28%;
        border: 1px solid rgba(255, 255, 255, 0.66);
        border-radius: inherit;
      }
      @keyframes page-ripple {
        70% {
          opacity: 0.58;
        }
        to {
          opacity: 0;
          transform: translate(-50%, -50%) scale(8);
        }
      }
      @media (hover: hover) and (pointer: fine) {
        .mode-deck .photo-card:hover {
          z-index: 10;
          filter: none;
          opacity: 1;
          transform: rotateY(0) translate3d(24px, -24px, 180px) scale(1.16);
          box-shadow: 32px 36px 78px rgba(43, 25, 61, 0.38);
        }
      }
      .photo-card.is-selected {
        outline: 2px solid var(--ink);
        outline-offset: 4px;
      }
      .gallery.crop-active {
        overflow: hidden;
        scroll-snap-type: none;
      }
      .photo-card.cropping .memory-photo {
        cursor: move;
        touch-action: none;
      }
      .empty-photo {
        min-height: 360px;
        border: 1px solid var(--line);
        background: var(--panel);
        display: grid;
        place-items: center;
        padding: 24px;
        text-align: center;
      }
      .copy {
        min-width: 0;
      }
      .story-no {
        display: block;
        margin-bottom: 28px;
      }
      .copy time {
        display: block;
        margin-bottom: 18px;
        font-size: 13px;
        letter-spacing: 0.07em;
      }
      .copy p {
        margin: 0;
        max-width: var(--text-width, 100%);
        font-size: var(--text-size, 28px);
        line-height: var(--text-leading, 1.65);
        letter-spacing: -0.018em;
        text-align: var(--text-align, left);
        white-space: pre-wrap;
      }
      .edit-fields {
        display: grid;
        gap: 10px;
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid var(--line);
      }
      .edit-fields input,
      .edit-fields textarea {
        width: 100%;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.08);
        color: var(--ink);
        padding: 12px;
        font: 14px/1.55 inherit;
        border-radius: 0;
      }
      .edit-fields textarea {
        min-height: 112px;
        resize: vertical;
      }
      .type-controls {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        padding: 14px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.06);
      }
      .type-control {
        display: grid;
        gap: 7px;
        color: var(--soft);
        font-size: 11px;
        letter-spacing: 0.08em;
      }
      .type-control output {
        float: right;
        color: var(--ink);
      }
      .type-control input,
      .type-control select {
        width: 100%;
        min-height: 32px;
        accent-color: var(--ink);
      }
      .type-control select {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.08);
        color: var(--ink);
        padding: 5px 8px;
        font: 12px inherit;
      }
      .file-label {
        display: block;
        text-align: center;
      }
      .photo-options {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
      }
      .photo-options select {
        width: 100%;
        min-height: 44px;
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.08);
        color: var(--ink);
        padding: 9px 12px;
        font: 13px inherit;
      }
      .photo-list {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
      }
      .photo-editor {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        padding: 12px;
        border: 1px dashed var(--line);
      }
      .photo-editor label {
        display: grid;
        gap: 6px;
        color: var(--soft);
        font-size: 11px;
      }
      .photo-editor select,
      .photo-editor input {
        width: 100%;
        min-height: 38px;
        accent-color: var(--ink);
      }
      .photo-editor select {
        border: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.08);
        color: var(--ink);
        padding: 7px;
      }
      .crop-help {
        grid-column: 1/-1;
        margin: 0;
        color: var(--soft);
        font-size: 11px;
      }
      .photo-chip {
        border: 1px solid var(--line);
        background: transparent;
        color: var(--soft);
        min-height: 36px;
        padding: 7px 10px;
        font: 12px inherit;
        cursor: pointer;
      }
      .save-note {
        min-height: 18px;
        margin: 0;
        color: var(--soft);
        font-size: 11px;
      }
      .swipe-hint {
        width: min(84%, 420px);
        margin: 10px auto 0;
        padding-top: 9px;
        border-top: 1px dashed var(--line);
        color: var(--soft);
        text-align: center;
        font-size: 10px;
        letter-spacing: 0.12em;
      }
      .lightbox {
        width: 100vw;
        max-width: none;
        height: 100vh;
        max-height: none;
        margin: 0;
        padding: 24px;
        border: 0;
        background: rgba(24, 15, 35, 0.94);
        color: #f2efe2;
      }
      .lightbox::backdrop {
        background: rgba(24, 15, 35, 0.82);
      }
      .lightbox-inner {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        width: 100%;
        height: 100%;
        gap: 18px;
      }
      .lightbox-bar,
      .lightbox-actions,
      .lightbox-nav {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .lightbox-bar {
        justify-content: space-between;
      }
      .lightbox .btn {
        border-color: rgba(242, 239, 226, 0.38);
        background: transparent;
        color: #f2efe2;
        text-decoration: none;
      }
      .lightbox-img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        object-fit: contain;
      }
      .lightbox-nav {
        justify-content: center;
      }
      .viewer .editor-bar,
      .viewer .edit-fields,
      .viewer .empty-photo {
        display: none;
      }
      .viewer .copy time.is-empty,
      .viewer .copy p.is-empty,
      .viewer .copy.is-empty {
        display: none;
      }
      .viewer .story:has(.copy.is-empty) {
        grid-template-columns: minmax(0, 1fr);
      }
      .viewer .story:has(.copy.is-empty) .photo-wrap {
        width: min(100%, 820px);
        margin: auto;
      }
      footer {
        display: flex;
        justify-content: space-between;
        margin-top: 90px;
        padding-top: 18px;
        border-top: 1px solid var(--line);
        font-size: 11px;
        color: var(--soft);
      }
      @media (max-width: 640px) {
        main {
          padding-left: 20px;
          padding-right: 20px;
        }
        .hero {
          min-height: 76svh;
          padding: 100px 0 48px;
        }
        h1 {
          font-size: clamp(56px, 19vw, 82px);
        }
        .hero-foot {
          display: block;
        }
        .hero-title-row {
          align-items: start;
          gap: 16px;
        }
        .pearl-title {
          font-size: clamp(44px, 14vw, 68px);
        }
        .cn-title {
          font-size: clamp(34px, 10vw, 52px);
        }
        .birthday-date {
          padding-top: 8px;
          font-size: 9px;
        }
        .story {
          grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
          gap: 17px;
          align-items: center;
        }
        .story:nth-child(even) .photo-wrap {
          order: 2;
        }
        .story:nth-child(even) .copy {
          order: 1;
        }
        .photo-card {
          max-height: 62vh;
        }
        .mode-circle .photo-card {
          width: clamp(92px, 42%, 150px);
        }
        .mode-stack {
          padding: 36px 0 48px;
        }
        .mode-stack .photo-card {
          width: 90%;
        }
        .mode-deck {
          min-height: 390px;
          padding: 42px 0 56px;
          perspective: 850px;
        }
        .mode-deck .photo-card {
          width: 78%;
          margin-right: -44%;
        }
        .photo-editor {
          grid-template-columns: 1fr;
        }
        .empty-photo {
          min-height: 280px;
        }
        .copy p {
          font-size: min(var(--text-size, 22px), 5vw);
        }
        .copy time {
          font-size: 10px;
        }
        .story-no {
          margin-bottom: 18px;
        }
        .editor-bar {
          justify-content: stretch;
        }
        .autosave {
          flex: 0 0 100%;
        }
        .editor-bar .btn {
          flex: 1;
        }
        .edit-fields {
          grid-column: 1/-1;
        }
        .type-controls {
          grid-template-columns: 1fr;
        }
        .photo-options {
          grid-template-columns: 1fr;
        }
        .stories {
          gap: 92px;
        }
      }
    </style>
  </head>
  <body>
    <div class="paper">
      <main>
        <header class="mast">
          <span>A little album, made with love</span><span>✳</span>
        </header>
        <section class="hero">
          <span class="kicker">FOR MOM · 2026</span>
          <div class="hero-title-row">
            <h1>
              <span class="pearl-title">Happy Birthday</span
              ><span class="cn-title">生日快乐，妈妈</span>
            </h1>
            <time class="birthday-date">2026.9.6</time>
          </div>
          <div class="hero-foot">
            <p>
              这里会放下我们想珍藏的时光。<br />一张照片，一段想对你说的话。
            </p>
            <span>06 · 09</span>
          </div>
        </section>
        <section class="album">
          <div class="section-top">
            <h2>我们的时光</h2>
            <span id="count">01</span>
          </div>
          <div class="editor-bar">
            <span class="autosave" id="autosave">自动保存到此浏览器</span>
            <button class="btn" id="add">＋ 添加一段回忆</button
            ><button class="btn" id="backup">导出备份</button
            ><label class="btn"
              >导入备份<input
                id="restore"
                type="file"
                accept="application/json"
                hidden /></label
            ><button class="btn primary" id="mode">预览成品</button>
          </div>
          <div class="stories" id="stories"></div>
        </section>
        <footer><span>给世界上最好的妈妈</span><span>♡</span></footer>
      </main>
    </div>
    <dialog class="lightbox" id="lightbox">
      <div class="lightbox-inner">
        <div class="lightbox-bar">
          <span id="lightbox-count"></span>
          <div class="lightbox-actions">
            <a class="btn" id="download-photo" download>下载当前照片</a>
            <button class="btn" id="close-lightbox" type="button">关闭</button>
          </div>
        </div>
        <img class="lightbox-img" id="lightbox-img" alt="照片大图预览" />
        <div class="lightbox-nav">
          <button class="btn" id="previous-photo" type="button">
            ← 上一张
          </button>
          <button class="btn" id="next-photo" type="button">下一张 →</button>
        </div>
      </div>
    </dialog>
    <script>
      const KEY = 'mom-album-draft-v2';
      const seed = [
        {
          date: '2005年10月24日',
          text: '谢谢你把我生下来，让我从此在这个世界上开始感受',
          src: 'assets/2005-10-24.jpg',
          mode: 'natural',
          style: {
            size: 28,
            leading: 1.65,
            width: 100,
            align: 'left',
            vertical: 'center',
          },
        },
      ];
      let data;
      try {
        data = JSON.parse(localStorage.getItem(KEY)) || seed;
      } catch {
        data = seed;
      }
      const root = document.querySelector('#stories'),
        count = document.querySelector('#count'),
        autosave = document.querySelector('#autosave');
      const defaults = {
        size: 28,
        leading: 1.65,
        width: 100,
        align: 'left',
        vertical: 'center',
      };
      const validModes = new Set([
        'natural',
        'landscape',
        'square',
        'circle',
        'stack',
        'deck',
      ]);
      function normalizePhoto(photo) {
        const value = typeof photo === 'string' ? { src: photo } : photo || {};
        return {
          src: value.src || '',
          size: ['small', 'medium', 'large', 'hero'].includes(value.size)
            ? value.size
            : 'medium',
          x: Number.isFinite(value.x) ? value.x : 50,
          y: Number.isFinite(value.y) ? value.y : 50,
          sound: ['none', 'soft', 'chime', 'shutter'].includes(value.sound)
            ? value.sound
            : 'soft',
          frame: /^#[0-9a-f]{6}$/i.test(value.frame || '')
            ? value.frame
            : '#f2efe2',
        };
      }
      data = data.map((item) => ({
        ...item,
        photos:
          Array.isArray(item.photos) && item.photos.length
            ? item.photos.map(normalizePhoto)
            : item.src
              ? [normalizePhoto(item.src)]
              : [],
        mode: validModes.has(item.mode) ? item.mode : 'natural',
        style: { ...defaults, ...(item.style || {}) },
      }));
      function save() {
        try {
          localStorage.setItem(KEY, JSON.stringify(data));
          autosave.textContent = `已自动保存 · ${new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })}`;
          return true;
        } catch {
          autosave.textContent = '保存空间不足，请立即导出备份';
          return false;
        }
      }
      const lightbox = document.querySelector('#lightbox');
      const lightboxImg = document.querySelector('#lightbox-img');
      const lightboxCount = document.querySelector('#lightbox-count');
      const downloadPhoto = document.querySelector('#download-photo');
      let previewPhotos = [];
      let previewIndex = 0;
      function showPreview(index) {
        previewIndex = (index + previewPhotos.length) % previewPhotos.length;
        const src = previewPhotos[previewIndex].src;
        lightboxImg.src = src;
        downloadPhoto.href = src;
        downloadPhoto.download = `妈妈的生日相册-${previewIndex + 1}.jpg`;
        lightboxCount.textContent = `${previewIndex + 1} / ${previewPhotos.length}`;
      }
      function openPreview(photos, index) {
        previewPhotos = photos;
        showPreview(index);
        lightbox.showModal();
      }
      document.querySelector('#close-lightbox').onclick = () =>
        lightbox.close();
      document.querySelector('#previous-photo').onclick = () =>
        showPreview(previewIndex - 1);
      document.querySelector('#next-photo').onclick = () =>
        showPreview(previewIndex + 1);
      lightbox.addEventListener('click', (event) => {
        if (event.target === lightbox) lightbox.close();
      });
      function resizePhoto(file) {
        return new Promise((resolve) => {
          const img = new Image();
          img.onload = () => {
            const max = 1400;
            const scale = Math.min(1, max / Math.max(img.width, img.height));
            const canvas = document.createElement('canvas');
            canvas.width = Math.round(img.width * scale);
            canvas.height = Math.round(img.height * scale);
            canvas
              .getContext('2d')
              .drawImage(img, 0, 0, canvas.width, canvas.height);
            URL.revokeObjectURL(img.src);
            resolve(
              normalizePhoto({
                src: canvas.toDataURL('image/jpeg', 0.76),
              }),
            );
          };
          img.src = URL.createObjectURL(file);
        });
      }
      function photoMarkup(item, i) {
        return item.photos
          .map((photo, j) => {
            const src = photo.src;
            const safe =
              src.startsWith('data:image/') || src.startsWith('assets/')
                ? src
                : '';
            return safe
              ? `<div class="photo-card size-${photo.size}" data-photo="${j}" style="--frame-color:${photo.frame}"><img class="memory-photo" alt="回忆 ${i + 1} 的第 ${j + 1} 张照片" src="${safe}" style="object-position:${photo.x}% ${photo.y}%"></div>`
              : '';
          })
          .join('');
      }
      function playPhotoSound(kind) {
        if (kind === 'none') return;
        const AudioContext = window.AudioContext || window.webkitAudioContext;
        if (!AudioContext) return;
        const ctx = new AudioContext();
        const gain = ctx.createGain();
        gain.connect(ctx.destination);
        gain.gain.setValueAtTime(0.0001, ctx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.08, ctx.currentTime + 0.01);
        gain.gain.exponentialRampToValueAtTime(0.0001, ctx.currentTime + 0.22);
        if (kind === 'shutter') {
          const length = Math.floor(ctx.sampleRate * 0.12);
          const buffer = ctx.createBuffer(1, length, ctx.sampleRate);
          const channel = buffer.getChannelData(0);
          for (let n = 0; n < length; n++)
            channel[n] = (Math.random() * 2 - 1) * (1 - n / length);
          const source = ctx.createBufferSource();
          source.buffer = buffer;
          source.connect(gain);
          source.start();
        } else {
          const oscillator = ctx.createOscillator();
          oscillator.type = 'sine';
          oscillator.frequency.setValueAtTime(
            kind === 'chime' ? 620 : 330,
            ctx.currentTime,
          );
          oscillator.frequency.exponentialRampToValueAtTime(
            kind === 'chime' ? 880 : 280,
            ctx.currentTime + 0.18,
          );
          oscillator.connect(gain);
          oscillator.start();
          oscillator.stop(ctx.currentTime + 0.23);
        }
        setTimeout(() => ctx.close(), 350);
      }
      function render() {
        root.innerHTML = '';
        count.textContent = String(data.length).padStart(2, '0');
        data.forEach((item, i) => {
          const s = item.style;
          const el = document.createElement('article');
          el.className = 'story';
          const hasPhotos = item.photos.length > 0;
          const swipeHint =
            ['stack', 'deck'].includes(item.mode) && item.photos.length > 1;
          el.innerHTML = `<div class="photo-wrap"><div class="gallery mode-${item.mode}">${photoMarkup(item, i)}</div><p class="swipe-hint" style="${swipeHint ? '' : 'display:none'}">← 请左右滑动查看照片 →</p><div class="gallery-nav" style="${swipeHint ? '' : 'display:none'}"><button class="btn prev-gallery" type="button" aria-label="上一张">←</button><span class="gallery-position">1 / ${item.photos.length}</span><button class="btn next-gallery" type="button" aria-label="下一张">→</button></div><div class="empty-photo" style="${hasPhotos ? 'display:none' : ''}">还没有照片</div><div class="edit-fields"><div class="photo-options"><label class="file-label btn">＋ ${hasPhotos ? '继续添加照片' : '选择照片'}<input class="file" type="file" accept="image/*" multiple hidden></label><select class="photo-mode" aria-label="照片样式"><option value="natural">原比例自由排列</option><option value="landscape">横向方框</option><option value="square">正方形</option><option value="circle">圆形一排</option><option value="stack">拍立得叠放滑动</option><option value="deck">立体照片长廊</option></select></div><div class="photo-list"></div><div class="photo-editor" style="${hasPhotos ? '' : 'display:none'}"><label>照片大小<select class="photo-size"><option value="small">小图</option><option value="medium">中图</option><option value="large">大图</option><option value="hero">主图</option></select></label><label>相框颜色<input class="frame-color" type="color"></label><label>点击音效<select class="photo-sound"><option value="none">无音效</option><option value="soft">轻触</option><option value="chime">铃声</option><option value="shutter">快门</option></select></label><label>左右取景<input class="focus-x" type="range" min="0" max="100"></label><label>上下取景<input class="focus-y" type="range" min="0" max="100"></label><button class="btn crop-toggle" type="button">拖动调整取景</button><button class="btn remove-photo" type="button">移除选中照片</button><p class="crop-help">先选择一张照片，再调整大小、相框、音效或画面重点。</p></div><p class="save-note">点击照片可放大预览；每张照片都能单独编辑</p></div></div><div class="copy" style="align-self:${s.vertical}"><span class="story-no">MEMORY · ${String(i + 1).padStart(2, '0')}</span><time></time><p style="--text-size:${s.size}px;--text-leading:${s.leading};--text-width:${s.width}%;--text-align:${s.align}"></p><div class="edit-fields"><input class="date" placeholder="日期（可以留空）"><textarea class="text" placeholder="想说的话（可以留空）"></textarea><div class="type-controls"><label class="type-control"><span>字号 <output class="size-out">${s.size}px</output></span><input class="size" type="range" min="18" max="44" step="1" value="${s.size}"></label><label class="type-control"><span>行距 <output class="leading-out">${s.leading}</output></span><input class="leading" type="range" min="1.2" max="2" step="0.05" value="${s.leading}"></label><label class="type-control"><span>文字宽度 <output class="width-out">${s.width}%</output></span><input class="width" type="range" min="60" max="100" step="5" value="${s.width}"></label><label class="type-control"><span>对齐方式</span><select class="align"><option value="left">左对齐</option><option value="center">居中</option><option value="right">右对齐</option></select></label><label class="type-control"><span>上下位置</span><select class="vertical"><option value="start">靠上</option><option value="center">居中</option><option value="end">靠下</option></select></label><button class="btn reset-type" type="button">恢复舒适排版</button></div><button class="btn remove">删除这一段</button></div></div>`;
          const dateInput = el.querySelector('.date');
          const textInput = el.querySelector('.text');
          const displayText = el.querySelector('.copy p');
          dateInput.value = item.date || '';
          textInput.value = item.text || '';
          const displayDate = el.querySelector('time');
          const copy = el.querySelector('.copy');
          displayDate.textContent = item.date || '';
          displayText.textContent = item.text || '';
          const syncEmptyState = () => {
            displayDate.classList.toggle('is-empty', !item.date);
            displayText.classList.toggle('is-empty', !item.text);
            copy.classList.toggle('is-empty', !item.date && !item.text);
          };
          syncEmptyState();
          el.querySelector('.align').value = s.align;
          el.querySelector('.vertical').value = s.vertical;
          el.querySelector('.photo-mode').value = item.mode;
          const gallery = el.querySelector('.gallery');
          const galleryPhotos = [...gallery.querySelectorAll('.photo-card')];
          let selectedPhoto = 0;
          let activePhoto = 0;
          let cropEditing = false;
          const updateActivePhoto = () => {
            if (!galleryPhotos.length) return;
            const center = gallery.scrollLeft + gallery.clientWidth / 2;
            let closest = galleryPhotos[0];
            let distance = Infinity;
            galleryPhotos.forEach((photo) => {
              const nextDistance = Math.abs(
                photo.offsetLeft + photo.offsetWidth / 2 - center,
              );
              if (nextDistance < distance) {
                closest = photo;
                distance = nextDistance;
              }
            });
            galleryPhotos.forEach((card) =>
              card.classList.toggle('is-active', card === closest),
            );
            activePhoto = galleryPhotos.indexOf(closest);
            const position = el.querySelector('.gallery-position');
            if (position)
              position.textContent = `${activePhoto + 1} / ${galleryPhotos.length}`;
          };
          const showGalleryPhoto = (index) => {
            if (!galleryPhotos.length) return;
            activePhoto = (index + galleryPhotos.length) % galleryPhotos.length;
            const card = galleryPhotos[activePhoto];
            gallery.scrollTo({
              left:
                card.offsetLeft - (gallery.clientWidth - card.offsetWidth) / 2,
              behavior: 'smooth',
            });
          };
          el.querySelector('.prev-gallery')?.addEventListener('click', () =>
            showGalleryPhoto(activePhoto - 1),
          );
          el.querySelector('.next-gallery')?.addEventListener('click', () =>
            showGalleryPhoto(activePhoto + 1),
          );
          const sizeSelect = el.querySelector('.photo-size');
          const soundSelect = el.querySelector('.photo-sound');
          const frameColor = el.querySelector('.frame-color');
          const focusX = el.querySelector('.focus-x');
          const focusY = el.querySelector('.focus-y');
          const cropToggle = el.querySelector('.crop-toggle');
          const syncPhotoEditor = () => {
            if (!item.photos.length) return;
            const photo = item.photos[selectedPhoto];
            sizeSelect.value = photo.size;
            soundSelect.value = photo.sound;
            frameColor.value = photo.frame;
            focusX.value = photo.x;
            focusY.value = photo.y;
            galleryPhotos.forEach((card, index) => {
              card.classList.toggle('is-selected', index === selectedPhoto);
              card.classList.toggle(
                'cropping',
                cropEditing && index === selectedPhoto,
              );
            });
            gallery.classList.toggle('crop-active', cropEditing);
            cropToggle.textContent = cropEditing
              ? '完成取景调整'
              : '拖动调整取景';
          };
          galleryPhotos.forEach((card, photoIndex) => {
            card.addEventListener('pointerenter', (event) => {
              if (item.mode !== 'deck' || event.pointerType === 'touch') return;
              galleryPhotos.forEach((other) =>
                other.classList.toggle('is-active', other === card),
              );
            });
            card.addEventListener('pointerleave', () => {
              if (item.mode === 'deck') updateActivePhoto();
            });
            card.addEventListener('click', () => {
              if (gallery.dataset.dragged === 'true') {
                gallery.dataset.dragged = 'false';
                return;
              }
              selectedPhoto = photoIndex;
              syncPhotoEditor();
              playPhotoSound(item.photos[photoIndex].sound);
              if (!cropEditing) openPreview(item.photos, photoIndex);
            });
          });
          gallery.addEventListener('scroll', updateActivePhoto, {
            passive: true,
          });
          let dragStartX = 0;
          let dragStartScroll = 0;
          gallery.addEventListener('pointerdown', (event) => {
            if (cropEditing || event.pointerType === 'touch') return;
            dragStartX = event.clientX;
            dragStartScroll = gallery.scrollLeft;
            gallery.dataset.dragged = 'false';
            gallery.classList.add('is-dragging');
            gallery.setPointerCapture(event.pointerId);
          });
          gallery.addEventListener('pointermove', (event) => {
            if (!gallery.hasPointerCapture(event.pointerId)) return;
            const delta = event.clientX - dragStartX;
            if (Math.abs(delta) > 5) gallery.dataset.dragged = 'true';
            gallery.scrollLeft = dragStartScroll - delta;
          });
          gallery.addEventListener('pointerup', (event) => {
            if (gallery.hasPointerCapture(event.pointerId))
              gallery.releasePointerCapture(event.pointerId);
            gallery.classList.remove('is-dragging');
          });
          requestAnimationFrame(updateActivePhoto);
          const photoList = el.querySelector('.photo-list');
          item.photos.forEach((_, photoIndex) => {
            const chip = document.createElement('button');
            chip.className = 'photo-chip';
            chip.type = 'button';
            chip.textContent = `照片 ${photoIndex + 1}`;
            chip.addEventListener('click', () => {
              selectedPhoto = photoIndex;
              syncPhotoEditor();
            });
            photoList.appendChild(chip);
          });
          if (item.photos.length) {
            syncPhotoEditor();
            sizeSelect.addEventListener('change', (e) => {
              item.photos[selectedPhoto].size = e.target.value;
              save();
              render();
            });
            soundSelect.addEventListener('change', (e) => {
              item.photos[selectedPhoto].sound = e.target.value;
              save();
              playPhotoSound(e.target.value);
            });
            frameColor.addEventListener('input', (e) => {
              item.photos[selectedPhoto].frame = e.target.value;
              galleryPhotos[selectedPhoto].style.setProperty(
                '--frame-color',
                e.target.value,
              );
              save();
            });
            const updateFocus = () => {
              const photo = item.photos[selectedPhoto];
              photo.x = Number(focusX.value);
              photo.y = Number(focusY.value);
              galleryPhotos[selectedPhoto].querySelector(
                '.memory-photo',
              ).style.objectPosition = `${photo.x}% ${photo.y}%`;
              save();
            };
            focusX.addEventListener('input', updateFocus);
            focusY.addEventListener('input', updateFocus);
            cropToggle.addEventListener('click', () => {
              cropEditing = !cropEditing;
              syncPhotoEditor();
            });
            el.querySelector('.remove-photo').addEventListener('click', () => {
              item.photos.splice(selectedPhoto, 1);
              save();
              render();
            });
            galleryPhotos.forEach((card, photoIndex) => {
              const image = card.querySelector('.memory-photo');
              image.addEventListener('pointerdown', (event) => {
                if (!cropEditing || photoIndex !== selectedPhoto) return;
                event.preventDefault();
                image.setPointerCapture(event.pointerId);
                let lastX = event.clientX;
                let lastY = event.clientY;
                const move = (moveEvent) => {
                  const photo = item.photos[selectedPhoto];
                  photo.x = Math.max(
                    0,
                    Math.min(
                      100,
                      photo.x -
                        ((moveEvent.clientX - lastX) / card.clientWidth) * 100,
                    ),
                  );
                  photo.y = Math.max(
                    0,
                    Math.min(
                      100,
                      photo.y -
                        ((moveEvent.clientY - lastY) / card.clientHeight) * 100,
                    ),
                  );
                  lastX = moveEvent.clientX;
                  lastY = moveEvent.clientY;
                  focusX.value = photo.x;
                  focusY.value = photo.y;
                  image.style.objectPosition = `${photo.x}% ${photo.y}%`;
                };
                const up = () => {
                  image.removeEventListener('pointermove', move);
                  save();
                };
                image.addEventListener('pointermove', move);
                image.addEventListener('pointerup', up, { once: true });
              });
            });
          }
          const file = el.querySelector('.file');
          file.addEventListener('change', async () => {
            const files = [...file.files];
            if (!files.length) return;
            const note = el.querySelector('.save-note');
            note.textContent = '正在整理照片…';
            const added = await Promise.all(files.map(resizePhoto));
            item.photos.push(...added);
            if (!save()) {
              item.photos.splice(-added.length);
              note.textContent = '浏览器空间不足，请少选几张或分批添加。';
              return;
            }
            render();
          });
          el.querySelector('.photo-mode').addEventListener('change', (e) => {
            item.mode = e.target.value;
            save();
            render();
          });
          dateInput.addEventListener('input', (e) => {
            item.date = e.target.value;
            displayDate.textContent = item.date || '';
            syncEmptyState();
            save();
          });
          textInput.addEventListener('input', (e) => {
            item.text = e.target.value;
            displayText.textContent = item.text || '';
            syncEmptyState();
            save();
          });
          const updateStyle = () => {
            displayText.style.setProperty('--text-size', `${s.size}px`);
            displayText.style.setProperty('--text-leading', s.leading);
            displayText.style.setProperty('--text-width', `${s.width}%`);
            displayText.style.setProperty('--text-align', s.align);
            el.querySelector('.copy').style.alignSelf = s.vertical;
            el.querySelector('.size-out').textContent = `${s.size}px`;
            el.querySelector('.leading-out').textContent = s.leading;
            el.querySelector('.width-out').textContent = `${s.width}%`;
            save();
          };
          ['size', 'leading', 'width'].forEach((key) => {
            el.querySelector(`.${key}`).addEventListener('input', (e) => {
              s[key] = Number(e.target.value);
              updateStyle();
            });
          });
          ['align', 'vertical'].forEach((key) => {
            el.querySelector(`.${key}`).addEventListener('change', (e) => {
              s[key] = e.target.value;
              updateStyle();
            });
          });
          el.querySelector('.reset-type').addEventListener('click', () => {
            item.style = { ...defaults };
            save();
            render();
          });
          el.querySelector('.remove').addEventListener('click', () => {
            if (data.length > 1) {
              data.splice(i, 1);
              save();
              render();
            }
          });
          root.appendChild(el);
        });
      }
      document.querySelector('#add').onclick = () => {
        data.push({
          date: '',
          text: '',
          photos: [],
          mode: 'natural',
          style: { ...defaults },
        });
        save();
        render();
        setTimeout(
          () => root.lastElementChild.scrollIntoView({ behavior: 'smooth' }),
          50,
        );
      };
      document.querySelector('#mode').onclick = (e) => {
        document.body.classList.toggle('viewer');
        e.target.textContent = document.body.classList.contains('viewer')
          ? '继续编辑'
          : '预览成品';
      };
      document.querySelector('#backup').onclick = () => {
        const blob = new Blob([JSON.stringify({ version: 1, stories: data })], {
          type: 'application/json',
        });
        const link = document.createElement('a');
        link.href = URL.createObjectURL(blob);
        link.download = `妈妈生日相册备份-${new Date().toISOString().slice(0, 10)}.json`;
        link.click();
        setTimeout(() => URL.revokeObjectURL(link.href), 1000);
      };
      document
        .querySelector('#restore')
        .addEventListener('change', async (event) => {
          const file = event.target.files[0];
          if (!file) return;
          try {
            const backup = JSON.parse(await file.text());
            if (!Array.isArray(backup.stories)) throw new Error('invalid');
            if (!confirm('导入备份会替换当前浏览器中的相册内容，确定继续吗？'))
              return;
            data = backup.stories.map((item) => ({
              ...item,
              photos: Array.isArray(item.photos)
                ? item.photos.map(normalizePhoto)
                : item.src
                  ? [normalizePhoto(item.src)]
                  : [],
              mode: validModes.has(item.mode) ? item.mode : 'natural',
              style: { ...defaults, ...(item.style || {}) },
            }));
            if (!save()) throw new Error('storage');
            render();
          } catch {
            alert('这个文件不是可用的相册备份，或浏览器空间不足。');
          } finally {
            event.target.value = '';
          }
        });
      document.addEventListener('pointerdown', (event) => {
        if (
          event.button !== 0 ||
          event.target.closest('input, textarea, select, dialog')
        )
          return;
        const ripple = document.createElement('i');
        ripple.className = 'page-ripple';
        ripple.style.left = `${event.clientX}px`;
        ripple.style.top = `${event.clientY}px`;
        document.body.appendChild(ripple);
        ripple.addEventListener('animationend', () => ripple.remove(), {
          once: true,
        });
      });
      render();
    </script>
  </body>
</html>