静夜思

!!!
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>静夜思 · 诗词小课堂</title>
  <style>
    #jy-poem-app{
      --jy-bg-1:#f7fbff;
      --jy-bg-2:#eef7ff;
      --jy-card:rgba(255,255,255,.82);
      --jy-card-solid:#ffffff;
      --jy-ink:#2e425a;
      --jy-muted:#6f8499;
      --jy-blue:#7eb8e8;
      --jy-blue-deep:#4c8ec6;
      --jy-yellow:#ffd976;
      --jy-green:#bde2ce;
      --jy-line:#dceaf6;
      --jy-shadow:0 18px 50px rgba(70,116,154,.13);
      --jy-radius:28px;

position:relative;
      width:100%;
      color:var(--jy-ink);
      font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",system-ui,-apple-system,sans-serif;
      background:
        radial-gradient(circle at 12% 8%, rgba(255,217,118,.18), transparent 20%),
        radial-gradient(circle at 88% 16%, rgba(126,184,232,.18), transparent 22%),
        linear-gradient(180deg,var(--jy-bg-1),var(--jy-bg-2));
      border-radius:30px;
      overflow:hidden;
      isolation:isolate;
    }

#jy-poem-app.jy-night{
      --jy-bg-1:#16243a;
      --jy-bg-2:#203451;
      --jy-card:rgba(30,49,75,.82);
      --jy-card-solid:#233b5b;
      --jy-ink:#eef7ff;
      --jy-muted:#b8cbe0;
      --jy-line:#38536f;
      --jy-shadow:0 18px 55px rgba(1,9,20,.25);
    }

#jy-poem-app,
    #jy-poem-app *{box-sizing:border-box}

#jy-poem-app .jy-shell{width:min(1120px,calc(100% - 32px));margin:0 auto}
    #jy-poem-app .jy-topbar{
      display:flex;justify-content:space-between;align-items:center;padding:24px 0 12px;
    }
    #jy-poem-app .jy-brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em}
    #jy-poem-app .jy-brand-dot{
      width:36px;height:36px;border-radius:14px;display:grid;place-items:center;background:#fff4c5;
      box-shadow:0 8px 20px rgba(204,167,60,.14)
    }
    #jy-poem-app.jy-night .jy-brand-dot{background:#314b6b}

#jy-poem-app .jy-icon-btn,
    #jy-poem-app .jy-primary,
    #jy-poem-app .jy-secondary{
      font:inherit;
      cursor:pointer;
      transition:.2s ease;
    }
    #jy-poem-app .jy-icon-btn{
      border:1px solid var(--jy-line);background:var(--jy-card);color:var(--jy-ink);
      border-radius:999px;padding:9px 14px;box-shadow:0 8px 24px rgba(69,112,150,.08)
    }
    #jy-poem-app .jy-icon-btn:hover,
    #jy-poem-app .jy-primary:hover,
    #jy-poem-app .jy-secondary:hover{transform:translateY(-2px)}

#jy-poem-app .jy-hero{
      position:relative;margin-top:10px;min-height:560px;border:1px solid rgba(255,255,255,.65);
      border-radius:38px;overflow:hidden;box-shadow:var(--jy-shadow);
      background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(234,246,255,.82));
      display:grid;grid-template-columns:1.08fr .92fr;align-items:center;padding:56px
    }
    #jy-poem-app.jy-night .jy-hero{
      background:linear-gradient(145deg,rgba(31,50,77,.95),rgba(39,67,101,.88));
      border-color:#334e6e
    }
    #jy-poem-app .jy-tag{
      display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:999px;
      background:#edf8f3;color:#4b8269;font-size:13px;font-weight:700;margin-bottom:18px
    }
    #jy-poem-app.jy-night .jy-tag{background:#2a4c46;color:#c7f1de}
    #jy-poem-app .jy-poet{font-family:"STKaiti","KaiTi",serif;color:var(--jy-blue-deep);font-size:19px}
    #jy-poem-app.jy-night .jy-poet{color:#a9d5fa}
    #jy-poem-app .jy-title{
      margin:0;font-family:"STKaiti","KaiTi","Songti SC",serif;
      font-size:clamp(52px,7vw,86px);font-weight:700;letter-spacing:.12em;line-height:1.04
    }
    #jy-poem-app .jy-subtitle{margin:17px 0 28px;color:var(--jy-muted);font-size:16px;line-height:1.8}
    #jy-poem-app .jy-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
    #jy-poem-app .jy-primary,
    #jy-poem-app .jy-secondary{border-radius:16px;padding:12px 18px;font-weight:700}
    #jy-poem-app .jy-primary{
      border:0;background:var(--jy-blue-deep);color:#fff;box-shadow:0 10px 25px rgba(76,142,198,.24)
    }
    #jy-poem-app .jy-secondary{
      background:var(--jy-card-solid);color:var(--jy-ink);border:1px solid var(--jy-line)
    }

