index.html

<title>Mandy 弹窗情书</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@400;500;700&family=Ma+Shan+Zheng&display=swap">

<style>
  :root{
    --ground:#FFF3EE;
    --ground-2:#FFE3DA;
    --surface:#FFFFFF;
    --ink:#3A2130;
    --ink-soft:#8A6474;
    --line:#F2D9CF;
    --h-rose:224 75 103;
    --h-peach:235 145 78;
    --h-lilac:156 130 224;
    --h-mint:56 176 149;
    --on-hue:255 248 245;
    --focus:#E04B67;
    --shadow:58 33 48;

    --display:"ZCOOL KuaiLe","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --body:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    --script:"Ma Shan Zheng","STKaiti","KaiTi",serif;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      --ground:#1E141B;
      --ground-2:#2C1B26;
      --surface:#2F2029;
      --ink:#FBEBE6;
      --ink-soft:#C6A5B1;
      --line:#46303D;
      --h-rose:255 126 147;
      --h-peach:255 178 115;
      --h-lilac:192 168 255;
      --h-mint:111 211 185;
      --on-hue:42 22 32;
      --focus:#FF7E93;
      --shadow:8 3 6;
    }
  }
  :root[data-theme="dark"]{
    --ground:#1E141B;
    --ground-2:#2C1B26;
    --surface:#2F2029;
    --ink:#FBEBE6;
    --ink-soft:#C6A5B1;
    --line:#46303D;
    --h-rose:255 126 147;
    --h-peach:255 178 115;
    --h-lilac:192 168 255;
    --h-mint:111 211 185;
    --on-hue:42 22 32;
    --focus:#FF7E93;
    --shadow:8 3 6;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    overflow:hidden;
    font-family:var(--body);
    color:var(--ink);
    background:var(--ground);
    background-image:radial-gradient(120% 90% at 50% 0%, var(--ground-2) 0%, var(--ground) 62%);
    -webkit-font-smoothing:antialiased;
  }
  button{font:inherit;color:inherit;cursor:pointer}
  :focus-visible{outline:2.5px solid var(--focus);outline-offset:3px;border-radius:8px}

  #sky{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

  /* ---------- intro ---------- */
  #intro{
    position:fixed;inset:0;z-index:5;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:18px;padding:32px 24px;text-align:center;
    transition:opacity .5s ease, transform .5s ease;
  }
  #intro.gone{opacity:0;transform:scale(.96);pointer-events:none}
  .eyebrow{
    margin:0;font-size:.72rem;letter-spacing:.34em;text-transform:uppercase;
    color:rgb(var(--h-rose));font-weight:700;
  }
  #intro h1{
    margin:0;font-family:var(--display);font-weight:400;
    font-size:clamp(2rem,7.2vw,3.6rem);line-height:1.32;text-wrap:balance;
    letter-spacing:.02em;
  }
  #intro h1 em{font-style:normal;color:rgb(var(--h-rose))}
  .sub{margin:0;max-width:30ch;color:var(--ink-soft);font-size:1rem;line-height:1.7}
  #start{
    margin-top:6px;
    border:none;border-radius:999px;
    padding:16px 40px;
    font-family:var(--display);font-size:1.22rem;letter-spacing:.06em;
    color:rgb(var(--on-hue));
    background:linear-gradient(135deg, rgb(var(--h-rose)), rgb(var(--h-peach)));
    box-shadow:0 14px 30px -12px rgb(var(--h-rose) / .85);
    transition:transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
  }
  #start:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 20px 38px -14px rgb(var(--h-rose) / .9)}
  #start:active{transform:translateY(0) scale(.98)}
  .hint{margin:2px 0 0;font-size:.82rem;color:var(--ink-soft);opacity:.85}

  /* ---------- windows ---------- */
  #windows{position:fixed;inset:0;z-index:10;pointer-events:none}
  .win{
    position:absolute;pointer-events:auto;
    width:calc(clamp(206px,44vw,276px) * var(--ws,1));
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    transform:rotate(var(--rot)) scale(.55);
    opacity:0;
    box-shadow:0 14px 30px -12px rgb(var(--h) / .6), 0 2px 6px -2px rgb(var(--shadow) / .12);
    transition:opacity .34s ease, transform .42s cubic-bezier(.34,1.42,.64,1);
    will-change:transform,opacity;
  }
  .win.in{opacity:1;transform:rotate(var(--rot)) scale(1)}
  .win.out{opacity:0;transform:rotate(var(--rot)) scale(.5) translateY(10px);transition-duration:.28s}
  .win.dragging{transition:none;cursor:grabbing}

  .bar{
    display:flex;align-items:center;gap:8px;
    padding:8px 8px 8px 12px;
    background:rgb(var(--h));
    color:rgb(var(--on-hue));
    cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .win.dragging .bar{cursor:grabbing}
  .bar .heart{font-size:.9rem;line-height:1;opacity:.9}
  .bar .name{
    flex:1;min-width:0;
    font-size:.74rem;font-weight:500;letter-spacing:.09em;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    opacity:.95;
  }
  .bar .x{
    flex:none;width:22px;height:22px;padding:0;
    display:grid;place-items:center;
    border:none;border-radius:7px;
    font-size:.9rem;line-height:1;
    color:rgb(var(--on-hue));
    background:rgb(var(--on-hue) / .16);
    transition:background .16s ease,transform .16s ease;
  }
  .bar .x:hover{background:rgb(var(--on-hue) / .34);transform:scale(1.1)}

  .msg{
    margin:0;padding:20px 18px 22px;
    font-family:var(--display);font-weight:400;
    font-size:1.12rem;line-height:1.66;letter-spacing:.02em;
    text-wrap:balance;
  }

  /* ---------- dock ---------- */
  #dock{
    position:fixed;z-index:200;
    left:50%;bottom:22px;transform:translate(-50%,140%);
    display:flex;align-items:center;gap:14px;
    padding:9px 9px 9px 20px;
    background:var(--surface);
    border:1.5px solid var(--line);
    border-radius:999px;
    box-shadow:0 18px 40px -16px rgb(var(--shadow) / .45);
    transition:transform .5s cubic-bezier(.34,1.3,.64,1);
  }
  #dock.up{transform:translate(-50%,0)}
  #count{font-size:.86rem;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
  #count b{color:var(--ink);font-weight:700}
  #closeAll{
    border:none;border-radius:999px;
    padding:11px 22px;white-space:nowrap;
    font-size:.9rem;font-weight:700;letter-spacing:.04em;
    color:rgb(var(--on-hue));
    background:rgb(var(--h-rose));
    transition:transform .18s ease, filter .18s ease;
  }
  #closeAll:hover{transform:translateY(-2px);filter:brightness(1.06)}
  #closeAll:active{transform:translateY(0)}

  /* ---------- finale ---------- */
  #finale{
    position:fixed;inset:0;z-index:300;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:26px;padding:32px 24px;text-align:center;
    background:radial-gradient(120% 90% at 50% 40%, var(--ground-2) 0%, var(--ground) 70%);
    opacity:0;pointer-events:none;
    transition:opacity .7s ease;
  }
  #finale.show{opacity:1;pointer-events:auto}
  #finale .seal{
    font-size:2.4rem;line-height:1;
    animation:beat 1.9s ease-in-out infinite;
  }
  @keyframes beat{0%,100%{transform:scale(1)}14%{transform:scale(1.16)}28%{transform:scale(1)}42%{transform:scale(1.1)}}
  #finale p.line{
    margin:0;font-family:var(--script);
    font-size:clamp(2.1rem,8.4vw,4.2rem);line-height:1.4;
    color:var(--ink);text-wrap:balance;
  }
  #finale .from{margin:0;font-size:.86rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-soft)}
  #again{
    border:1.5px solid var(--line);border-radius:999px;
    padding:13px 30px;background:var(--surface);
    font-size:.92rem;font-weight:500;letter-spacing:.06em;color:var(--ink);
    transition:transform .18s ease,border-color .18s ease;
  }
  #again:hover{transform:translateY(-2px);border-color:rgb(var(--h-rose))}

  @media (max-width:560px){
    .win{width:calc(clamp(188px,50vw,242px) * var(--ws,1))}
    .msg{padding:13px 14px 15px;font-size:1rem;line-height:1.55}
    .bar{padding:6px 6px 6px 10px}
    .bar .name{font-size:.7rem}
    #dock{bottom:14px;gap:10px;padding-left:16px}
  }

  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  }
