diff --git a/src/utils/stats.js b/src/utils/stats.js index fe8f805011903dee1bcb1947ae1b231a9d89be8f..8461906cbf83b559fe9f95a15159a9219baf82d3 100644 --- a/src/utils/stats.js +++ b/src/utils/stats.js @@ -112,31 +112,93 @@ console.log("Script stats.js chargé !"); } // BORDURE ------------------------------------------------------------------------------------------ + function injectBorder() { + const css = ` + #border-svg { + position: fixed; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + pointer-events: none; + z-index: 999999; + } + @keyframes dashAnimation { + from { + stroke-dashoffset: 400; + } + to { + stroke-dashoffset: 0; + } + } + `; + const style = document.createElement("style"); + style.textContent = css; + document.head.appendChild(style); + + const svgNS = "http://www.w3.org/2000/svg"; + const svg = document.createElementNS(svgNS, "svg"); + svg.setAttribute("id", "border-svg"); + svg.setAttribute("viewBox", "0 0 100 100"); + svg.setAttribute("preserveAspectRatio", "none"); + + const defs = document.createElementNS(svgNS, "defs"); + const linearGradient = document.createElementNS(svgNS, "linearGradient"); + linearGradient.setAttribute("id", "border-gradient"); + linearGradient.setAttribute("x1", "0%"); + linearGradient.setAttribute("y1", "0%"); + linearGradient.setAttribute("x2", "100%"); + linearGradient.setAttribute("y2", "0%"); + const stop1 = document.createElementNS(svgNS, "stop"); + stop1.setAttribute("offset", "0%"); + stop1.setAttribute("stop-color", "#DDD6F3"); + const stop2 = document.createElementNS(svgNS, "stop"); + stop2.setAttribute("offset", "50%"); + stop2.setAttribute("stop-color", "#784BA0"); + const stop3 = document.createElementNS(svgNS, "stop"); + stop3.setAttribute("offset", "100%"); + stop3.setAttribute("stop-color", "#2B86C5"); + + linearGradient.appendChild(stop1); + linearGradient.appendChild(stop2); + linearGradient.appendChild(stop3); + defs.appendChild(linearGradient); + svg.appendChild(defs); + + const rect = document.createElementNS(svgNS, "rect"); + rect.setAttribute("x", "0.5"); + rect.setAttribute("y", "0.5"); + rect.setAttribute("width", "98"); + rect.setAttribute("height", "98"); + rect.setAttribute("fill", "none"); + rect.setAttribute("stroke", "url(#border-gradient)"); + rect.setAttribute("stroke-width", "0.5"); + rect.setAttribute("stroke-dasharray", "200 200"); + rect.setAttribute("stroke-dashoffset", "400"); + rect.style.animation = "dashAnimation 8s ease-in-out infinite"; + + svg.appendChild(rect); + document.body.appendChild(svg); + } + + // Fonction pour ajouter la bordure function addViewportBorder() { - const existingBorder = document.getElementById("viewport-border"); - if (existingBorder) { - existingBorder.remove(); + if (!document.getElementById("border-svg")) { + injectBorder(); } - const border = document.createElement("div"); - border.id = "viewport-border"; - border.style.position = "fixed"; - border.style.top = "0"; - border.style.left = "0"; - border.style.width = "100vw"; - border.style.height = "100vh"; - border.style.boxSizing = "border-box"; - border.style.border = "8px solid red"; - border.style.pointerEvents = "none"; - border.style.zIndex = "999999"; - document.body.appendChild(border); } - + // Fonction pour retirer la bordure function removeViewportBorder() { - const border = document.getElementById("viewport-border"); - if (border) { - border.remove(); + const svg = document.getElementById("border-svg"); + if (svg) { + svg.remove(); } } + + + + + // GESTION DES MESSAGES ------------------------------------------------------------------------------------------ browser.runtime.onMessage.addListener((message) => {