#jy-poem-app .jy-scene{position:relative;height:430px}
    #jy-poem-app .jy-moon{
      position:absolute;right:38px;top:12px;width:150px;height:150px;border-radius:50%;
      background:radial-gradient(circle at 38% 32%,#fffef7 0 18%,#fff4bd 48%,#ffd975 100%);
      box-shadow:0 0 0 18px rgba(255,220,121,.09),0 0 70px rgba(255,220,121,.3)
    }
    #jy-poem-app.jy-night .jy-moon{box-shadow:0 0 0 20px rgba(255,220,121,.08),0 0 85px rgba(255,224,133,.45)}
    #jy-poem-app .jy-cloud{
      position:absolute;background:rgba(255,255,255,.75);height:32px;border-radius:40px;
      filter:drop-shadow(0 6px 12px rgba(82,126,163,.08))
    }
    #jy-poem-app.jy-night .jy-cloud{background:rgba(166,196,224,.2)}
    #jy-poem-app .jy-cloud:before,
    #jy-poem-app .jy-cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}
    #jy-poem-app .jy-cloud:before{width:54px;height:54px;left:24px;bottom:0}
    #jy-poem-app .jy-cloud:after{width:42px;height:42px;left:66px;bottom:0}
    #jy-poem-app .jy-c1{width:130px;right:125px;top:128px}
    #jy-poem-app .jy-c2{width:105px;left:28px;top:72px;transform:scale(.7);opacity:.65}
    #jy-poem-app .jy-mountain{
      position:absolute;left:-10px;right:-20px;bottom:80px;height:170px;
      background:linear-gradient(135deg,#bbd9d0,#8fc5b3);
      clip-path:polygon(0 78%,16% 50%,31% 68%,49% 24%,65% 62%,80% 42%,100% 72%,100% 100%,0 100%)
    }
    #jy-poem-app.jy-night .jy-mountain{background:linear-gradient(135deg,#355b61,#294a54)}
    #jy-poem-app .jy-mountain.jy-back{bottom:105px;opacity:.5;transform:scaleY(.85);background:#cfe4ea}
    #jy-poem-app.jy-night .jy-mountain.jy-back{background:#416279}
    #jy-poem-app .jy-house{
      position:absolute;left:48px;bottom:66px;width:126px;height:90px;background:#fffaf0;
      border-radius:4px 4px 10px 10px;box-shadow:0 12px 30px rgba(66,104,121,.14)
    }
    #jy-poem-app.jy-night .jy-house{background:#d9e6ef}
    #jy-poem-app .jy-roof{
      position:absolute;left:-16px;top:-36px;width:160px;height:48px;background:#7599a5;
      clip-path:polygon(50% 0,100% 82%,92% 100%,50% 34%,8% 100%,0 82%)
    }
    #jy-poem-app .jy-window{
      position:absolute;right:18px;top:28px;width:31px;height:34px;background:#ffe49a;
      border:5px solid #7f9fa7;border-radius:4px;box-shadow:0 0 20px rgba(255,222,133,.65)
    }
    #jy-poem-app .jy-tree{
      position:absolute;right:27px;bottom:61px;width:20px;height:116px;background:#7c6b54;border-radius:10px
    }
    #jy-poem-app .jy-tree:before,
    #jy-poem-app .jy-tree:after{content:"";position:absolute;border-radius:50%;background:#7ab39a}
    #jy-poem-app .jy-tree:before{width:105px;height:90px;left:-43px;top:-38px}
    #jy-poem-app .jy-tree:after{width:82px;height:74px;left:-58px;top:4px}
    #jy-poem-app.jy-night .jy-tree:before,
    #jy-poem-app.jy-night .jy-tree:after{background:#315e59}
    #jy-poem-app .jy-ground{
      position:absolute;left:-40px;right:-40px;bottom:-30px;height:130px;
      background:#d9ebd7;border-radius:50% 50% 0 0
    }
    #jy-poem-app.jy-night .jy-ground{background:#28494a}

