519 lignes
15 KiB
JavaScript
519 lignes
15 KiB
JavaScript
(function () {
|
|
function init() {
|
|
const cv = document.getElementById("skc");
|
|
if (!cv) return;
|
|
const ctx = cv.getContext("2d");
|
|
|
|
/* ── CANVAS SIZING ──
|
|
Width = sky-login-card width
|
|
Height = sky-login-card height
|
|
Read after DOM paint via double requestAnimationFrame to get final dimensions.
|
|
ResizeObserver keeps it in sync if card height changes later.
|
|
*/
|
|
function resizeCanvas() {
|
|
const card = document.getElementById("sky-login-card");
|
|
if (!card) return;
|
|
const w = Math.round(card.offsetWidth) || 440;
|
|
const h = Math.round(card.offsetHeight) || 600;
|
|
if (cv.width !== w) cv.width = w;
|
|
if (cv.height !== h) cv.height = h;
|
|
}
|
|
|
|
/* Wait two frames so card.offsetHeight reflects final layout */
|
|
requestAnimationFrame(function () {
|
|
requestAnimationFrame(function () {
|
|
resizeCanvas();
|
|
});
|
|
});
|
|
window.addEventListener("resize", resizeCanvas);
|
|
|
|
/* Track card height changes (font load, zoom, etc.) */
|
|
if (typeof ResizeObserver !== "undefined") {
|
|
const ro = new ResizeObserver(resizeCanvas);
|
|
const card = document.getElementById("sky-login-card");
|
|
if (card) ro.observe(card);
|
|
}
|
|
|
|
/* Dynamic accessors — always reflect current canvas size */
|
|
const dim = {
|
|
get W() {
|
|
return cv.width;
|
|
},
|
|
get H() {
|
|
return cv.height;
|
|
},
|
|
get CX() {
|
|
return cv.width / 2;
|
|
},
|
|
get CY() {
|
|
return cv.height / 2;
|
|
},
|
|
};
|
|
|
|
/* ── 3D GEOMETRY ──
|
|
Raw coordinates in mm, centred on AX / OZ.
|
|
Scale (SC) applied dynamically in proj() every frame.
|
|
X range : 64.491..151.341 = 86.85 mm centre AX = 107.916
|
|
Z range : 50.926..94.147 = 43.22 mm centre OZ = 72.536
|
|
D = half-depth of extrusion (mm)
|
|
*/
|
|
const AX = 107.916,
|
|
OZ = 72.536,
|
|
D = 9;
|
|
|
|
/* Logo is rendered in the TOP THIRD of the canvas.
|
|
CY_LOGO = vertical centre of the logo rendering area.
|
|
Scale fits the logo into the top portion with margin. */
|
|
const LOGO_ZONE = 0.42; /* logo uses top 42% of canvas height */
|
|
|
|
function getSC() {
|
|
const availH = dim.H * LOGO_ZONE;
|
|
const scX = dim.W / (86.85 + D * 2);
|
|
const scZ = availH / (43.22 + D * 2);
|
|
return Math.min(scX, scZ) * 0.86;
|
|
}
|
|
|
|
/* Vertical centre of the logo zone */
|
|
function getLogoY() {
|
|
return (dim.H * LOGO_ZONE) / 2;
|
|
}
|
|
|
|
function sv(x, z) {
|
|
return [x - AX, z - OZ];
|
|
}
|
|
|
|
/* Diamond (rotated square) */
|
|
const LO = [
|
|
sv(106.916, 51.0),
|
|
sv(119.2, 61.8),
|
|
sv(107.8, 74.5),
|
|
sv(95.812, 62.842),
|
|
];
|
|
/* Right quadrilateral */
|
|
const FD = [
|
|
sv(121.188, 63.842),
|
|
sv(151.341, 94.147),
|
|
sv(109.186, 94.147),
|
|
sv(109.186, 77.044),
|
|
];
|
|
/* Left quadrilateral (mirror of FD) */
|
|
const FG = [
|
|
sv(93.748, 64.742),
|
|
sv(106.646, 77.044),
|
|
sv(106.646, 94.147),
|
|
sv(64.491, 94.147),
|
|
];
|
|
|
|
/* Extrude a 2D polygon into a 3D prism.
|
|
Returns {verts, edges}.
|
|
Front faces: indices 0..n-1 (y = -D)
|
|
Back faces: indices n..2n-1 (y = +D) */
|
|
function extrude(pts2d) {
|
|
const n = pts2d.length;
|
|
const verts = [
|
|
...pts2d.map(([x, z]) => [x, -D, z]),
|
|
...pts2d.map(([x, z]) => [x, D, z]),
|
|
];
|
|
const edges = [];
|
|
for (let i = 0; i < n; i++) {
|
|
const j = (i + 1) % n;
|
|
edges.push([i, j, "f"]); /* front edge */
|
|
edges.push([i + n, j + n, "b"]); /* back edge */
|
|
edges.push([i, i + n, "s"]); /* side edge */
|
|
}
|
|
return { verts, edges };
|
|
}
|
|
|
|
const shapes = [extrude(LO), extrude(FD), extrude(FG)];
|
|
|
|
/* ── PERSPECTIVE PROJECTION ──
|
|
SC applied here every frame so resizing is instant.
|
|
Logo is centred on getLogoY() (top zone), not dim.CY. */
|
|
function proj([x, y, z]) {
|
|
const sc = getSC();
|
|
const s = 1.0 / (1.0 + y / 500.0);
|
|
return [dim.CX + x * sc * s, getLogoY() + z * sc * s, s, y];
|
|
}
|
|
|
|
/* ── ROTATION HELPERS ── */
|
|
function rx(p, a) {
|
|
const c = Math.cos(a),
|
|
s = Math.sin(a);
|
|
return p.map(([x, y, z]) => [x, y * c - z * s, y * s + z * c]);
|
|
}
|
|
function ry(p, a) {
|
|
const c = Math.cos(a),
|
|
s = Math.sin(a);
|
|
return p.map(([x, y, z]) => [x * c + z * s, y, -x * s + z * c]);
|
|
}
|
|
function rz(p, a) {
|
|
const c = Math.cos(a),
|
|
s = Math.sin(a);
|
|
return p.map(([x, y, z]) => [x * c - y * s, x * s + y * c, z]);
|
|
}
|
|
|
|
/* ── FLUORESCENT TUBE EFFECT ──
|
|
4-pass rendering: wide glow → mid glow → tight glow → core wire */
|
|
function tube(x1, y1, x2, y2, bright, al) {
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x2, y2);
|
|
ctx.strokeStyle = "rgba(100,180,255,0.05)";
|
|
ctx.lineWidth = 20;
|
|
ctx.globalAlpha = al * 0.55;
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x2, y2);
|
|
ctx.strokeStyle = bright
|
|
? "rgba(60,190,255,0.20)"
|
|
: "rgba(15,80,200,0.08)";
|
|
ctx.lineWidth = 8;
|
|
ctx.globalAlpha = al * 0.88;
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x2, y2);
|
|
ctx.strokeStyle = bright
|
|
? "rgba(150,225,255,0.65)"
|
|
: "rgba(45,120,255,0.22)";
|
|
ctx.lineWidth = 2.4;
|
|
ctx.globalAlpha = al;
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.moveTo(x1, y1);
|
|
ctx.lineTo(x2, y2);
|
|
ctx.strokeStyle = bright
|
|
? "rgba(225,246,255,0.98)"
|
|
: "rgba(85,165,255,0.52)";
|
|
ctx.lineWidth = 0.65;
|
|
ctx.globalAlpha = al;
|
|
ctx.stroke();
|
|
}
|
|
|
|
/* ── CRT ARTEFACT STATE ── */
|
|
let t = 0,
|
|
glT = 0,
|
|
glL = [],
|
|
scanY = 0,
|
|
scanOn = false,
|
|
scanTmr = 0;
|
|
let flickAlpha = 1.0,
|
|
flickTarget = 1.0,
|
|
flickTimer = 0;
|
|
|
|
function spawnGlitch() {
|
|
glL = [];
|
|
const n = (2 + Math.random() * 5) | 0;
|
|
for (let i = 0; i < n; i++)
|
|
glL.push({
|
|
y: (Math.random() * dim.H) | 0,
|
|
h: (1 + Math.random() * 5) | 0,
|
|
dx: (Math.random() - 0.5) * 26,
|
|
a: 0.28 + Math.random() * 0.5,
|
|
});
|
|
glT = (3 + Math.random() * 8) | 0;
|
|
}
|
|
|
|
/* ── MAIN RENDER LOOP ── */
|
|
function draw() {
|
|
const W = dim.W,
|
|
H = dim.H,
|
|
CX = dim.CX;
|
|
|
|
ctx.clearRect(0, 0, W, H);
|
|
|
|
/* Global flicker (all shapes at once) */
|
|
if (--flickTimer <= 0) {
|
|
flickTarget = Math.random() < 0.06 ? 0.55 + Math.random() * 0.35 : 1.0;
|
|
flickTimer = (2 + Math.random() * 12) | 0;
|
|
}
|
|
flickAlpha += (flickTarget - flickAlpha) * 0.18;
|
|
|
|
/* Slow tilted rotation */
|
|
const ax = t * 0.0042 + 0.2,
|
|
ay = t * 0.0078;
|
|
//const ax = 0;
|
|
//ay = 0;
|
|
|
|
const allEdges = [];
|
|
|
|
shapes.forEach(function ({ verts, edges }) {
|
|
let pts = verts;
|
|
pts = rx(pts, ax);
|
|
pts = ry(pts, ay);
|
|
pts = rz(pts, 0.07);
|
|
const pr = pts.map(proj);
|
|
edges.forEach(function ([a, b, tp]) {
|
|
allEdges.push({ pr, a, b, tp, d: (pr[a][3] + pr[b][3]) * 0.5 });
|
|
});
|
|
});
|
|
|
|
/* Ambient glow centred on logo zone */
|
|
const logoY = getLogoY();
|
|
const g = ctx.createRadialGradient(CX, logoY, 5, CX, logoY, 100);
|
|
g.addColorStop(0, "rgba(0,65,195," + 0.14 * flickAlpha + ")");
|
|
g.addColorStop(1, "rgba(0,0,0,0)");
|
|
ctx.fillStyle = g;
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillRect(0, 0, W, H);
|
|
|
|
/* Painter's algorithm — back to front */
|
|
allEdges.sort(function (u, v) {
|
|
return v.d - u.d;
|
|
});
|
|
allEdges.forEach(function ({ pr, a, b, tp, d }) {
|
|
const [ax2, ay2] = pr[a],
|
|
[bx, by] = pr[b];
|
|
const d01 = (d + D) / (2 * D);
|
|
const bright = tp === "f";
|
|
const base =
|
|
tp === "f"
|
|
? 0.52 + d01 * 0.46
|
|
: tp === "b"
|
|
? 0.07 + d01 * 0.06
|
|
: 0.17 + d01 * 0.22;
|
|
tube(ax2, ay2, bx, by, bright, base * flickAlpha);
|
|
});
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
/* Glitch: horizontal band shifts + compression block artefacts */
|
|
if (glT > 0) {
|
|
glT--;
|
|
glL.forEach(function (gl) {
|
|
try {
|
|
const sl = ctx.getImageData(0, gl.y, W, gl.h);
|
|
ctx.globalAlpha = gl.a;
|
|
ctx.putImageData(sl, gl.dx, gl.y);
|
|
} catch (e) {}
|
|
ctx.fillStyle = "rgba(0,150,255,0.04)";
|
|
ctx.globalAlpha = 1;
|
|
ctx.fillRect(0, gl.y, W, gl.h);
|
|
});
|
|
if (Math.random() < 0.4) {
|
|
ctx.globalAlpha = 0.08;
|
|
ctx.fillStyle = "#00eeff";
|
|
ctx.fillRect(0, (Math.random() * H) | 0, W, 1);
|
|
}
|
|
if (Math.random() < 0.25) {
|
|
ctx.globalAlpha = 0.12;
|
|
ctx.fillStyle = "rgba(0,80,220,0.5)";
|
|
ctx.fillRect(
|
|
(Math.random() * (W - 40)) | 0,
|
|
(Math.random() * (H - 8)) | 0,
|
|
(18 + Math.random() * 38) | 0,
|
|
(2 + Math.random() * 7) | 0
|
|
);
|
|
}
|
|
}
|
|
|
|
/* Rolling scan line */
|
|
if (scanOn) {
|
|
ctx.globalAlpha = 0.06;
|
|
ctx.fillStyle = "rgba(80,200,255,1)";
|
|
ctx.fillRect(0, scanY, W, 2);
|
|
scanY = (scanY + 3) % H;
|
|
if (--scanTmr <= 0) scanOn = false;
|
|
}
|
|
|
|
/* Phosphor burn (persistence) */
|
|
if (Math.random() < 0.016) {
|
|
ctx.globalAlpha = 0.025;
|
|
ctx.fillStyle = "rgba(0,120,255,1)";
|
|
ctx.fillRect(
|
|
(CX - 50 + Math.random() * 100) | 0,
|
|
(logoY - 30 + Math.random() * 60) | 0,
|
|
(Math.random() * 25) | 0,
|
|
1
|
|
);
|
|
}
|
|
|
|
ctx.globalAlpha = 1;
|
|
|
|
/* Random artefact triggers */
|
|
if (Math.random() < 0.012) spawnGlitch();
|
|
if (Math.random() < 0.006) {
|
|
scanOn = true;
|
|
scanY = 0;
|
|
scanTmr = (20 + Math.random() * 30) | 0;
|
|
}
|
|
|
|
t++;
|
|
|
|
requestAnimationFrame(draw);
|
|
}
|
|
|
|
draw();
|
|
} /* end init() */
|
|
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", init);
|
|
} else {
|
|
init();
|
|
}
|
|
})();
|
|
|
|
/* ── BRIDGE: Skynet UI → hidden Roundcube form ── */
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
/* Detect Roundcube auth error and show Skynet error box */
|
|
const rcError = document.querySelector(
|
|
"#messagestack .alert-warning, #messagestack .alert-danger, #messagestack .alert"
|
|
);
|
|
if (rcError && rcError.textContent.trim() !== "") {
|
|
const skyError = document.getElementById("sky-error");
|
|
skyError.textContent = "⚠ AUTHENTIFICATION REFUSÉE — ACCÈS INTERDIT";
|
|
skyError.classList.add("visible");
|
|
const card = document.getElementById("sky-login-card");
|
|
card.style.borderColor = "rgba(255,68,68,0.5)";
|
|
card.style.boxShadow = "0 0 30px rgba(255,68,68,0.1)";
|
|
const ms = document.getElementById("messagestack");
|
|
if (ms) ms.style.display = "none";
|
|
}
|
|
|
|
/* Submit handler: copy values then submit real RC form */
|
|
document
|
|
.getElementById("sky-submit-btn")
|
|
.addEventListener("click", function () {
|
|
const user = document.getElementById("sky-user").value.trim();
|
|
const pass = document.getElementById("sky-pass").value;
|
|
|
|
if (!user || !pass) {
|
|
document.getElementById("sky-error").textContent =
|
|
"⚠ IDENTIFIANTS MANQUANTS";
|
|
document.getElementById("sky-error").classList.add("visible");
|
|
return;
|
|
}
|
|
|
|
const rcUser =
|
|
document.getElementById("rcmloginuser") ||
|
|
document.querySelector('#login-form input[name="_user"]');
|
|
const rcPass =
|
|
document.getElementById("rcmloginpwd") ||
|
|
document.querySelector('#login-form input[name="_pass"]');
|
|
|
|
if (rcUser) rcUser.value = user;
|
|
if (rcPass) rcPass.value = pass;
|
|
|
|
const btn = document.getElementById("sky-submit-btn");
|
|
btn.textContent = "AUTHENTIFICATION...";
|
|
btn.style.borderColor = "var(--cyan)";
|
|
btn.style.color = "var(--cyan)";
|
|
|
|
const rcForm = document.getElementById("login-form");
|
|
if (rcForm) {
|
|
rcForm.style.display = "block";
|
|
rcForm.submit();
|
|
}
|
|
});
|
|
|
|
/* Submit on Enter key */
|
|
["sky-user", "sky-pass"].forEach(function (id) {
|
|
document.getElementById(id).addEventListener("keydown", function (e) {
|
|
if (e.key === "Enter") document.getElementById("sky-submit-btn").click();
|
|
});
|
|
});
|
|
|
|
/* Auto-focus username field */
|
|
document.getElementById("sky-user").focus();
|
|
});
|
|
|
|
/* ── FULLSCREEN PARTICLE BACKGROUND ── */
|
|
const canvas = document.getElementById("bg-canvas");
|
|
const ctx = canvas.getContext("2d");
|
|
|
|
function resize() {
|
|
canvas.width = window.innerWidth;
|
|
canvas.height = window.innerHeight;
|
|
}
|
|
resize();
|
|
window.addEventListener("resize", resize);
|
|
|
|
const particles = [];
|
|
for (let i = 0; i < 80; i++) {
|
|
particles.push({
|
|
x: Math.random() * window.innerWidth,
|
|
y: Math.random() * window.innerHeight,
|
|
vx: (Math.random() - 0.5) * 0.4,
|
|
vy: -Math.random() * 0.6 - 0.1,
|
|
r: Math.random() * 1.5 + 0.5,
|
|
alpha: Math.random() * 0.5 + 0.1,
|
|
color: Math.random() > 0.5 ? "#1a6fff" : "#00aaff",
|
|
});
|
|
}
|
|
|
|
const streams = [];
|
|
for (let i = 0; i < 14; i++) {
|
|
streams.push({
|
|
x: Math.random() * window.innerWidth,
|
|
y: Math.random() * window.innerHeight,
|
|
speed: Math.random() * 1.5 + 0.5,
|
|
length: Math.random() * 80 + 40,
|
|
alpha: Math.random() * 0.15 + 0.05,
|
|
});
|
|
}
|
|
|
|
function drawBg() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
|
|
/* Data streams */
|
|
streams.forEach(function (s) {
|
|
const grad = ctx.createLinearGradient(s.x, s.y - s.length, s.x, s.y);
|
|
grad.addColorStop(0, "rgba(26,111,255,0)");
|
|
grad.addColorStop(1, "rgba(0,170,255," + s.alpha + ")");
|
|
ctx.strokeStyle = grad;
|
|
ctx.lineWidth = 1;
|
|
ctx.beginPath();
|
|
ctx.moveTo(s.x, s.y - s.length);
|
|
ctx.lineTo(s.x, s.y);
|
|
ctx.stroke();
|
|
s.y += s.speed;
|
|
if (s.y > canvas.height + s.length) {
|
|
s.y = -s.length;
|
|
s.x = Math.random() * canvas.width;
|
|
}
|
|
});
|
|
|
|
/* Floating particles */
|
|
particles.forEach(function (p) {
|
|
ctx.beginPath();
|
|
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
|
|
ctx.fillStyle = p.color;
|
|
ctx.globalAlpha = p.alpha;
|
|
ctx.fill();
|
|
ctx.globalAlpha = 1;
|
|
p.x += p.vx;
|
|
p.y += p.vy;
|
|
if (p.y < -5) {
|
|
p.y = canvas.height + 5;
|
|
p.x = Math.random() * canvas.width;
|
|
}
|
|
if (p.x < -5) p.x = canvas.width + 5;
|
|
if (p.x > canvas.width + 5) p.x = -5;
|
|
});
|
|
|
|
/* Connection lines between nearby particles */
|
|
for (let i = 0; i < particles.length; i++) {
|
|
for (let j = i + 1; j < particles.length; j++) {
|
|
const dx = particles[i].x - particles[j].x;
|
|
const dy = particles[i].y - particles[j].y;
|
|
const dist = Math.sqrt(dx * dx + dy * dy);
|
|
if (dist < 100) {
|
|
ctx.globalAlpha = (1 - dist / 100) * 0.3;
|
|
ctx.lineWidth = 0.5;
|
|
ctx.strokeStyle = "#00cfff";
|
|
ctx.beginPath();
|
|
ctx.moveTo(particles[i].x, particles[i].y);
|
|
ctx.lineTo(particles[j].x, particles[j].y);
|
|
ctx.stroke();
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
}
|
|
}
|
|
requestAnimationFrame(drawBg);
|
|
}
|
|
drawBg();
|