Comprehensive update: Remove redundant translations, optimize timeline visuals, and update professional content

Author: isparkyou-github

app.js

@@ -420,124 +420,84 @@
     H = canvas.height = canvas.offsetHeight;
   }
 
-  const towerPositions = [0.1, 0.3, 0.5, 0.7, 0.9];
-  const towerHeights   = [50, 65, 80, 65, 50];
-  const sparkPos = { t: 0, i: 0 };
-  let sparkDir = 1;
+  // Predefined tower points for the background grid
+  const nodes = [
+    { x: 0.1,  y: 0.3, label: '2026' },
+    { x: 0.25, y: 0.6, label: '2026' },
+    { x: 0.45, y: 0.25, label: '2021' },
+    { x: 0.65, y: 0.7, label: '2015' },
+    { x: 0.85, y: 0.4, label: '2012' }
+  ];
 
-  function drawMini() {
-    ctx.clearRect(0, 0, W, H);
+  function drawTower(node) {
+    const tx = node.x * W;
+    const ty = node.y * H;
+    const size = 30;
 
-    // Ground line
     ctx.save();
-    ctx.strokeStyle = 'rgba(59,139,255,0.15)';
-    ctx.lineWidth = 1;
+    ctx.strokeStyle = 'rgba(60, 139, 255, 0.4)';
+    ctx.lineWidth = 1.5;
+    
+    // Tower body
     ctx.beginPath();
-    ctx.moveTo(0, H - 2);
-    ctx.lineTo(W, H - 2);
+    ctx.moveTo(tx, ty);
+    ctx.lineTo(tx - 10, ty + size);
+    ctx.lineTo(tx + 10, ty + size);
+    ctx.closePath();
     ctx.stroke();
-    ctx.restore();
 
-    // Towers
-    const tPos = towerPositions.map(p => ({ x: p * W, h: towerHeights[towerPositions.indexOf(p)] }));
+    // Crossarm
+    ctx.beginPath();
+    ctx.moveTo(tx - 8, ty + size * 0.4);
+    ctx.lineTo(tx + 8, ty + size * 0.4);
+    ctx.stroke();
 
-    tPos.forEach(tp => {
-      ctx.save();
-      ctx.strokeStyle = 'rgba(96,160,224,0.6)';
-      ctx.lineWidth = 1.5;
-      // main mast
-      ctx.beginPath();
-      ctx.moveTo(tp.x, H - 2);
-      ctx.lineTo(tp.x, H - tp.h - 2);
-      ctx.stroke();
-      // crossarm
-      const armW = tp.h * 0.5;
-      ctx.beginPath();
-      ctx.moveTo(tp.x - armW / 2, H - tp.h * 0.55 - 2);
-      ctx.lineTo(tp.x + armW / 2, H - tp.h * 0.55 - 2);
-      ctx.stroke();
-      // insulator dots
-      ctx.fillStyle = 'rgba(96,160,224,0.8)';
-      ctx.beginPath();
-      ctx.arc(tp.x - armW / 2, H - tp.h * 0.55 - 2, 2, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.beginPath();
-      ctx.arc(tp.x + armW / 2, H - tp.h * 0.55 - 2, 2, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
-    });
+    // Insulator dots
+    ctx.fillStyle = '#3b8bff';
+    ctx.beginPath();
+    ctx.arc(tx, ty, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.restore();
+  }
 
-    // Wires
-    for (let i = 0; i < tPos.length - 1; i++) {
-      const p1 = { x: tPos[i].x, y: H - tPos[i].h * 0.55 - 2 - 2 };
-      const p2 = { x: tPos[i + 1].x, y: H - tPos[i + 1].h * 0.55 - 2 - 2 };
-      const mx = (p1.x + p2.x) / 2;
-      const my = Math.max(p1.y, p2.y) + 8;
-      ctx.save();
-      ctx.strokeStyle = 'rgba(42,80,128,0.8)';
-      ctx.lineWidth = 1;
-      ctx.beginPath();
-      ctx.moveTo(p1.x, p1.y);
-      ctx.quadraticCurveTo(mx, my, p2.x, p2.y);
-      ctx.stroke();
-      ctx.restore();
-    }
+  function drawBendingLine(n1, n2) {
+    const x1 = n1.x * W;
+    const y1 = n1.y * H;
+    const x2 = n2.x * W;
+    const y2 = n2.y * H;
+    
+    ctx.save();
+    ctx.strokeStyle = 'rgba(60, 139, 255, 0.15)';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([5, 5]);
 
-    // Spark
-    const i = sparkPos.i;
-    if (i < tPos.length - 1) {
-      const t = sparkPos.t;
-      const p1 = { x: tPos[i].x, y: H - tPos[i].h * 0.55 - 2 - 2 };
-      const p2 = { x: tPos[i + 1].x, y: H - tPos[i + 1].h * 0.55 - 2 - 2 };
-      const mx = (p1.x + p2.x) / 2;
-      const my = Math.max(p1.y, p2.y) + 8;
+    ctx.beginPath();
+    ctx.moveTo(x1, y1);
+    
+    // Bending logic: move horizontally then vertically
+    const midX = x1 + (x2 - x1) * 0.5;
+    ctx.lineTo(midX, y1);
+    ctx.lineTo(midX, y2);
+    ctx.lineTo(x2, y2);
+    
+    ctx.stroke();
+    ctx.restore();
+  }
 
-      const sx = (1 - t) * (1 - t) * p1.x + 2 * (1 - t) * t * mx + t * t * p2.x;
-      const sy = (1 - t) * (1 - t) * p1.y + 2 * (1 - t) * t * my + t * t * p2.y;
+  function draw() {
+    ctx.clearRect(0, 0, W, H);
 
-      ctx.save();
-      ctx.fillStyle = '#f0c040';
-      ctx.shadowBlur = 8;
-      ctx.shadowColor = '#f0c040';
-      ctx.beginPath();
-      ctx.arc(sx, sy, 2, 0, Math.PI * 2);
-      ctx.fill();
-      ctx.restore();
+    // Draw connecting lines
+    for (let i = 0; i < nodes.length - 1; i++) {
+      drawBendingLine(nodes[i], nodes[i+1]);
     }
-  }
 
-  function animate() {
-    sparkPos.t += 0.012 * sparkDir;
-    if (sparkPos.t >= 1) {
-      sparkPos.t = 1;
-      if (sparkPos.i < towerPositions.length - 2) {
-        sparkPos.i++;
-        sparkPos.t = 0;
-      } else {
-        sparkDir = -1;
-        sparkPos.t = 1;
-      }
-    } else if (sparkPos.t <= 0) {
-      sparkPos.t = 0;
-      if (sparkPos.i > 0) {
-        sparkPos.i--;
-        sparkPos.t = 1;
-      } else {
-        sparkDir = 1;
-        sparkPos.t = 0;
-      }
-    }
-    drawMini();
-    requestAnimationFrame(animate);
+    // Draw towers
+    nodes.forEach(node => drawTower(node));
   }
 
-  window.addEventListener('load', () => {
-    resize();
-    animate();
-  });
-  window.addEventListener('resize', () => {
-    resize();
-  });
+  window.addEventListener('load', () => { resize(); draw(); });
+  window.addEventListener('resize', () => { resize(); draw(); });
 })();