#jy-poem-app .jy-section{padding:76px 0 0}
    #jy-poem-app .jy-section-title{text-align:center;margin-bottom:28px}
    #jy-poem-app .jy-section-title span{
      display:inline-block;font-size:13px;font-weight:800;color:var(--jy-blue-deep);
      background:#eaf5ff;padding:7px 12px;border-radius:999px;margin-bottom:10px
    }
    #jy-poem-app.jy-night .jy-section-title span{background:#294866;color:#b9ddfa}
    #jy-poem-app .jy-section-title h2{margin:0;font-size:30px;color:var(--jy-ink)}
    #jy-poem-app .jy-section-title p{color:var(--jy-muted);margin:9px 0 0}

#jy-poem-app .jy-poem-card{
      max-width:760px;margin:0 auto;background:var(--jy-card);border:1px solid var(--jy-line);
      border-radius:var(--jy-radius);padding:34px;box-shadow:var(--jy-shadow);text-align:center
    }
    #jy-poem-app .jy-poem-lines{display:grid;gap:18px}
    #jy-poem-app .jy-poem-line{border-radius:20px;padding:12px 18px;transition:.2s ease;cursor:pointer}
    #jy-poem-app .jy-poem-line:hover,
    #jy-poem-app .jy-poem-line.jy-active{background:rgba(126,184,232,.11);transform:scale(1.01)}
    #jy-poem-app .jy-han{
      font-family:"STKaiti","KaiTi",serif;font-size:clamp(28px,4vw,38px);letter-spacing:.16em
    }
    #jy-poem-app .jy-pinyin{font-size:12px;color:var(--jy-muted);letter-spacing:.08em;margin-bottom:5px;display:none}
    #jy-poem-app .jy-show-pinyin .jy-pinyin{display:block}
    #jy-poem-app .jy-hint{margin-top:22px;color:var(--jy-muted);font-size:13px}

#jy-poem-app .jy-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
    #jy-poem-app .jy-explain{
      background:var(--jy-card);border:1px solid var(--jy-line);border-radius:24px;padding:26px;
      box-shadow:0 12px 36px rgba(64,111,150,.08);position:relative;overflow:hidden
    }
    #jy-poem-app .jy-explain:after{
      content:"";position:absolute;width:80px;height:80px;border-radius:50%;right:-28px;top:-28px;
      background:rgba(126,184,232,.09)
    }
    #jy-poem-app .jy-num{
      width:42px;height:42px;display:grid;place-items:center;border-radius:15px;
      background:#eaf5ff;color:var(--jy-blue-deep);font-weight:900;margin-bottom:16px
    }
    #jy-poem-app.jy-night .jy-num{background:#294966;color:#c4e4ff}
    #jy-poem-app .jy-explain h3{margin:0 0 9px;font-family:"STKaiti","KaiTi",serif;font-size:25px;color:var(--jy-ink)}
    #jy-poem-app .jy-explain p{margin:0;color:var(--jy-muted);line-height:1.9;font-size:15px}

#jy-poem-app .jy-word-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
    #jy-poem-app .jy-word{
      text-align:center;background:var(--jy-card);border:1px solid var(--jy-line);border-radius:22px;
      padding:24px 14px;box-shadow:0 10px 28px rgba(64,111,150,.07)
    }
    #jy-poem-app .jy-word b{
      display:block;font-family:"STKaiti","KaiTi",serif;font-size:31px;margin-bottom:8px;color:var(--jy-ink)
    }
    #jy-poem-app .jy-word small{color:var(--jy-muted);line-height:1.7}

