中国共产党成立100周年纪念单页

html单页 AI写的自适应页面可以托管Cloudflare
当做小页面放在博客里面，挺不错的我的演示页面:3181314.xyz
1
<!doctype html>
2
<html lang="zh-CN">
3
<head>
4
  <meta charset="utf-8" />
5
  <meta name="viewport" content="width=device-width,initial-scale=1" />
6
  <title>百年征程 · 热烈庆祝中国共产党成立100周年</title>
7

8
  <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
9

10
  <style>
11
  :root{
12
    --red:#C91F1F;
13
    --deep-red:#961414;
14
    --gold:#D9A441;
15
    --bg:#FFF8F2;
16
    --text:#3b2f2f;
17
    --glass: rgba(255,255,255,0.65);
18
    --lantern-width:120px;
19
    --max-width:1100px;
20
  }
21
  *{box-sizing:border-box}
22
  html,body{height:100%}
23
  body{
24
    margin:0;
25
    font-family: "Noto Serif SC", "ZCOOL QingKe HuangYou", serif;
26
    color:var(--text);
27
    background:linear-gradient(180deg,#fff 0%, #FFF8F2 40%, #FFF1E6 100%);
28
    -webkit-font-smoothing:antialiased;
29
    -moz-osx-font-smoothing:grayscale;
30
    overflow-y:auto;
31
  }
32
  .ink-bg{
33
    position:fixed;
34
    inset:0;
35
    background-image:
36
      radial-gradient(circle at 8% 18%, rgba(0,0,0,0.02) 0 2%, transparent 10%),
37
      radial-gradient(circle at 88% 78%, rgba(0,0,0,0.02) 0 2%, transparent 12%);
38
    mix-blend-mode:multiply;
39
    pointer-events:none;
40
    z-index:0;
41
  }
42

43
  /* HERO */
44
  .hero{position:relative;padding:36px 20px;overflow:hidden}
45
  .hero-inner{
46
    display:flex;align-items:center;justify-content:space-between;gap:18px;
47
    max-width:1200px;margin:0 auto;position:relative;z-index:2;transition:transform .12s linear;
48
  }
49
  .left-deco,.right-deco{width:110px;flex:0 0 110px}
50
  .title-wrap{flex:1;text-align:center}
51
  .title{
52
    font-family:"ZCOOL QingKe HuangYou","Noto Serif SC",serif;color:var(--deep-red);
53
    font-size:56px;margin:0;letter-spacing:2px;text-shadow:0 6px 18px rgba(201,31,31,0.12);
54
    transform-origin:center;animation:float 6s ease-in-out infinite;
55
  }
56
  .subtitle{margin:8px 0 18px;color:#5c3e3e;font-size:16px}
57
  .ribbon{margin-top:14px;display:inline-block;background:linear-gradient(90deg,#D94343,#C22B2B);
58
    color:#FFF8F2;padding:8px 18px;border-radius:999px;box-shadow:0 6px 18px rgba(201,31,31,0.12);
59
    font-weight:600;letter-spacing:1px;font-size:14px}
60

61
  .clouds{position:absolute;left:0;right:0;bottom:-2px;height:120px;opacity:0.95;z-index:1}
62

63
  /* 布局：概览 + 时间轴（Grid 版，增强响应式） */
64
  .container{max-width:var(--max-width);margin:28px auto;padding:0 20px;display:block;gap:20px}
65
  .card{
66
    background:linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,250,245,0.96));
67
    border-radius:12px;padding:18px;box-shadow:0 8px 30px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.03);
68
  }
69
  .card h2{margin:0 0 8px 0}
70
  .card p{margin:0;font-size:15px;line-height:1.7}
71

72
  /* 纵向时间轴（基于 Grid 的行） */
73
  .timeline{padding:24px 16px 46px}
74
  .section-title{text-align:center;font-size:24px;margin:8px 0 20px;color:var(--deep-red)}
75
  .v-timeline{max-width:var(--max-width);margin:0 auto;position:relative;padding:20px 10px}
