Rebuild site with Hugo: unified dark theme, SVG logo, data-driven content

2026-07-08 16:14:01 +08:00
parent 0eaec96b68
commit 1214e48733
47 changed files with 1169 additions and 2766 deletions
@@ -0,0 +1,77 @@
+(function () {
+  const canvas = document.getElementById('drag-ball');
+  if (!canvas) return;
+  const ctx = canvas.getContext('2d');
+  const W = 200, H = 200;
+  canvas.width = W;
+  canvas.height = H;
+
+  let ballX = W / 2, ballY = H / 2;
+  let dragging = false;
+  let offsetX = 0, offsetY = 0;
+
+  function drawBall() {
+    ctx.clearRect(0, 0, W, H);
+    const r = 30;
+    const grad = ctx.createRadialGradient(ballX, ballY, 0, ballX, ballY, r);
+    grad.addColorStop(0, '#ffb300');
+    grad.addColorStop(1, '#ff6f00');
+    ctx.beginPath();
+    ctx.arc(ballX, ballY, r, 0, Math.PI * 2);
+    ctx.fillStyle = grad;
+    ctx.fill();
+    ctx.fillStyle = '#fff';
+    ctx.font = '14px sans-serif';
+    ctx.textAlign = 'center';
+    ctx.textBaseline = 'middle';
+    ctx.fillText('(¬‿¬)', ballX, ballY);
+  }
+
+  function getPos(e) {
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = W / rect.width;
+    const scaleY = H / rect.height;
+    if (e.touches) {
+      return {
+        x: (e.touches[0].clientX - rect.left) * scaleX,
+        y: (e.touches[0].clientY - rect.top) * scaleY
+      };
+    }
+    return {
+      x: (e.clientX - rect.left) * scaleX,
+      y: (e.clientY - rect.top) * scaleY
+    };
+  }
+
+  canvas.addEventListener('mousedown', (e) => {
+    const pos = getPos(e);
+    const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
+    if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
+  });
+  canvas.addEventListener('touchstart', (e) => {
+    e.preventDefault();
+    const pos = getPos(e);
+    const dist = Math.hypot(pos.x - ballX, pos.y - ballY);
+    if (dist < 30) { dragging = true; offsetX = pos.x - ballX; offsetY = pos.y - ballY; }
+  }, { passive: false });
+
+  window.addEventListener('mousemove', (e) => {
+    if (!dragging) return;
+    const pos = getPos(e);
+    ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
+    ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
+    drawBall();
+  });
+  window.addEventListener('touchmove', (e) => {
+    if (!dragging) return;
+    const pos = getPos(e);
+    ballX = Math.max(30, Math.min(W - 30, pos.x - offsetX));
+    ballY = Math.max(30, Math.min(H - 30, pos.y - offsetY));
+    drawBall();
+  });
+
+  window.addEventListener('mouseup', () => { dragging = false; });
+  window.addEventListener('touchend', () => { dragging = false; });
+
+  drawBall();
+})();