#jy-poem-app .jy-story{
      display:grid;grid-template-columns:.8fr 1.2fr;gap:20px;
      background:linear-gradient(135deg,rgba(255,246,211,.72),rgba(236,248,255,.78));
      border:1px solid var(--jy-line);border-radius:30px;padding:34px;box-shadow:var(--jy-shadow)
    }
    #jy-poem-app.jy-night .jy-story{
      background:linear-gradient(135deg,rgba(73,68,48,.5),rgba(35,62,89,.8))
    }
    #jy-poem-app .jy-story-emoji{font-size:76px;display:grid;place-items:center;min-height:170px}
    #jy-poem-app .jy-story h3{font-size:25px;margin:0 0 12px;color:var(--jy-ink)}
    #jy-poem-app .jy-story p{color:var(--jy-muted);line-height:2;margin:0}

#jy-poem-app .jy-memory{
      margin-bottom:72px;background:var(--jy-card);border:1px solid var(--jy-line);border-radius:30px;
      padding:32px;display:flex;align-items:center;justify-content:space-between;gap:24px;box-shadow:var(--jy-shadow)
    }
    #jy-poem-app .jy-memory h3{margin:0 0 8px;font-size:24px;color:var(--jy-ink)}
    #jy-poem-app .jy-memory p{margin:0;color:var(--jy-muted);line-height:1.8}
    #jy-poem-app .jy-chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    #jy-poem-app .jy-chip{
      padding:9px 13px;border-radius:999px;background:#fff8db;color:#806a29;font-weight:700;font-size:13px
    }
    #jy-poem-app.jy-night .jy-chip{background:#514b35;color:#f5df9b}

#jy-poem-app .jy-footer{text-align:center;color:var(--jy-muted);padding:6px 0 35px;font-size:13px}
    #jy-poem-app .jy-toast{
      position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);
      padding:11px 16px;border-radius:14px;background:#31455a;color:#fff;
      opacity:0;pointer-events:none;transition:.25s ease;z-index:99999;font-size:14px
    }
    #jy-poem-app .jy-toast.jy-show{opacity:1;transform:translate(-50%,0)}

@media (max-width:820px){
      #jy-poem-app .jy-hero{grid-template-columns:1fr;padding:36px 26px 22px}
      #jy-poem-app .jy-scene{height:360px;margin-top:20px}
      #jy-poem-app .jy-grid{grid-template-columns:1fr}
      #jy-poem-app .jy-word-grid{grid-template-columns:repeat(2,1fr)}
      #jy-poem-app .jy-story{grid-template-columns:1fr}
      #jy-poem-app .jy-story-emoji{min-height:90px}
      #jy-poem-app .jy-memory{align-items:flex-start;flex-direction:column}
      #jy-poem-app .jy-chips{justify-content:flex-start}
    }

@media (max-width:520px){
      #jy-poem-app{border-radius:20px}
      #jy-poem-app .jy-shell{width:min(100% - 20px,1120px)}
      #jy-poem-app .jy-topbar{padding-top:14px}
      #jy-poem-app .jy-brand{font-size:14px}
      #jy-poem-app .jy-brand-dot{width:32px;height:32px}
      #jy-poem-app .jy-hero{min-height:auto;border-radius:28px;padding:30px 20px 15px}
      #jy-poem-app .jy-title{font-size:54px}
      #jy-poem-app .jy-subtitle{font-size:14px}
      #jy-poem-app .jy-scene{height:315px}
      #jy-poem-app .jy-moon{width:116px;height:116px;right:20px}
      #jy-poem-app .jy-mountain{height:145px}
      #jy-poem-app .jy-house{transform:scale(.86);transform-origin:left bottom;left:26px}
      #jy-poem-app .jy-tree{transform:scale(.85);transform-origin:right bottom}
      #jy-poem-app .jy-section{padding-top:56px}
      #jy-poem-app .jy-poem-card{padding:24px 12px}
      #jy-poem-app .jy-han{font-size:29px}
      #jy-poem-app .jy-explain{padding:22px}
      #jy-poem-app .jy-word{padding:20px 10px}
      #jy-poem-app .jy-story{padding:25px}
    }
  </style>
