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

feat: replace with clean radial gradient background

Browse Source 
- Removed busy triangular pattern
- Clean, subtle radial gradient like modern Linux wallpapers
- Light center (top-left) flowing to darker bottom-right corner
- Uses theme colors but much more minimalist
- Daily color rotation maintained
This commit is contained in:
Muhammad Ibrahim
2025-10-28 18:52:00 +00:00
parent f85721b292
commit 2ec2b3992c
2 changed files with 40 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -236,7 +236,7 @@ const Layout = ({ children }) => {
navigate("/hosts?action=add"); navigate("/hosts?action=add");
}; };
// Generate low-poly triangular background pattern for dark mode // Generate clean radial gradient background for dark mode - subtle and modern
useEffect(() => { useEffect(() => {
const generateBackground = () => { const generateBackground = () => {
if ( if (
@@ -252,7 +252,7 @@ const Layout = ({ children }) => {
canvas.height = window.innerHeight; canvas.height = window.innerHeight;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
// Get theme colors // Get theme colors - pick first color from each palette
const xColors = themeConfig.login.xColors || [ const xColors = themeConfig.login.xColors || [
"#667eea", "#667eea",
"#764ba2", "#764ba2",
@@ -265,79 +265,36 @@ const Layout = ({ children }) => {
"#f093fb", "#f093fb",
"#4facfe", "#4facfe",
]; ];
const allColors = [...xColors, ...yColors];
// Use date for daily variation // Use date for daily color rotation
const today = new Date(); const today = new Date();
const seed = const seed =
today.getFullYear() * 10000 + today.getMonth() * 100 + today.getDate(); today.getFullYear() * 10000 + today.getMonth() * 100 + today.getDate();
// Simple seeded random
const random = (s) => { const random = (s) => {
const x = Math.sin(s) * 10000; const x = Math.sin(s) * 10000;
return x - Math.floor(x); return x - Math.floor(x);
}; };
// Create a grid of points with some variance const color1 = xColors[Math.floor(random(seed) * xColors.length)];
const cellSize = themeConfig.login.cellSize || 150; // Larger cells for more subtle effect const color2 = yColors[Math.floor(random(seed + 1000) * yColors.length)];
const variance = themeConfig.login.variance || 0.5;
const cols = Math.ceil(canvas.width / cellSize) + 2;
const rows = Math.ceil(canvas.height / cellSize) + 2;
const points = []; // Create clean radial gradient from center to bottom-right corner
for (let y = -1; y < rows; y++) { const gradient = ctx.createRadialGradient(
for (let x = -1; x < cols; x++) { canvas.width * 0.3, // Center slightly left
const idx = y * cols + x; canvas.height * 0.3, // Center slightly up
const offsetX = (random(seed + idx * 2) - 0.5) * cellSize * variance; 0,
const offsetY = canvas.width * 0.5, // Expand to cover screen
(random(seed + idx * 2 + 1000) - 0.5) * cellSize * variance; canvas.height * 0.5,
points.push({ Math.max(canvas.width, canvas.height) * 1.2,
x: x * cellSize + offsetX, );
y: y * cellSize + offsetY,
color: allColors[Math.floor(random(seed + idx) * allColors.length)],
});
}
}
// Draw triangles between points // Subtle gradient with darker corners
for (let y = 0; y < rows - 1; y++) { gradient.addColorStop(0, color1);
for (let x = 0; x < cols - 1; x++) { gradient.addColorStop(0.6, color2);
const idx = y * cols + x; gradient.addColorStop(1, "#0a0a0a"); // Very dark edges
const p1 = points[idx];
const p2 = points[idx + 1];
const p3 = points[idx + cols];
const p4 = points[idx + cols + 1];
// Draw two triangles per cell ctx.fillStyle = gradient;
// Triangle 1 ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.closePath();
const gradient1 = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
gradient1.addColorStop(0, p1.color);
gradient1.addColorStop(0.5, p2.color);
gradient1.addColorStop(1, p3.color);
ctx.fillStyle = gradient1;
ctx.fill();
// Triangle 2
ctx.beginPath();
ctx.moveTo(p2.x, p2.y);
ctx.lineTo(p4.x, p4.y);
ctx.lineTo(p3.x, p3.y);
ctx.closePath();
const gradient2 = ctx.createLinearGradient(p2.x, p2.y, p4.x, p4.y);
gradient2.addColorStop(0, p2.color);
gradient2.addColorStop(0.5, p4.color);
gradient2.addColorStop(1, p3.color);
ctx.fillStyle = gradient2;
ctx.fill();
}
}
}; };
generateBackground(); generateBackground();

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

@@ -56,7 +56,7 @@ const Login = () => {
const navigate = useNavigate(); const navigate = useNavigate();
// Generate low-poly triangular background pattern based on selected theme // Generate clean radial gradient background - subtle and modern
useEffect(() => { useEffect(() => {
const generateBackground = () => { const generateBackground = () => {
if (!canvasRef.current || !themeConfig?.login) return; if (!canvasRef.current || !themeConfig?.login) return;
@@ -66,7 +66,7 @@ const Login = () => {
canvas.height = canvas.offsetHeight; canvas.height = canvas.offsetHeight;
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
// Get theme colors // Get theme colors - pick first color from each palette
const xColors = themeConfig.login.xColors || [ const xColors = themeConfig.login.xColors || [
"#667eea", "#667eea",
"#764ba2", "#764ba2",
@@ -79,79 +79,36 @@ const Login = () => {
"#f093fb", "#f093fb",
"#4facfe", "#4facfe",
]; ];
const allColors = [...xColors, ...yColors];
// Use date for daily variation // Use date for daily color rotation
const today = new Date(); const today = new Date();
const seed = const seed =
today.getFullYear() * 10000 + today.getMonth() * 100 + today.getDate(); today.getFullYear() * 10000 + today.getMonth() * 100 + today.getDate();
// Simple seeded random
const random = (s) => { const random = (s) => {
const x = Math.sin(s) * 10000; const x = Math.sin(s) * 10000;
return x - Math.floor(x); return x - Math.floor(x);
}; };
// Create a grid of points with some variance const color1 = xColors[Math.floor(random(seed) * xColors.length)];
const cellSize = themeConfig.login.cellSize || 150; // Larger cells for more subtle effect const color2 = yColors[Math.floor(random(seed + 1000) * yColors.length)];
const variance = themeConfig.login.variance || 0.5;
const cols = Math.ceil(canvas.width / cellSize) + 2;
const rows = Math.ceil(canvas.height / cellSize) + 2;
const points = []; // Create clean radial gradient from center to bottom-right corner
for (let y = -1; y < rows; y++) { const gradient = ctx.createRadialGradient(
for (let x = -1; x < cols; x++) { canvas.width * 0.3, // Center slightly left
const idx = y * cols + x; canvas.height * 0.3, // Center slightly up
const offsetX = (random(seed + idx * 2) - 0.5) * cellSize * variance; 0,
const offsetY = canvas.width * 0.5, // Expand to cover screen
(random(seed + idx * 2 + 1000) - 0.5) * cellSize * variance; canvas.height * 0.5,
points.push({ Math.max(canvas.width, canvas.height) * 1.2,
x: x * cellSize + offsetX, );
y: y * cellSize + offsetY,
color: allColors[Math.floor(random(seed + idx) * allColors.length)],
});
}
}
// Draw triangles between points // Subtle gradient with darker corners
for (let y = 0; y < rows - 1; y++) { gradient.addColorStop(0, color1);
for (let x = 0; x < cols - 1; x++) { gradient.addColorStop(0.6, color2);
const idx = y * cols + x; gradient.addColorStop(1, "#0a0a0a"); // Very dark edges
const p1 = points[idx];
const p2 = points[idx + 1];
const p3 = points[idx + cols];
const p4 = points[idx + cols + 1];
// Draw two triangles per cell ctx.fillStyle = gradient;
// Triangle 1 ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.closePath();
const gradient1 = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
gradient1.addColorStop(0, p1.color);
gradient1.addColorStop(0.5, p2.color);
gradient1.addColorStop(1, p3.color);
ctx.fillStyle = gradient1;
ctx.fill();
// Triangle 2
ctx.beginPath();
ctx.moveTo(p2.x, p2.y);
ctx.lineTo(p4.x, p4.y);
ctx.lineTo(p3.x, p3.y);
ctx.closePath();
const gradient2 = ctx.createLinearGradient(p2.x, p2.y, p4.x, p4.y);
gradient2.addColorStop(0, p2.color);
gradient2.addColorStop(0.5, p4.color);
gradient2.addColorStop(1, p3.color);
ctx.fillStyle = gradient2;
ctx.fill();
}
}
}; };
generateBackground(); generateBackground();