master

Branches (2)

Manage

Manage

master

develop

hanzi
/
section6.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>汉字一点通</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/common.css" />
    <style>
      .evolution {
        display: flex;
        justify-content: center;
        margin-top: 20px;
      }
      .evolution img {
        width: 100px;
        height: 100px;
        margin: 0 10px;
      }

      .hanzi-scroll {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        background: #f8f9fa;
        margin: 10px 0;
      }

      .hanzi-scroll::-webkit-scrollbar {
        height: 4px;
      }

      .hanzi-scroll::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      .hanzi-scroll::-webkit-scrollbar-thumb {
        background: #888;
        border-radius: 2px;
      }

      .hanzi-scroll button {
        padding: 5px 10px;
        margin: 0 5px;
        border: 1px solid #007bff;
        background: white;
        color: #007bff;
        border-radius: 3px;
        cursor: pointer;
        flex-shrink: 0;
      }

      .hanzi-scroll button.active {
        background: #007bff;
        color: white;
      }
    </style>
  </head>
  <body>
    <script src="js/config.js"></script>
    <div class="container">
      <h1>Evolution of HANZI</h1>
      <div class="hanzi-scroll">
        <script>
          document.write(
            Object.keys(hanziConfig)
              .map(hanzi =>
                `<button onclick="changeHanzi('${hanzi}')" ${hanzi === currentHanzi ? 'class="active"' : ''}>${hanzi}</button>`
              )
              .join('')
          );
        </script>
      </div>
      <div class="evolution">
        <img src="assets/hanzi/天/1.png" alt="甲骨文" />
        <img src="assets/hanzi/天/2.png" alt="金文" />
        <img src="assets/hanzi/天/3.png" alt="小篆" />
        <img src="assets/hanzi/天/4.png" alt="隶书" />
      </div>
    </div>

    <div class="nav-bottom">
      <a href="section5.html">Let's learn a poem</a>
      <a href="section7.html">The Story of 天</a>
    </div>

    <script>
      async function changeHanzi(hanzi) {
        try {
          const url = new URL(window.location);
          url.searchParams.set('hanzi', hanzi);
          window.history.pushState({}, '', url);

          window.currentHanzi = hanzi;

          document.querySelectorAll('.hanzi-scroll button').forEach(btn => {
            btn.classList.toggle('active', btn.textContent === hanzi);
          });

          const images = document.querySelectorAll('.evolution img');
          images.forEach((img, index) => {
            img.src = `assets/hanzi/${hanzi}/${index + 1}.png`;
            img.alt = `${hanzi} - ${['甲骨文', '金文', '小篆', '隶书'][index]}`;
          });

          const storyLink = document.querySelector('.nav-bottom a:last-child');
          storyLink.textContent = `The Story of ${hanzi}`;
          storyLink.href = `section7.html?hanzi=${hanzi}`;

        } catch (error) {
          console.error(`Error changing hanzi to ${hanzi}:`, error);
          alert(`Failed to change to character ${hanzi}. Please check the console for details.`);
        }
      }

      document.addEventListener('DOMContentLoaded', function() {
        changeHanzi(currentHanzi);
      });
    </script>
  </body>
</html>