</head>
<body>
<div id="jy-poem-app">
  <header class="jy-shell jy-topbar">
    <div class="jy-brand"><span class="jy-brand-dot">🌙</span><span>诗词小课堂</span></div>
    <button class="jy-icon-btn" id="jyThemeBtn" type="button">🌙 夜间</button>
  </header>

<main class="jy-shell">
    <section class="jy-hero">
      <div>
        <div class="jy-tag">✨ 一首写给月亮和故乡的小诗</div>
        <div class="jy-poet">唐 · 李白</div>
        <h1 class="jy-title">静夜思</h1>
        <p class="jy-subtitle">
          安静的夜里，一束月光落在床前。<br>
          李白抬头看见月亮，也在这一刻想起了远方的家。
        </p>
        <div class="jy-hero-actions">
          <button class="jy-primary" id="jyReadBtn" type="button">🔊 听我读一遍</button>
          <button class="jy-secondary" id="jyPinyinBtn" type="button">拼音小助手</button>
        </div>
      </div>

<section class="jy-section">
      <div class="jy-section-title">
        <span>先读一读</span>
        <h2>月光里的四句话</h2>
        <p>点一点诗句，会有轻轻的提示。</p>
      </div>
      <div class="jy-poem-card" id="jyPoemCard">
        <div class="jy-poem-lines">
          <div class="jy-poem-line" data-tip="月光照在床前，亮亮的，像铺了一层白色。">
            <div class="jy-pinyin">chuáng qián míng yuè guāng</div>
            <div class="jy-han">床前明月光，</div>
          </div>
          <div class="jy-poem-line" data-tip="诗人一时恍惚，以为地上结了一层洁白的霜。">
            <div class="jy-pinyin">yí shì dì shàng shuāng</div>
            <div class="jy-han">疑是地上霜。</div>
          </div>
          <div class="jy-poem-line" data-tip="抬起头，望着夜空中明亮的月亮。">
            <div class="jy-pinyin">jǔ tóu wàng míng yuè</div>
            <div class="jy-han">举头望明月，</div>
          </div>
          <div class="jy-poem-line" data-tip="低下头，心里想起远方的故乡。">
            <div class="jy-pinyin">dī tóu sī gù xiāng</div>
            <div class="jy-han">低头思故乡。</div>
          </div>
        </div>
        <div class="jy-hint" id="jyLineHint">🌟 小提示：这首诗从“看见月光”，慢慢走到了“想念故乡”。</div>
      </div>
    </section>

<section class="jy-section">
      <div class="jy-section-title">
        <span>一句一句懂</span>
        <h2>小朋友也能看懂的解析</h2>
        <p>四句诗，就像四个连续的小镜头。</p>
      </div>
      <div class="jy-grid">
        <article class="jy-explain"><div class="jy-num">01</div><h3>床前明月光</h3><p>夜很安静，月光从窗外照进来，落在床前。这里没有复杂的景物，只有一束清清亮亮的月光。</p></article>
        <article class="jy-explain"><div class="jy-num">02</div><h3>疑是地上霜</h3><p>月光太白、太亮了，李白迷迷糊糊地一看，还以为地上落了霜。“疑”就是“好像、以为”的意思。</p></article>
        <article class="jy-explain"><div class="jy-num">03</div><h3>举头望明月</h3><p>他抬起头，看见天上的月亮。月亮离自己很远，却又像在陪着每一个离家的人。</p></article>
        <article class="jy-explain"><div class="jy-num">04</div><h3>低头思故乡</h3><p>看着看着，他又低下了头。眼前是月光，心里却回到了家乡——想起熟悉的人、熟悉的地方。</p></article>
      </div>
    </section>