</style>

<canvas id="sky" aria-hidden="true"></canvas>

<section id="intro">
  <p class="eyebrow">for mandy &#9829;</p>
  <h1>有 <em>17</em> 句话<br>想一起跳出来找你</h1>
  <p class="sub">按一下，它们会挤满整个屏幕。每个都能拖着走，也能一键全部关掉。</p>
  <button id="start" type="button">点我 &#128140;</button>
  <p class="hint">建议在电脑或手机浏览器里打开</p>
</section>

<div id="windows"></div>

<div id="dock">
  <span id="count">还剩 <b>0</b> 个窗口</span>
  <button id="closeAll" type="button">全部关掉</button>
</div>

<section id="finale">
  <div class="seal">&#128149;</div>
  <p class="line">老婆我会永远爱着你</p>
  <p class="from">always &amp; forever</p>
  <button id="again" type="button">再来一次</button>
</section>

<script>
(function(){
  "use strict";

  var LINES = [
    "Mandy 老婆要早点睡觉",
    "我喜欢老婆",
    "我爱老婆",
    "Mandy 是我这辈子一定要守护的可爱老婆",
    "老婆要多喝水多休息",
    "老婆新学期加油",
    "老婆最厉害",
    "特别特别爱老婆",
    "我申请完第一件事就是宠老婆",
    "爱你老婆",
    "老婆学习加油",
    "我将永远听老婆的话",
    "我是老婆永远的小狗狗",
    "我喜欢我的老婆",
    "老婆说话最重要",
    "我要永远守护老婆",
    "老婆我会永远爱着你"
  ];
  var HUES = ["rose","peach","lilac","mint"];

  var stage   = document.getElementById("windows");
  var intro   = document.getElementById("intro");
  var dock    = document.getElementById("dock");
  var countEl = document.getElementById("count").querySelector("b");
  var finale  = document.getElementById("finale");
  var reduced = matchMedia("(prefers-reduced-motion: reduce)").matches;

  var wins = [];
  var top_z = 100;
  var timers = [];
  var order = [];
  var running = false;

  function clearTimers(){ timers.forEach(clearTimeout); timers = []; }
  function later(fn, ms){ timers.push(setTimeout(fn, ms)); }

  function updateCount(){
    var n = wins.filter(function(w){ return w.alive; }).length;
    countEl.textContent = n;
    return n;
  }

  /* ---- shuffled cells + heavy jitter: windows land all over, never in reading order ---- */
  function shuffle(n){
    var a = [], i, j, t;
    for (i = 0; i < n; i++) a.push(i);
    for (i = n - 1; i > 0; i--){
      j = Math.floor(Math.random() * (i + 1));
      t = a[i]; a[i] = a[j]; a[j] = t;
    }
    return a;
  }

  /* ---- every line shows up 2-3 times, shuffled, closer kept for last ---- */
  function buildDeck(){
    /* a laptop can carry 2-3 copies of everything; a phone screen drowns in that */
    var roomy = window.innerWidth >= 900;
    var base  = roomy ? 2 : 1;
    var deck = [], i, k, reps;
    for (i = 0; i < LINES.length; i++){
      reps = base + Math.floor(Math.random() * 2);
      for (k = 0; k < reps; k++) deck.push(LINES[i]);
    }

    var idx = shuffle(deck.length), out = [], i2;
    for (i2 = 0; i2 < idx.length; i2++) out.push(deck[idx[i2]]);

    /* nudge apart any two copies that landed back to back */
    var a, b;
    for (a = 1; a < out.length; a++){
      if (out[a] !== out[a - 1]) continue;
      for (b = a + 2; b < out.length; b++){
        if (out[b] === out[a] || out[b] === out[a - 1]) continue;
        if (out[b - 1] === out[a] || (out[b + 1] && out[b + 1] === out[a])) continue;
        var t = out[a]; out[a] = out[b]; out[b] = t;
        break;
      }
    }

    /* the closing line is the last thing she sees */
    var last = LINES[LINES.length - 1];
    var at = out.lastIndexOf(last);
    if (at > -1 && at !== out.length - 1){
      out.splice(at, 1);
      out.push(last);
    }
    if (out[out.length - 2] === last){
      for (b = out.length - 3; b >= 0; b--){
        if (out[b] !== last && out[b - 1] !== last){
          var t2 = out[out.length - 2]; out[out.length - 2] = out[b]; out[b] = t2;
          break;
        }
      }
    }
    return out;
  }

  function place(rec){
    var el = rec.el, cell = order.length ? order[rec.i] : rec.i;
    var vw = window.innerWidth, vh = window.innerHeight;
    var w  = el.offsetWidth, h = el.offsetHeight;
    var margin = 8, dockRoom = 86;

    var cols = Math.max(1, Math.round(vw / (w + 10)));
    var rows = Math.ceil(rec.n / cols);
    var col  = cell % cols;
    var row  = Math.floor(cell / cols);

    var cellW = (vw - margin * 2) / cols;
    var cellH = (vh - margin - dockRoom) / rows;

    var x = margin + col * cellW + (cellW - w) / 2 + rec.jx * cellW * .9;
    var y = margin + row * cellH + (cellH - h) / 2 + rec.jy * cellH * .6;

    x = Math.min(Math.max(x, margin), Math.max(margin, vw - w - margin));
    y = Math.min(Math.max(y, margin), Math.max(margin, vh - h - dockRoom + 18));

    el.style.left = Math.round(x) + "px";
    el.style.top  = Math.round(y) + "px";
  }

  function makeWindow(text, i, n){
    var el = document.createElement("div");
    el.className = "win";
    el.style.setProperty("--h", "var(--h-" + HUES[i % HUES.length] + ")");
    el.style.setProperty("--rot", (reduced ? 0 : (Math.random() * 14 - 7)).toFixed(2) + "deg");
    el.style.setProperty("--ws", (.92 + Math.random() * .2).toFixed(3));
    el.style.zIndex = ++top_z;

    var bar = document.createElement("div");
    bar.className = "bar";

    var heart = document.createElement("span");
    heart.className = "heart";
    heart.textContent = "♥";

    var name = document.createElement("span");
    name.className = "name";
    name.textContent = "给老婆 · " + (i + 1 < 10 ? "0" : "") + (i + 1);

    var x = document.createElement("button");
    x.className = "x";
    x.type = "button";
    x.setAttribute("aria-label", "关掉这个窗口");
    x.textContent = "✕";

    bar.appendChild(heart); bar.appendChild(name); bar.appendChild(x);

    var msg = document.createElement("p");
    msg.className = "msg";
    msg.textContent = text;

    el.appendChild(bar); el.appendChild(msg);
    stage.appendChild(el);

    var rec = { el: el, alive: true, i: i, n: n, jx: Math.random() - .5, jy: Math.random() - .5 };

    x.addEventListener("click", function(ev){ ev.stopPropagation(); close(rec, true); });
    el.addEventListener("pointerdown", function(){ el.style.zIndex = ++top_z; });
    drag(el, bar);

    place(rec);
    return rec;
  }

  /* ---- drag by the title bar ---- */
  function drag(el, handle){
    var sx = 0, sy = 0, ox = 0, oy = 0, id = null;

    handle.addEventListener("pointerdown", function(e){
      if (e.target.closest(".x")) return;
      id = e.pointerId;
      handle.setPointerCapture(id);
      sx = e.clientX; sy = e.clientY;
      ox = parseFloat(el.style.left) || 0;
      oy = parseFloat(el.style.top)  || 0;
      el.classList.add("dragging");
    });

    handle.addEventListener("pointermove", function(e){
      if (id === null || e.pointerId !== id) return;
      var nx = ox + (e.clientX - sx);
      var ny = oy + (e.clientY - sy);
      nx = Math.min(Math.max(nx, -el.offsetWidth * .4), window.innerWidth  - el.offsetWidth * .6);
      ny = Math.min(Math.max(ny, 0),                    window.innerHeight - 44);
      el.style.left = Math.round(nx) + "px";
      el.style.top  = Math.round(ny) + "px";
    });

    function done(e){
      if (id === null || (e && e.pointerId !== id)) return;
      try { handle.releasePointerCapture(id); } catch (err) {}
      id = null;
      el.classList.remove("dragging");
    }
    handle.addEventListener("pointerup", done);
    handle.addEventListener("pointercancel", done);
  }

  function close(rec, checkEnd){
    if (!rec.alive) return;
    rec.alive = false;
    rec.el.classList.remove("in");
    rec.el.classList.add("out");
    later(function(){ if (rec.el.parentNode) rec.el.parentNode.removeChild(rec.el); }, 320);
    if (checkEnd && updateCount() === 0) endShow();
  }

  function closeAll(){
    var live = wins.filter(function(w){ return w.alive; });
    if (!live.length) { endShow(); return; }
    var step = Math.max(16, Math.round(950 / live.length));
    live.forEach(function(rec, k){
      later(function(){ close(rec, false); updateCount(); }, k * step);
    });
    later(endShow, live.length * step + 340);
  }

  function endShow(){
    if (!running) return;
    running = false;
    dock.classList.remove("up");
    finale.classList.add("show");
  }

  function startShow(){
    clearTimers();
    running = true;
    finale.classList.remove("show");
    intro.classList.add("gone");
    stage.innerHTML = "";
    wins = [];
    top_z = 100;

    var deck = buildDeck();
    var n = deck.length;
    order = shuffle(n);

    /* gentle at first, then it floods */
    var delays = [], acc = 0, g;
    for (var d = 0; d < n; d++){
      delays.push(Math.round(acc));
      g = 230 - 165 * (d / Math.max(1, n - 1));
      acc += reduced ? 40 : g;
    }

    deck.forEach(function(text, i){
      later(function(){
        var rec = makeWindow(text, i, n);
        wins.push(rec);
        requestAnimationFrame(function(){ rec.el.classList.add("in"); });
        updateCount();
        if (i === 0) later(function(){ dock.classList.add("up"); }, 260);
      }, delays[i]);
    });
  }

  function reset(){
    clearTimers();
    stage.innerHTML = "";
    wins = [];
    updateCount();
    finale.classList.remove("show");
    intro.classList.remove("gone");
  }

  document.getElementById("start").addEventListener("click", startShow);
  document.getElementById("closeAll").addEventListener("click", closeAll);
  document.getElementById("again").addEventListener("click", reset);
  document.addEventListener("keydown", function(e){
    if (e.key === "Escape" && running) closeAll();
  });

  window.addEventListener("resize", function(){
    wins.forEach(function(rec){ if (rec.alive) place(rec); });
  });

  /* ---- drifting hearts ---- */
  var cv = document.getElementById("sky"), ctx = cv.getContext("2d");
  var dots = [], W = 0, H = 0, tint = [];

  function readTint(){
    var cs = getComputedStyle(document.documentElement);
    tint = ["--h-rose","--h-peach","--h-lilac","--h-mint"].map(function(v){
      return "rgba(" + cs.getPropertyValue(v).trim().split(/\s+/).join(",") + ",";
    });
  }
  function sizeCanvas(){
    var r = Math.min(window.devicePixelRatio || 1, 2);
    W = window.innerWidth; H = window.innerHeight;
    cv.width = W * r; cv.height = H * r;
    ctx.setTransform(r, 0, 0, r, 0, 0);
  }
  function seed(){
    dots = [];
    var count = Math.round(Math.min(34, Math.max(14, W / 46)));
    for (var i = 0; i < count; i++){
      dots.push({
        x: Math.random() * W,
        y: Math.random() * H,
        s: 7 + Math.random() * 16,
        v: .16 + Math.random() * .42,
        a: .07 + Math.random() * .13,
        p: Math.random() * Math.PI * 2,
        w: .004 + Math.random() * .009,
        c: Math.floor(Math.random() * 4)
      });
    }
  }
  function heart(x, y, s){
    ctx.beginPath();
    ctx.moveTo(x, y + s * .3);
    ctx.bezierCurveTo(x, y - s * .2, x - s * .62, y - s * .26, x - s * .62, y + s * .16);
    ctx.bezierCurveTo(x - s * .62, y + s * .56, x, y + s * .8, x, y + s);
    ctx.bezierCurveTo(x, y + s * .8, x + s * .62, y + s * .56, x + s * .62, y + s * .16);
    ctx.bezierCurveTo(x + s * .62, y - s * .26, x, y - s * .2, x, y + s * .3);
    ctx.closePath();
    ctx.fill();
  }
  function paint(move){
    ctx.clearRect(0, 0, W, H);
    for (var i = 0; i < dots.length; i++){
      var d = dots[i];
      if (move){
        d.y -= d.v;
        d.p += d.w;
        if (d.y < -d.s * 1.4){ d.y = H + d.s; d.x = Math.random() * W; }
      }
      ctx.fillStyle = tint[d.c] + d.a.toFixed(3) + ")";
      heart(d.x + Math.sin(d.p) * 14, d.y, d.s);
    }
  }
  function loop(){ paint(true); requestAnimationFrame(loop); }

  function boot(){ readTint(); sizeCanvas(); seed(); paint(false); }
  boot();
  if (!reduced) loop();
  window.addEventListener("resize", function(){ sizeCanvas(); seed(); paint(false); });
  var mq = matchMedia("(prefers-color-scheme: dark)");
  (mq.addEventListener ? mq.addEventListener.bind(mq, "change") : mq.addListener.bind(mq))(function(){ readTint(); });
})();
</script>