diff --git a/apps/player/src/components/RobotVerify.vue b/apps/player/src/components/RobotVerify.vue index c30e3ea..d03d043 100644 --- a/apps/player/src/components/RobotVerify.vue +++ b/apps/player/src/components/RobotVerify.vue @@ -15,6 +15,23 @@ const CHARS = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789'; const CANVAS_W = 96; const CANVAS_H = 36; +function cssVar(name: string, fallback: string): string { + const value = getComputedStyle(document.documentElement).getPropertyValue(name).trim(); + return value || fallback; +} + +function withAlpha(color: string, alpha: number): string { + const c = color.trim(); + const rgb = c.match(/^rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)/); + if (rgb) return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`; + const hex = c.match(/^#([0-9a-f]{6})$/i); + if (hex) { + const n = parseInt(hex[1], 16); + return `rgba(${(n >> 16) & 255}, ${(n >> 8) & 255}, ${n & 255}, ${alpha})`; + } + return c; +} + function generateCode() { let result = ''; for (let i = 0; i < 4; i++) { @@ -31,18 +48,22 @@ function drawCaptcha() { const ctx = canvas.getContext('2d'); if (!ctx) return; - ctx.fillStyle = '#0d0d0d'; + const bg = cssVar('--captcha-canvas-bg', '#0d0d0d'); + const charBase = cssVar('--captcha-char', '#f0d875'); + const noiseRgb = cssVar('--captcha-noise-rgb', '255, 255, 255'); + + ctx.fillStyle = bg; ctx.fillRect(0, 0, CANVAS_W, CANVAS_H); for (let i = 0; i < 20; i++) { - ctx.fillStyle = `rgba(255, 255, 255, ${0.03 + Math.random() * 0.06})`; + ctx.fillStyle = `rgba(${noiseRgb}, ${0.03 + Math.random() * 0.06})`; ctx.beginPath(); ctx.arc(Math.random() * CANVAS_W, Math.random() * CANVAS_H, Math.random() * 1.8, 0, Math.PI * 2); ctx.fill(); } for (let i = 0; i < 3; i++) { - ctx.strokeStyle = `rgba(255, 255, 255, ${0.06 + Math.random() * 0.08})`; + ctx.strokeStyle = `rgba(${noiseRgb}, ${0.06 + Math.random() * 0.08})`; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(Math.random() * CANVAS_W, Math.random() * CANVAS_H); @@ -58,7 +79,7 @@ function drawCaptcha() { ctx.translate(x, y); ctx.rotate((Math.random() - 0.5) * 0.35); ctx.font = `bold ${15 + Math.random() * 4}px 'Courier New', monospace`; - ctx.fillStyle = `rgba(240, 216, 117, ${0.85 + Math.random() * 0.15})`; + ctx.fillStyle = withAlpha(charBase, 0.85 + Math.random() * 0.15); ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(code.value[i], 0, 0); diff --git a/apps/player/src/styles.css b/apps/player/src/styles.css index bef46b7..82ce948 100644 --- a/apps/player/src/styles.css +++ b/apps/player/src/styles.css @@ -33,6 +33,9 @@ --odds-accent: #F8971F; --odds-accent-light: #FBBF24; --odds-accent-soft: rgba(248, 151, 31, 0.1); + --captcha-canvas-bg: #E8EDF2; + --captcha-char: #003D6B; + --captcha-noise-rgb: 0, 61, 107; } /* ── Global resets ── */