<section class="jy-section">
      <div class="jy-section-title">
        <span>关键词</span>
        <h2>四个字，抓住整首诗</h2>
        <p>记住这些词，也就记住了诗里的画面和感情。</p>
      </div>
      <div class="jy-word-grid">
        <div class="jy-word"><b>疑</b><small>以为、好像<br>月光白得像霜</small></div>
        <div class="jy-word"><b>举</b><small>抬起<br>把头抬起来看</small></div>
        <div class="jy-word"><b>思</b><small>思念、想念<br>心里牵挂着</small></div>
        <div class="jy-word"><b>故乡</b><small>自己的家乡<br>心里最熟悉的地方</small></div>
      </div>
    </section>

<section class="jy-section">
      <div class="jy-section-title">
        <span>诗里藏着什么</span>
        <h2>从月亮，到想家</h2>
      </div>
      <div class="jy-story">
        <div class="jy-story-emoji">🌙🏠</div>
        <div>
          <h3>这首诗为什么这么打动人？</h3>
          <p>因为李白没有直接说很多“我很想家”的话。他只是写：月光很白，我抬头看看月亮，又低下头想起故乡。动作很小，感情却很深。我们也会有这样的时刻——看到一件熟悉的东西，忽然就想起一个人、一个地方。</p>
        </div>
      </div>
    </section>

<section class="jy-section">
      <div class="jy-section-title">
        <span>一分钟记忆法</span>
        <h2>像看四格小漫画一样背</h2>
      </div>
      <div class="jy-memory">
        <div>
          <h3>光 → 霜 → 月 → 乡</h3>
          <p>先看见床前的<strong>光</strong>，错认成地上的<strong>霜</strong>；抬头望<strong>月</strong>，低头思<strong>乡</strong>。</p>
        </div>
        <div class="jy-chips">
          <span class="jy-chip">① 月光</span>
          <span class="jy-chip">② 白霜</span>
          <span class="jy-chip">③ 抬头</span>
          <span class="jy-chip">④ 想家</span>
        </div>
      </div>
    </section>
  </main>

<div class="jy-footer jy-shell">今夜读一首小诗，也把月光装进口袋里。 ✨</div>
  <div class="jy-toast" id="jyToast"></div>
</div>

const themeBtn = document.getElementById('jyThemeBtn');
  const pinyinBtn = document.getElementById('jyPinyinBtn');
  const poemCard = document.getElementById('jyPoemCard');
  const readBtn = document.getElementById('jyReadBtn');
  const toast = document.getElementById('jyToast');
  const lineHint = document.getElementById('jyLineHint');

themeBtn?.addEventListener('click', () => {
    app.classList.toggle('jy-night');
    themeBtn.textContent = app.classList.contains('jy-night') ? '☀️ 日间' : '🌙 夜间';
  });

pinyinBtn?.addEventListener('click', () => {
    poemCard.classList.toggle('jy-show-pinyin');
    const show = poemCard.classList.contains('jy-show-pinyin');
    pinyinBtn.textContent = show ? '隐藏拼音' : '拼音小助手';
    showToast(show ? '拼音出现啦 ✨' : '拼音收起来啦');
  });

app.querySelectorAll('.jy-poem-line').forEach(line => {
    line.addEventListener('click', () => {
      app.querySelectorAll('.jy-poem-line').forEach(x => x.classList.remove('jy-active'));
      line.classList.add('jy-active');
      lineHint.textContent = '💡 ' + line.dataset.tip;
    });
  });

readBtn?.addEventListener('click', () => {
    if (!('speechSynthesis' in window)) {
      showToast('当前浏览器暂不支持语音朗读');
      return;
    }
    speechSynthesis.cancel();
    const u = new SpeechSynthesisUtterance('静夜思，唐，李白。床前明月光，疑是地上霜。举头望明月，低头思故乡。');
    u.lang = 'zh-CN';
    u.rate = 0.82;
    u.pitch = 1.04;
    u.onstart = () => readBtn.textContent = '🌙 正在朗读…';
    u.onend = u.onerror = () => readBtn.textContent = '🔊 听我读一遍';
    speechSynthesis.speak(u);
  });

let timer;
  function showToast(msg){
    toast.textContent = msg;
    toast.classList.add('jy-show');
    clearTimeout(timer);
    timer = setTimeout(() => toast.classList.remove('jy-show'), 1800);
  }
})();
</script>
</body>
</html>
!!!

最后修改：2026 年 08 月 09 日