From f6d23e45b2afeb9b0413fa8b52c1d9794f92c988 Mon Sep 17 00:00:00 2001 From: Muhammad Ibrahim Date: Tue, 28 Oct 2025 18:55:30 +0000 Subject: [PATCH] feat: make triangular accents more visible across background - Increased triangle opacity from 2-5% to 5-13% - Increased coverage from 30% to 60% of grid positions - Slightly larger triangles (50-150px vs 40-120px) - Smaller cell size (180px vs 200px) for better distribution - Now clearly visible across entire background --- frontend/src/components/Layout.jsx | 14 +++++++------- frontend/src/pages/Login.jsx | 14 +++++++------- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/Layout.jsx b/frontend/src/components/Layout.jsx index 966b254..f647487 100644 --- a/frontend/src/components/Layout.jsx +++ b/frontend/src/components/Layout.jsx @@ -296,21 +296,21 @@ const Layout = ({ children }) => { ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Add subtle triangular shapes as accents - const cellSize = 200; + // Add subtle triangular shapes as accents across entire background + const cellSize = 180; const cols = Math.ceil(canvas.width / cellSize) + 1; const rows = Math.ceil(canvas.height / cellSize) + 1; for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const idx = y * cols + x; - // Only draw some triangles (sparse pattern) - if (random(seed + idx + 5000) > 0.7) { + // Draw more triangles (less sparse) + if (random(seed + idx + 5000) > 0.4) { const baseX = x * cellSize + random(seed + idx * 3) * cellSize * 0.8; const baseY = y * cellSize + random(seed + idx * 3 + 100) * cellSize * 0.8; - const size = 40 + random(seed + idx * 4) * 80; + const size = 50 + random(seed + idx * 4) * 100; ctx.beginPath(); ctx.moveTo(baseX, baseY); @@ -318,8 +318,8 @@ const Layout = ({ children }) => { ctx.lineTo(baseX + size / 2, baseY - size * 0.866); ctx.closePath(); - // Very faint white with low opacity - ctx.fillStyle = `rgba(255, 255, 255, ${0.02 + random(seed + idx * 5) * 0.03})`; + // More visible white with slightly higher opacity + ctx.fillStyle = `rgba(255, 255, 255, ${0.05 + random(seed + idx * 5) * 0.08})`; ctx.fill(); } } diff --git a/frontend/src/pages/Login.jsx b/frontend/src/pages/Login.jsx index c0e38ac..4141c48 100644 --- a/frontend/src/pages/Login.jsx +++ b/frontend/src/pages/Login.jsx @@ -110,21 +110,21 @@ const Login = () => { ctx.fillStyle = gradient; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Add subtle triangular shapes as accents - const cellSize = 200; + // Add subtle triangular shapes as accents across entire background + const cellSize = 180; const cols = Math.ceil(canvas.width / cellSize) + 1; const rows = Math.ceil(canvas.height / cellSize) + 1; for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const idx = y * cols + x; - // Only draw some triangles (sparse pattern) - if (random(seed + idx + 5000) > 0.7) { + // Draw more triangles (less sparse) + if (random(seed + idx + 5000) > 0.4) { const baseX = x * cellSize + random(seed + idx * 3) * cellSize * 0.8; const baseY = y * cellSize + random(seed + idx * 3 + 100) * cellSize * 0.8; - const size = 40 + random(seed + idx * 4) * 80; + const size = 50 + random(seed + idx * 4) * 100; ctx.beginPath(); ctx.moveTo(baseX, baseY); @@ -132,8 +132,8 @@ const Login = () => { ctx.lineTo(baseX + size / 2, baseY - size * 0.866); ctx.closePath(); - // Very faint white with low opacity - ctx.fillStyle = `rgba(255, 255, 255, ${0.02 + random(seed + idx * 5) * 0.03})`; + // More visible white with slightly higher opacity + ctx.fillStyle = `rgba(255, 255, 255, ${0.05 + random(seed + idx * 5) * 0.08})`; ctx.fill(); } }