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

feat: add subtle triangular accents to clean gradient background

Browse Source 
- Kept clean radial gradient base
- Added very faint triangular shapes (2-5% opacity)
- Sparse pattern - only 30% of grid positions
- Random sizes (40-120px) and positions for organic feel
- Perfect balance of clean + subtle geometric detail
This commit is contained in:
Muhammad Ibrahim
2025-10-28 18:53:46 +00:00
parent 2ec2b3992c
commit aba0f5cb6b
2 changed files with 60 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -236,7 +236,7 @@ const Layout = ({ children }) => {
navigate("/hosts?action=add");
};
// Generate clean radial gradient background for dark mode - subtle and modern
// Generate clean radial gradient background with subtle triangular accents for dark mode
useEffect(() => {
const generateBackground = () => {
if (
@@ -295,6 +295,35 @@ const Layout = ({ children }) => {
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add subtle triangular shapes as accents
const cellSize = 200;
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) {
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;
ctx.beginPath();
ctx.moveTo(baseX, baseY);
ctx.lineTo(baseX + size, baseY);
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})`;
ctx.fill();
}
}
}
};
generateBackground();

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

@@ -56,7 +56,7 @@ const Login = () => {
const navigate = useNavigate();
// Generate clean radial gradient background - subtle and modern
// Generate clean radial gradient background with subtle triangular accents
useEffect(() => {
const generateBackground = () => {
if (!canvasRef.current || !themeConfig?.login) return;
@@ -109,6 +109,35 @@ const Login = () => {
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Add subtle triangular shapes as accents
const cellSize = 200;
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) {
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;
ctx.beginPath();
ctx.moveTo(baseX, baseY);
ctx.lineTo(baseX + size, baseY);
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})`;
ctx.fill();
}
}
}
};
generateBackground();