paulmataruso/patchmon.net
1
0
Fork 0
mirror of https://github.com/9technologygroup/patchmon.net.git synced 2025-11-17 20:32:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: make triangular accents more visible across background

Browse Source 
- 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
This commit is contained in:
Muhammad Ibrahim
2025-10-28 18:55:30 +00:00
parent aba0f5cb6b
commit f6d23e45b2
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/Layout.jsx
View File

@@ -296,21 +296,21 @@ const Layout = ({ children }) => {
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add subtle triangular shapes as accents // Add subtle triangular shapes as accents across entire background
const cellSize = 200; const cellSize = 180;
const cols = Math.ceil(canvas.width / cellSize) + 1; const cols = Math.ceil(canvas.width / cellSize) + 1;
const rows = Math.ceil(canvas.height / cellSize) + 1; const rows = Math.ceil(canvas.height / cellSize) + 1;
for (let y = 0; y < rows; y++) { for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) { for (let x = 0; x < cols; x++) {
const idx = y * cols + x; const idx = y * cols + x;
// Only draw some triangles (sparse pattern) // Draw more triangles (less sparse)
if (random(seed + idx + 5000) > 0.7) { if (random(seed + idx + 5000) > 0.4) {
const baseX = const baseX =
x * cellSize + random(seed + idx * 3) * cellSize * 0.8; x * cellSize + random(seed + idx * 3) * cellSize * 0.8;
const baseY = const baseY =
y * cellSize + random(seed + idx * 3 + 100) * cellSize * 0.8; 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.beginPath();
ctx.moveTo(baseX, baseY); ctx.moveTo(baseX, baseY);
@@ -318,8 +318,8 @@ const Layout = ({ children }) => {
ctx.lineTo(baseX + size / 2, baseY - size * 0.866); ctx.lineTo(baseX + size / 2, baseY - size * 0.866);
ctx.closePath(); ctx.closePath();
// Very faint white with low opacity // More visible white with slightly higher opacity
ctx.fillStyle = `rgba(255, 255, 255, ${0.02 + random(seed + idx * 5) * 0.03})`; ctx.fillStyle = `rgba(255, 255, 255, ${0.05 + random(seed + idx * 5) * 0.08})`;
ctx.fill(); ctx.fill();
} }
} }

14
frontend/src/pages/Login.jsx
View File

@@ -110,21 +110,21 @@ const Login = () => {
ctx.fillStyle = gradient; ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add subtle triangular shapes as accents // Add subtle triangular shapes as accents across entire background
const cellSize = 200; const cellSize = 180;
const cols = Math.ceil(canvas.width / cellSize) + 1; const cols = Math.ceil(canvas.width / cellSize) + 1;
const rows = Math.ceil(canvas.height / cellSize) + 1; const rows = Math.ceil(canvas.height / cellSize) + 1;
for (let y = 0; y < rows; y++) { for (let y = 0; y < rows; y++) {
for (let x = 0; x < cols; x++) { for (let x = 0; x < cols; x++) {
const idx = y * cols + x; const idx = y * cols + x;
// Only draw some triangles (sparse pattern) // Draw more triangles (less sparse)
if (random(seed + idx + 5000) > 0.7) { if (random(seed + idx + 5000) > 0.4) {
const baseX = const baseX =
x * cellSize + random(seed + idx * 3) * cellSize * 0.8; x * cellSize + random(seed + idx * 3) * cellSize * 0.8;
const baseY = const baseY =
y * cellSize + random(seed + idx * 3 + 100) * cellSize * 0.8; 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.beginPath();
ctx.moveTo(baseX, baseY); ctx.moveTo(baseX, baseY);
@@ -132,8 +132,8 @@ const Login = () => {
ctx.lineTo(baseX + size / 2, baseY - size * 0.866); ctx.lineTo(baseX + size / 2, baseY - size * 0.866);
ctx.closePath(); ctx.closePath();
// Very faint white with low opacity // More visible white with slightly higher opacity
ctx.fillStyle = `rgba(255, 255, 255, ${0.02 + random(seed + idx * 5) * 0.03})`; ctx.fillStyle = `rgba(255, 255, 255, ${0.05 + random(seed + idx * 5) * 0.08})`;
ctx.fill(); ctx.fill();
} }
} }