script.js

const root = document.documentElement;
const toggle = document.querySelector(".language-toggle");
const current = document.querySelector(".lang-current");
const next = document.querySelector(".lang-next");
let language = "zh";

function applyLanguage(nextLanguage) {
  language = nextLanguage;
  root.lang = language === "zh" ? "zh-CN" : "en";
  document.querySelectorAll("[data-zh][data-en]").forEach((node) => {
    node.textContent = node.dataset[language];
  });
  current.textContent = language === "zh" ? "中文" : "EN";
  next.textContent = language === "zh" ? "EN" : "中文";
}

toggle.addEventListener("click", () => {
  applyLanguage(language === "zh" ? "en" : "zh");
});

const canvas = document.getElementById("field-canvas");
const ctx = canvas.getContext("2d");
let width = 0;
let height = 0;
let points = [];

function resize() {
  const ratio = window.devicePixelRatio || 1;
  width = window.innerWidth;
  height = window.innerHeight;
  canvas.width = Math.floor(width * ratio);
  canvas.height = Math.floor(height * ratio);
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
  points = Array.from({ length: Math.min(72, Math.floor(width / 18)) }, (_, index) => ({
    x: (index * 173) % width,
    y: (index * 97) % height,
    vx: ((index % 5) - 2) * 0.045,
    vy: (((index + 2) % 5) - 2) * 0.045,
  }));
}

function draw(time) {
  ctx.clearRect(0, 0, width, height);
  ctx.lineWidth = 1;

  points.forEach((point, index) => {
    point.x += point.vx;
    point.y += point.vy;
    if (point.x < -20) point.x = width + 20;
    if (point.x > width + 20) point.x = -20;
    if (point.y < -20) point.y = height + 20;
    if (point.y > height + 20) point.y = -20;

    for (let j = index + 1; j < points.length; j += 1) {
      const other = points[j];
      const dx = point.x - other.x;
      const dy = point.y - other.y;
      const distance = Math.hypot(dx, dy);
      if (distance < 150) {
        ctx.strokeStyle = `rgba(15, 118, 110, ${0.12 * (1 - distance / 150)})`;
        ctx.beginPath();
        ctx.moveTo(point.x, point.y);
        ctx.lineTo(other.x, other.y);
        ctx.stroke();
      }
    }
  });

  ctx.strokeStyle = "rgba(183, 78, 42, 0.12)";
  for (let y = 44; y < height; y += 72) {
    ctx.beginPath();
    for (let x = -20; x <= width + 20; x += 20) {
      const wave = Math.sin(x * 0.012 + time * 0.00045 + y * 0.011) * 8;
      if (x === -20) {
        ctx.moveTo(x, y + wave);
      } else {
        ctx.lineTo(x, y + wave);
      }
    }
    ctx.stroke();
  }

  requestAnimationFrame(draw);
}

resize();
applyLanguage("zh");
window.addEventListener("resize", resize);
requestAnimationFrame(draw);