Add matrix background and prepare filters

frontend/static/css/style.css

@@ -1,18 +1,49 @@
 body {
-    font-family: Arial, sans-serif;
+    background-color: black;
+    color: #e0e0e0;
+    font-family: "Courier New", monospace;
     margin: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-height: 100vh;
 }
 header {
-    margin-bottom: 20px;
-}
-table {
-    width: 100%;
-    border-collapse: collapse;
-}
-th, td {
-    border: 1px solid #ccc;
-    padding: 5px 10px;
+    color: #00ff41;
+    text-shadow: 0 0 10px #00ff41;
+    margin-bottom: 50px;
+    text-align: center;
 }
+
 th {
-    background-color: #f0f0f0;
+    /* background-color: rgba(0, 0, 0, 0.8); */
+    background-color: #00ff41;
+    color: black;
+    font-weight:bold;
 }
+
+td {
+    background-color: rgba(0, 0, 0, 0.6);
+    font-weight:bold;
+}
+
+.user-info {
+    display:inline;
+    margin-right:10px;
+    color:white;
+    font-weight:bold;
+}
+
+.bold-label {
+    font-weight: bold;
+}
+
+#results-table td:nth-child(2),
+#results-table td:nth-child(3),
+#results-table td:nth-child(4),
+#results-table th:nth-child(2),
+#results-table th:nth-child(3),
+#results-table th:nth-child(4) {
+    white-space: nowrap; /* empêche le retour à la ligne */
+    text-align: center;
+}

frontend/static/js/matrix.js

@@ -0,0 +1,76 @@
+const canvas = document.getElementById('matrix');
+const ctx = canvas.getContext('2d');
+
+canvas.width = window.innerWidth;
+canvas.height = window.innerHeight;
+
+const chars = "アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲンあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん0123456789!#$%&'()*+,-./:;<=>?@";
+const fontSize = 14;
+let columns = Math.floor(canvas.width / fontSize);
+let drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize);
+
+// Récupère les zones à masquer : formulaire + tableau
+function getMaskRects() {
+    const rects = [];
+    const form = document.getElementById('search-form');
+    if (form) rects.push(form.getBoundingClientRect());
+    const table = document.getElementById('results-table');
+    if (table) rects.push(table.getBoundingClientRect());
+    return rects;
+}
+
+// Calcul de l'opacité selon distance au centre de la zone
+function opacityForPosition(x, y, rects) {
+    if (!rects || rects.length === 0) return 1;
+    let minOpacity = 1;
+    rects.forEach(rect => {
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const dx = x - cx;
+        const dy = y - cy;
+        const distance = Math.sqrt(dx*dx + dy*dy);
+        const radius = Math.max(rect.width, rect.height) * 0.8;
+
+        let alpha;
+        const inner = radius * 0.3;   // centre complètement transparent réduit
+        const outer = radius;         // bord complet visible
+
+        if (distance < inner) alpha = 0;
+        else if (distance > outer) alpha = 1;
+        else alpha = (distance - inner) / (outer - inner); // transition plus large
+
+        if (alpha < minOpacity) minOpacity = alpha;
+    });
+    return minOpacity;
+}
+
+function draw() {
+    ctx.fillStyle = "rgba(0,0,0,0.05)";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    ctx.font = fontSize + "px monospace";
+
+    const maskRects = getMaskRects();
+
+    for (let i = 0; i < drops.length; i++) {
+        const text = chars.charAt(Math.floor(Math.random() * chars.length));
+        const x = i * fontSize;
+        const y = drops[i] * fontSize;
+
+        const alpha = opacityForPosition(x, y, maskRects);
+        ctx.fillStyle = `rgba(0,255,65,${alpha})`;
+        ctx.fillText(text, x, y);
+
+        if (y > canvas.height && Math.random() > 0.98) drops[i] = 0;
+        drops[i]++;
+    }
+}
+
+setInterval(draw, 20);
+
+window.addEventListener('resize', () => {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    columns = Math.floor(canvas.width / fontSize);
+    drops = Array.from({ length: columns }, () => Math.random() * canvas.height / fontSize);
+});