76
  .v-timeline::before{
77
    content:"";
78
    position:absolute;
79
    left:50%;
80
    top:8px;
81
    bottom:8px;
82
    width:6px;
83
    transform:translateX(-50%);
84
    background:linear-gradient(180deg,var(--gold),rgba(217,175,74,0.6));
85
    border-radius:6px;
86
  }
87
  .v-row{
88
    display:grid;
89
    grid-template-columns:1fr 60px 1fr;
90
    column-gap:20px;
91
    align-items:start;
92
    margin:18px 0;
93
    grid-auto-rows:auto;
94
    width:100%;
95
  }
96
  .v-item{
97
    padding:14px 18px;border-radius:12px;background:linear-gradient(180deg,#fff,#FFF7F5);
98
    box-shadow:0 8px 24px rgba(0,0,0,0.06);transition:transform .25s ease;
99
    width:100%;
100
  }
101
  .v-item:hover{transform:translateY(-6px)}
102
  .v-item .year{display:inline-block;padding:6px 10px;border-radius:999px;background:var(--red);color:#fff;font-weight:700;margin-bottom:8px}
103
  .v-item h4{margin:6px 0 8px;color:var(--deep-red)}
104
  .v-item p{margin:0;color:#5b4343;line-height:1.6}
105
  .v-center{display:flex;align-items:start;justify-content:center}
106
  .v-dot{
107
    width:16px;height:16px;border-radius:50%;background:var(--red);
108
    box-shadow:0 0 0 6px rgba(201,31,31,0.08);
109
    margin-top:12px;
110
    position:relative;
111
  }
112

113
  /* 庆祝区：放飞灯笼 */
114
  .celebrate{padding:32px 16px}
115
  .celebrate .panel{max-width:var(--max-width);margin:0 auto;background:linear-gradient(180deg,#fff,#FFF8F6);padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.06)}
116
  .controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
117
  .controls input[type="text"]{flex:1;padding:10px 12px;border-radius:10px;border:1px solid rgba(0,0,0,0.08);font-size:15px}
118
  .controls .btn{padding:10px 14px;border-radius:10px;cursor:pointer;background:var(--glass);border:1px solid rgba(0,0,0,0.06)}
119
  .controls .btn.primary{background:linear-gradient(180deg,var(--red),var(--deep-red));color:#fff;border:none}
120
  .preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:8px}
121
  .preset{padding:8px 12px;border-radius:999px;background:linear-gradient(90deg,#FFF4E8,#FFF0E6);border:1px solid rgba(0,0,0,0.04);cursor:pointer}
122

123
  /* 放飞容器（覆盖层） */
124
  .sky{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:visible}
125
  .lantern{
126
    position:absolute;width:var(--lantern-width);height:160px;left:50%;transform:translateX(-50%);
127
    pointer-events:none;will-change:transform,opacity;
128
    display:flex;align-items:flex-start;justify-content:center;
129
    font-family:"Noto Serif SC",serif;color:#3b1f1f;text-align:center;
130
  }
131
  .lantern .svg-wrap{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
132
  .lantern .msg{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);font-size:14px;padding:6px 8px;color:#2b100f;background:transparent;white-space:nowrap}
133
  @keyframes floatUp {
134
    0%{transform:translate(-50%, 0) scale(1); opacity:1}
135
    25%{transform:translate(calc(-50% + 20px), -25vh) scale(1.02)}
136
    60%{transform:translate(calc(-50% - 12px), -65vh) scale(1.04)}
137
    100%{transform:translate(calc(-50% + 8px), -120vh) scale(1.08); opacity:0}
138
  }
139

140
  /* 花瓣样式 */
141
  .petal{position:fixed;border-radius:45% 55% 40% 60%;pointer-events:none;mix-blend-mode:screen;will-change:transform,top,left,opacity;z-index:55}
142

143
  /* footer */
144
  .site-footer{padding:18px;text-align:center;color:#6b5656;font-size:14px;border-top:1px solid rgba(0,0,0,0.02);margin-top:28px}
145
  .site-footer a.footer-link{color:var(--deep-red);text-decoration:none;font-weight:600}
146
  .site-footer a.footer-link:hover{text-decoration:underline}
147

148
  /* 响应式：手机/窄屏下 — 去掉左侧竖线和圆点，保留对齐与触控间距 */
149
  @media (max-width:900px){
150
    .v-row{
151
      grid-template-columns:12px 1fr; /* 保留小间隙用于视觉平衡 */
152
      column-gap:12px;
153
      align-items:start;
154
    }
155

156
    /* 隐藏原来的竖线（desktop-only） */
157
    .v-timeline::before{
158
      display:none;
159
    }
160

161
    /* 保证第一列（占位）与第二列内容的默认分配 */
162
    .v-row > div:first-child{
163
      grid-column:1;
164
      display:block;
165
      padding-top:6px;
166
    }
167
    .v-row > div:last-child{
168
      grid-column:2;
169
    }
170

171
    /* 隐藏小屏上的圆点与其伪元素 */
172
    .v-dot,
173
    .v-dot::before,
174
    .v-dot::after {
175
      display:none !important;
176
    }
177

178
    /* 减小卡片内边距，提升可读性 */
179
    .v-item{padding:12px 14px;border-radius:10px}
180
    .v-item h4{font-size:16px}
181
    .v-item p{font-size:14px}
182
    .left-deco,.right-deco{display:none}
183

184
    /* 触摸友好：让时间轴项可聚焦（便于键盘/屏幕阅读器） */
185
    .v-item{outline: none}
186
    .v-item:focus{box-shadow:0 0 0 3px rgba(217,164,68,0.12);transform:none}
187
  }
188

189
  /* prefers-reduced-motion 支持（尊重用户偏好） */
190
  @media (prefers-reduced-motion: reduce) {
191
    .title { animation: none !important; }
192
    .lantern { animation: none !important; transition: none !important; opacity: 1 !important; }
193
    .petal { transition: none !important; }
194
    .v-item, .v-item:hover { transform: none !important; }
195
  }
196

197
  /* 限制 hero 视差在超大屏时的偏移（更稳健） */
198
  @media (min-width:1400px){
199
    .hero-inner{max-width:1300px}
200
  }
201
  </style>
202
</head>
203
<body>
204
  <div class="ink-bg" aria-hidden="true"></div>
205

206
  <header class="hero" role="banner">
207
    <div class="hero-inner" id="heroInner">
208
      <div class="left-deco" aria-hidden="true">
209
        <svg viewBox="0 0 200 200" width="110" height="110" aria-hidden="true">
210
          <defs><linearGradient id="g1" x1="0" x2="1"><stop offset="0" stop-color="#fff" stop-opacity="0.95"/><stop offset="1" stop-color="#FFD7D7"/></linearGradient></defs>
211
          <g fill="url(#g1)" stroke="#E04B3A" stroke-width="1.5"><path d="M100 20 C92 34,76 34,64 46 C86 44,84 74,100 74 C116 74,114 44,136 46 C124 34,108 34,100 20 Z"/><circle cx="100" cy="88" r="6" fill="#E04B3A"/></g>
212
        </svg>
213
      </div>
214

215
      <div class="title-wrap">
216
        <h1 class="title" id="mainTitle">百年征程</h1>
217
        <p class="subtitle">热烈庆祝中国共产党成立100周年</p>
218
        <div class="ribbon" aria-hidden="true">1921 — 2021 · 不忘初心 牢记使命</div>
219
      </div>
220

221
      <div class="right-deco" aria-hidden="true">
222
        <svg viewBox="0 0 120 220" width="110" height="110" aria-hidden="true">
223
          <g transform="translate(10,10)"><ellipse cx="50" cy="70" rx="42" ry="56" fill="#D92E2E" stroke="#B22222" stroke-width="2"/><rect x="46" y="6" width="8" height="20" fill="#B22222"/><path d="M50 126 L50 150" stroke="#B22222" stroke-width="3" /></g>
224
        </svg>
225
      </div>
226
    </div>
227

228
    <svg class="clouds" viewBox="0 0 1400 200" preserveAspectRatio="none" aria-hidden="true">
229
      <path d="M0 120 C150 40, 350 40, 500 120 C650 200, 850 200, 1000 120 C1150 40, 1250 40, 1400 120 L1400 200 L0 200 Z" fill="#FFF4E8" opacity="0.85"/>
230
    </svg>
231
  </header>
232

233
  <main>
234
    <section class="container" aria-label="概览">
235
      <div class="card" role="region" aria-labelledby="aboutTitle">
236
        <h2 id="aboutTitle">百年光辉 · 百年征程</h2>
237
        <p>
238
          百年，是历史在时光上刻下的深深纹理；百年，也是每一次初心的温热延续。我们以传统纹样为根、以当代版式为形，将峥嵘岁月的厚重与今日希望的光芒并置呈现——柔和的色调、流动的线条与细腻的留白，既缅怀过往的奋斗，也为未来铺陈可能。愿历史的每一段记忆化作照亮前路的灯塔，愿不变的初心继续转化为前行的力量，共同书写新时代的恢弘篇章。
239
        </p>
240
      </div>
241
    </section>
242

243
    <section class="timeline" id="timeline" aria-labelledby="timelineTitle">
244
      <h2 class="section-title" id="timelineTitle">百年时间轴</h2>
245
      <div class="v-timeline" id="vTimeline" role="list" aria-label="百年时间轴">
246
        <!-- JS 渲染：基于 Grid 的每行三列（桌面）或两列（移动）-->
247
      </div>
248
    </section>
249

250
    <section class="celebrate" aria-labelledby="celebrateTitle">
251
      <h2 id="celebrateTitle" style="text-align:center;color:var(--deep-red)">放飞灯笼 · 致敬百年</h2>
252
      <div class="celebrate panel" role="region" aria-label="放飞灯笼互动">
253
        <div class="controls" aria-hidden="false">
254
          <input id="wishInput" type="text" placeholder="输入你的祝福，最多 24 字（示例：祝福祖国繁荣昌盛）" maxlength="24" />
255
          <button id="autoBtn" class="btn" title="随机祝福">随机祝福</button>
256
          <button id="launchBtn" class="btn primary" title="放飞灯笼">放飞灯笼</button>
257
        </div>
258

259
        <div class="preset-row" aria-hidden="true">
260
          <div class="preset" data-text="祝福祖国繁荣昌盛" tabindex="0">祝福祖国繁荣昌盛</div>
261
          <div class="preset" data-text="不忘初心，牢记使命" tabindex="0">不忘初心，牢记使命</div>
262
          <div class="preset" data-text="人民幸福，国泰民安" tabindex="0">人民幸福，国泰民安</div>
263
        </div>
264

265
        <p style="color:#6b5252;margin-top:6px">输入祝福后点击“放飞灯笼”，祝福将以书法风格出现在灯笼上，缓缓升入夜空，具有中国古典氛围。页面支持多次放飞。</p>
266
      </div>
267
    </section>
268

269
    <footer class="site-footer" role="contentinfo">
270
      <div>
271
        托管在
272
        <a class="footer-link" href="https://www.cloudflare.com/" target="_blank" rel="noopener noreferrer" title="访问 Cloudflare 官网" aria-label="访问 Cloudflare 官网">
273
          Cloudflare
274
        </a>
275
        | 由 Cloudflare CDN 提供加速与安全防护
276
      </div>
277
      <div style="margin-top:8px;">
278
        <a href="https://dh.3181314.xyz/" target="_blank" rel="noopener noreferrer">Hello &amp; Qgxs</a> &nbsp;|&nbsp;
279
        <a href="https://www.3181314.xyz/" target="_blank" rel="noopener noreferrer">我的博客</a> &nbsp;|&nbsp;
280
        <a href="https://www.3181314.xyz/about.html" target="_blank" rel="noopener noreferrer">关于我</a>
281
      </div>
282
      <div style="margin-top:6px;color:#8a6a6a;font-size:13px">致敬历史，面向未来 · 1921–2021</div>
283
    </footer>
284
  </main>
285

286
  <!-- 放飞层 & 花瓣容器 -->
287
  <div class="sky" id="skyLayer" aria-hidden="true"></div>
288
  <div id="petalContainer" aria-hidden="true"></div>
289

290
  <script>
291
  (function(){
292
    // 时间轴数据（可按需修改）
293
    const timelineData = [
294
      {year:1921, title:'中国共产党成立', desc:'中国共产党在上海和嘉兴南湖成立，开启了中国革命的新纪元。'},
295
      {year:1949, title:'中华人民共和国成立', desc:'在中国共产党的领导下，中华人民共和国成立，开启民族复兴的新篇章。'},
296
      {year:1978, title:'改革开放', desc:'实行改革开放，推动经济体制改革与持续发展，实现国家现代化的快速推进。'},
297
      {year:1997, title:'香港回归', desc:'香港回归祖国怀抱，国家主权与统一得到进一步巩固。'},
298
      {year:2012, title:'新时代开启', desc:'党的十八大以来，中国进入新时代，提出全面建成小康、奋斗目标与现代化建设。'},
299
      {year:2021, title:'百年华诞', desc:'庆祝中国共产党成立一百周年，回顾奋斗历程，展望未来的宏伟蓝图。'}
300
    ];
301

302
    // 渲染纵向时间轴（桌面：交错左右；移动：点/线已隐藏，仅内容）
303
    const vTimeline = document.getElementById('vTimeline');
304
    function renderTimeline(){
305
      vTimeline.innerHTML = '';
306
      timelineData.forEach((item, idx) => {
307
        const row = document.createElement('div');
308
        row.className = 'v-row';
309
        row.setAttribute('role','listitem');
310
        row.setAttribute('aria-label', item.year + ' ' + item.title);
311

312
        // For mobile we use two-column row: small left gap + content on right.
313
        // For desktop we preserve the original three-column alternating layout.
314
        if (window.matchMedia('(min-width:901px)').matches) {
315
          const leftCell = document.createElement('div');
316
          const middleCell = document.createElement('div'); middleCell.className = 'v-center';
317
          const rightCell = document.createElement('div');
318

319
          const itemEl = document.createElement('div');
320
          itemEl.className = 'v-item';
321
          itemEl.setAttribute('tabindex', '0');
322
          itemEl.innerHTML = '<div class="year">' + item.year + '</div>' +
323
                             '<h4>' + item.title + '</h4>' +
324
                             '<p>' + item.desc + '</p>';
325

326
          const dot = document.createElement('div');
327
          dot.className = 'v-dot';
328
          dot.setAttribute('aria-hidden','true');
329

330
          if (idx % 2 === 0) {
331
            leftCell.appendChild(itemEl);
332
            middleCell.appendChild(dot);
333
          } else {
334
            rightCell.appendChild(itemEl);
335
            middleCell.appendChild(dot);
336
          }
337
          row.appendChild(leftCell);
338
          row.appendChild(middleCell);
339
          row.appendChild(rightCell);
340
        } else {
341
          const gapCell = document.createElement('div');
342
          const contentCell = document.createElement('div');
343

344
          const itemEl = document.createElement('div');
345
          itemEl.className = 'v-item';
346
          itemEl.setAttribute('tabindex', '0');
347
          itemEl.innerHTML = '<div class="year">' + item.year + '</div>' +
348
                             '<h4>' + item.title + '</h4>' +
349
                             '<p>' + item.desc + '</p>';
350

351
          // Keep a small left cell (gap) for visual balance but hide dots/lines via CSS
352
          gapCell.appendChild(document.createElement('div'));
353
          contentCell.appendChild(itemEl);
354

355
          row.appendChild(gapCell);
356
          row.appendChild(contentCell);
357
        }
358

359
        vTimeline.appendChild(row);
360
      });
361
    }
362

363
    // 视差（小幅），现代化监听并在触摸/粗指针设备禁用
364
    function enableParallax(){
365
      const hero = document.getElementById('heroInner');
366
      if (!hero) return;
367

368
      // Disable parallax on touch devices or coarse pointers
369
      const prefersCoarse = window.matchMedia('(pointer: coarse)').matches;
370
      if (prefersCoarse) { hero.style.transform = 'none'; return; }
371

372
      function onMouseMove(e){
373
        const cx = window.innerWidth/2, cy = window.innerHeight/2;
374
        const dx = (e.clientX - cx) / cx;
375
        const dy = (e.clientY - cy) / cy;
376
        hero.style.transform = 'translateX(' + (dx*3) + 'px) translateY(' + (dy*2.5) + 'px)';
377
      }
378
      window.addEventListener('mousemove', onMouseMove);
379

380
      const mq = window.matchMedia('(max-width:900px)');
381
      function check(e){ if (mq.matches) hero.style.transform='none'; }
382
      if (typeof mq.addEventListener === 'function') {
383
        mq.addEventListener('change', check);
384
      } else if (typeof mq.addListener === 'function') {
385
        mq.addListener(check);
386
      }
387
      check();
388
    }
389

390
    // 花瓣（轻柔）
391
    const petalContainer = document.getElementById('petalContainer');
392
    function createPetal(){
393
      const el = document.createElement('div');
394
      el.className = 'petal';
395
      const size = (Math.random()*14 + 10) | 0;
396
      el.style.width = size + 'px';
397
      el.style.height = Math.round(size * 1.2) + 'px';
398
      el.style.left = (Math.random() * 100) + 'vw';
399
      el.style.top = '-6vh';
400
      el.style.background = 'radial-gradient(circle at 30% 30%, #fff8f8, #ffcfcf)';
401
      el.style.opacity = (0.55 + Math.random()*0.45).toFixed(2);
402
      el.style.transform = 'rotate(' + (Math.random()*360) + 'deg)';
403
      el.style.transition = 'transform ' + (10+Math.random()*6) + 's linear, top ' + (10+Math.random()*6) + 's linear, left ' + (8+Math.random()*6) + 's linear, opacity 2s';
404
      petalContainer.appendChild(el);
405

406
      requestAnimationFrame(() => {
407
        el.style.top = (80 + Math.random()*20) + 'vh';
408
        el.style.left = (Math.random()*100) + 'vw';
409
        el.style.transform = 'rotate(' + (Math.random()*720 - 360) + 'deg) translateX(' + (Math.random()*40-20) + 'px)';
410
      });
411

412
      setTimeout(()=> el.remove(), 16000);
413
    }
414
    let petalTimer = null;
415
    function startPetals(){
416
      if (petalTimer) return;
417
      petalTimer = setInterval(createPetal, 420);
418
      for (let i=0;i<6;i++) setTimeout(createPetal, i*160);
419
    }
420
    function stopPetals(){ clearInterval(petalTimer); petalTimer = null; }
421

422
    // 放飞灯笼
423
    const sky = document.getElementById('skyLayer');
424
    const wishInput = document.getElementById('wishInput');
425
    const launchBtn = document.getElementById('launchBtn');
426
    const autoBtn = document.getElementById('autoBtn');
427
    const presets = Array.from(document.querySelectorAll('.preset'));
428

429
    const autoTexts = [
430
      '祝福祖国繁荣昌盛',
431
      '不忘初心，牢记使命',
432
      '人民幸福，国泰民安',
433
      '百年辉煌，继往开来',
434
      '砥砺前行，共创未来'
435
    ];
436

437
    // keyboard support for preset chips
438
    presets.forEach(p => {
439
      p.addEventListener('click', ()=> {
440
        wishInput.value = p.dataset.text || '';
441
      });
442
      p.addEventListener('keydown', (e) => {
443
        if (e.key === 'Enter' || e.key === ' ') {
444
          e.preventDefault();
445
          p.click();
446
        }
447
      });
448
    });
449

450
    autoBtn.addEventListener('click', ()=> {
451
      const t = autoTexts[Math.floor(Math.random()*autoTexts.length)];
452
      wishInput.value = t;
453
    });
454

455
    function createLantern(text){
456
      const el = document.createElement('div');
457
      el.className = 'lantern';
458
      const startX = Math.random()*80 + 10;
459
      const colorHue = 8 + Math.round(Math.random()*30);
460
      el.style.left = startX + 'vw';
461
      el.style.bottom = '-18vh';
462
      el.style.opacity = '0';
463
      el.style.zIndex = 65;
464

465
      el.innerHTML = '<div class="svg-wrap" aria-hidden="true">'
466
        + '<svg viewBox="0 0 100 140" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">'
467
        + '<defs><linearGradient id="lg" x1="0" x2="0" y1="0" y2="1"><stop offset="0" stop-color="#FFD6D6"/><stop offset="1" stop-color="#FFB7B7"/></linearGradient></defs>'
468
        + '<g transform="translate(0,0)">'
469
        + '<ellipse cx="50" cy="50" rx="36" ry="46" fill="hsl(' + colorHue + ' 80% 55%)" stroke="#B22222" stroke-width="2"/>'
470
        + '<rect x="44" y="4" width="12" height="14" fill="#B22222" />'
471
        + '<path d="M50 96 L50 116" stroke="#8b1a1a" stroke-width="2" />'
472
        + '</g></svg></div>'
473
        + '<div class="msg">' + escapeHtml(text) + '</div>';
474

475
      const dur = 9000 + Math.random()*7000;
476
      el.style.transition = 'opacity 600ms ease';
477
      sky.appendChild(el);
478

479
      requestAnimationFrame(()=> {
480
        el.style.opacity = '1';
481
        el.style.animation = 'floatUp ' + (dur/1000) + 's linear forwards';
482
      });
483

484
      for (let i=0;i<2;i++) setTimeout(createPetal, Math.random()*800);
485

486
      setTimeout(()=> { el.remove(); }, dur + 600);
487
    }
488

489
    function escapeHtml(s){ return String(s || '').replace(/[&<>"']/g, function(m){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[m]; }); }
490

491
    launchBtn.addEventListener('click', ()=> {
492
      const text = wishInput.value.trim() || autoTexts[Math.floor(Math.random()*autoTexts.length)];
493
      createLantern(text);
494
    });
495

496
    wishInput.addEventListener('keydown', function(e){
497
      if (e.key === 'Enter'){ e.preventDefault(); launchBtn.click(); }
498
    });
499

500
    // 初始化
501
    function init(){
502
      renderTimeline();
503
      enableParallax();
504
      // 预热花瓣（小批量以避免内存峰值）
505
      setTimeout(startPetals, 800);
506
      setTimeout(stopPetals, 7000);
507
      // 标题入场（将动画禁用于 reduced-motion 首选项）
508
      const title = document.getElementById('mainTitle');
509
      try {
510
        title.animate([{opacity:0, transform:'translateY(18px) scale(0.98)'},{opacity:1, transform:'translateY(0) scale(1)'}], {duration:900, easing:'cubic-bezier(.2,.8,.2,1)'});
511
      } catch (e) { /* animation not supported */ }
512
    }
513

514
    // Re-render timeline on resize so mobile/desktop layout adapts when device rotated
515
    let resizeTimer = null;
516
    window.addEventListener('resize', () => {
517
      clearTimeout(resizeTimer);
518
      resizeTimer = setTimeout(renderTimeline, 160);
519
    });
520

521
    init();
522

523
    // 暴露少量调试接口（可移除）
524
    window.__celebrate = {createLantern, startPetals, stopPetals};
525
  })();
526
  </script>
527
</body>
528
</html>
评论区

音乐
