diff --git a/templates/admin_db_index.html b/templates/admin_db_index.html index b63debb..4143b25 100644 --- a/templates/admin_db_index.html +++ b/templates/admin_db_index.html @@ -11,8 +11,8 @@ --border: #2b3240; --text: #e8ecf3; --muted: #9aa4b2; - --accent: #4f8cff; - --accent-hover: #3e78e6; + --accent: #28c76f; + --accent-hover: #20b15f; --success-bg: rgba(46, 204, 113, 0.12); --success-border: rgba(46, 204, 113, 0.35); --danger-bg: rgba(255, 99, 99, 0.12); @@ -162,7 +162,7 @@ width: min(90vw, 560px); padding: 28px 24px; border-radius: 18px; - border: 1px solid rgba(79, 140, 255, 0.35); + border: 1px solid rgba(0, 255, 136, 0.35); background: rgba(12, 17, 26, 0.88); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45); text-align: center; @@ -172,13 +172,13 @@ .matrix-title { font-size: 28px; font-weight: 700; - color: #f4f8ff; + color: #d8ffe9; margin-bottom: 12px; } .matrix-status { font-size: 16px; - color: #c5d2e6; + color: #9ff5c8; line-height: 1.6; } @@ -261,11 +261,15 @@ drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize); } + let lastFrameTime = 0; + const matrixFps = 15; + const matrixFrameInterval = 1000 / matrixFps; + function drawMatrix() { if (!canvas || !ctx) return; - ctx.fillStyle = "rgba(3, 8, 15, 0.10)"; + ctx.fillStyle = "rgba(3, 8, 15, 0.08)"; ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.fillStyle = "#4f8cff"; + ctx.fillStyle = "#00ff88"; ctx.font = `${fontSize}px monospace`; for (let i = 0; i < drops.length; i++) { @@ -273,13 +277,20 @@ const x = i * fontSize; const y = drops[i] * fontSize; ctx.fillText(text, x, y); - if (y > canvas.height && Math.random() > 0.975) { + if (y > canvas.height && Math.random() > 0.985) { drops[i] = 0; } - drops[i] += 1; + drops[i] += 0.65; } + } - matrixAnimationId = requestAnimationFrame(drawMatrix); + function animateMatrix(timestamp) { + if (!matrixAnimationId) return; + if (!lastFrameTime || timestamp - lastFrameTime >= matrixFrameInterval) { + drawMatrix(); + lastFrameTime = timestamp; + } + matrixAnimationId = requestAnimationFrame(animateMatrix); } function startLoader(title, message) { @@ -290,7 +301,8 @@ loader.setAttribute("aria-hidden", "false"); if (!matrixAnimationId) { resizeCanvas(); - drawMatrix(); + lastFrameTime = 0; + matrixAnimationId = requestAnimationFrame(animateMatrix); } }