216 lines
8.9 KiB
JavaScript
216 lines
8.9 KiB
JavaScript
/* AnwarPi — WebGL light-beam background + scroll reveal.
|
|
Loads deferred on every page; no-ops gracefully if WebGL is unavailable. */
|
|
(function () {
|
|
"use strict";
|
|
var reduced = false;
|
|
try { reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches; } catch (e) {}
|
|
var staticMode = false;
|
|
try { staticMode = new URLSearchParams(location.search).has("static"); } catch (e) {}
|
|
|
|
/* ================= WebGL beam field ================= */
|
|
function initWebGL() {
|
|
var canvas = document.createElement("canvas");
|
|
canvas.id = "anwarpi-bg";
|
|
canvas.setAttribute("aria-hidden", "true");
|
|
var first = document.body.firstChild;
|
|
if (first) document.body.insertBefore(canvas, first);
|
|
else document.body.appendChild(canvas);
|
|
|
|
var gl = canvas.getContext("webgl", { antialias: false, alpha: false, depth: false, stencil: false })
|
|
|| canvas.getContext("experimental-webgl");
|
|
if (!gl) { canvas.parentNode.removeChild(canvas); return; }
|
|
|
|
var vertSrc = "attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);}";
|
|
var fragSrc = [
|
|
"precision highp float;",
|
|
"uniform float uTime;",
|
|
"uniform vec2 uRes;",
|
|
"uniform vec2 uMouse;",
|
|
"float hash(float n){return fract(sin(n*127.1)*43758.5453);}",
|
|
"void main(){",
|
|
" vec2 uv = gl_FragCoord.xy / uRes;", /* y: 0 bottom -> 1 top */
|
|
" float t = uTime * 0.06;",
|
|
" float v = 0.0;",
|
|
/* vertical light beams — the AnwarPi "A" ray motif */
|
|
" for(int i = 0; i < 7; i++){",
|
|
" float fi = float(i);",
|
|
" float x = 0.08 + 0.84 * hash(fi + 1.0) + 0.05 * sin(t * 0.7 + fi * 2.4);",
|
|
" x += (uMouse.x - x) * 0.16;",
|
|
" float w = 0.016 + 0.05 * hash(fi + 7.0);",
|
|
" float beam = exp(-pow((uv.x - x) / w, 2.0));",
|
|
" float flick = 0.55 + 0.45 * sin(t * 1.1 + fi * 1.7);",
|
|
" flick *= 1.0 + 0.55 * exp(-pow((uv.x - uMouse.x) / 0.24, 2.0));",
|
|
" float fade = smoothstep(1.0, 0.12, uv.y);", /* brighter toward the bottom, like the mark */
|
|
" v += beam * flick * fade * (0.10 + 0.17 * hash(fi + 13.0));",
|
|
" }",
|
|
/* cursor halo — the light follows the visitor */
|
|
" v += 0.11 * exp(-length((uv - uMouse) * vec2(1.0, 0.9)) * 4.5);",
|
|
/* broad floor glow + soft vignette */
|
|
" v += 0.15 * exp(-uv.y * 2.4);",
|
|
" v *= smoothstep(1.3, 0.55, uv.y);",
|
|
" v = clamp(v, 0.0, 1.0);",
|
|
/* deep blue-black base, aligned with the shared --bg token */
|
|
" vec3 base = vec3(0.0005, 0.0618, 0.0896);",
|
|
" gl_FragColor = vec4(base + vec3(v), 1.0);",
|
|
"}"
|
|
].join("\n");
|
|
|
|
function compile(type, src) {
|
|
var s = gl.createShader(type);
|
|
gl.shaderSource(s, src);
|
|
gl.compileShader(s);
|
|
if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) { gl.deleteShader(s); return null; }
|
|
return s;
|
|
}
|
|
var vs = compile(gl.VERTEX_SHADER, vertSrc);
|
|
var fs = compile(gl.FRAGMENT_SHADER, fragSrc);
|
|
if (!vs || !fs) { canvas.parentNode.removeChild(canvas); return; }
|
|
var prog = gl.createProgram();
|
|
gl.attachShader(prog, vs); gl.attachShader(prog, fs); gl.linkProgram(prog);
|
|
if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) { canvas.parentNode.removeChild(canvas); return; }
|
|
gl.useProgram(prog);
|
|
|
|
var buf = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
|
|
var loc = gl.getAttribLocation(prog, "p");
|
|
gl.enableVertexAttribArray(loc);
|
|
gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
|
|
var uTime = gl.getUniformLocation(prog, "uTime");
|
|
var uRes = gl.getUniformLocation(prog, "uRes");
|
|
var uMouse = gl.getUniformLocation(prog, "uMouse");
|
|
|
|
/* ---- pointer reaction: beams lean toward the cursor, halo follows ---- */
|
|
var mouseTX = 0.5, mouseTY = 0.55, mouseX = 0.5, mouseY = 0.55;
|
|
if (!reduced && !staticMode) {
|
|
window.addEventListener("pointermove", function (e) {
|
|
if (e.pointerType === "touch") return;
|
|
mouseTX = e.clientX / window.innerWidth;
|
|
mouseTY = 1 - e.clientY / window.innerHeight;
|
|
}, { passive: true });
|
|
document.addEventListener("pointerleave", function () {
|
|
mouseTX = 0.5; mouseTY = 0.55;
|
|
});
|
|
}
|
|
gl.uniform2f(uMouse, mouseX, mouseY);
|
|
|
|
var DPR_CAP = 1.5;
|
|
function resize() {
|
|
var dpr = Math.min(window.devicePixelRatio || 1, DPR_CAP);
|
|
var w = Math.max(1, Math.floor(window.innerWidth * dpr));
|
|
var h = Math.max(1, Math.floor(window.innerHeight * dpr));
|
|
if (canvas.width !== w || canvas.height !== h) {
|
|
canvas.width = w; canvas.height = h;
|
|
gl.viewport(0, 0, w, h);
|
|
}
|
|
gl.uniform2f(uRes, canvas.width, canvas.height);
|
|
}
|
|
|
|
var start = (window.performance && performance.now()) || 0;
|
|
function draw(now) {
|
|
mouseX += (mouseTX - mouseX) * 0.07;
|
|
mouseY += (mouseTY - mouseY) * 0.07;
|
|
gl.uniform1f(uTime, (now - start) / 1000);
|
|
gl.uniform2f(uMouse, mouseX, mouseY);
|
|
gl.drawArrays(gl.TRIANGLES, 0, 3);
|
|
}
|
|
|
|
resize();
|
|
draw(start); /* paint one frame synchronously so screenshots capture the field */
|
|
|
|
/* ---- article reading mode: fade the field down once past the header ---- */
|
|
if (document.body.hasAttribute("data-anw-dim")) {
|
|
var first = document.querySelector("main") && document.querySelector("main").firstElementChild;
|
|
var dimFrom = first ? first.offsetHeight : 420;
|
|
var onScroll = function () {
|
|
canvas.style.opacity = (window.scrollY || 0) > dimFrom ? "0.22" : "1";
|
|
};
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
onScroll();
|
|
}
|
|
|
|
if (reduced || staticMode) {
|
|
window.addEventListener("resize", function () { resize(); draw(start); });
|
|
return;
|
|
}
|
|
var running = true;
|
|
function loop(now) {
|
|
if (running) { draw(now); }
|
|
window.requestAnimationFrame(loop);
|
|
}
|
|
window.requestAnimationFrame(loop);
|
|
document.addEventListener("visibilitychange", function () {
|
|
running = !document.hidden;
|
|
if (running) start = (window.performance && performance.now()) - 0; /* keep phase simple */
|
|
});
|
|
}
|
|
|
|
/* ================= Scroll reveal ================= */
|
|
function initReveal() {
|
|
if (reduced || staticMode) return;
|
|
var vh = window.innerHeight || 800;
|
|
var candidates = document.querySelectorAll(
|
|
"main section > .container > *, main > .container > *, main .container > .grid > *, main .grid > *"
|
|
);
|
|
var seen = {};
|
|
var targets = [];
|
|
for (var i = 0; i < candidates.length; i++) {
|
|
var el = candidates[i];
|
|
if (seen[el.anwId]) continue;
|
|
if (el.closest(".menu-panel, .modal, dialog")) continue;
|
|
var r = el.getBoundingClientRect();
|
|
if (r.top < vh * 0.92) continue; /* above the fold: show instantly, never hide */
|
|
el.anwId = "anw" + i;
|
|
seen[el.anwId] = 1;
|
|
el.setAttribute("data-anw", "");
|
|
el.style.transitionDelay = ((i % 3) * 70) + "ms";
|
|
targets.push(el);
|
|
}
|
|
if (!targets.length) return;
|
|
document.documentElement.classList.add("anw-anim");
|
|
/* Force reveal after a safety window so nothing can stay hidden */
|
|
window.setTimeout(function () {
|
|
targets.forEach(function (el) { el.classList.add("anw-in"); });
|
|
}, 3000);
|
|
if (!("IntersectionObserver" in window)) return;
|
|
var io = new IntersectionObserver(function (entries) {
|
|
entries.forEach(function (entry) {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("anw-in");
|
|
io.unobserve(entry.target);
|
|
}
|
|
});
|
|
}, { threshold: 0.1, rootMargin: "0px 0px -8% 0px" });
|
|
targets.forEach(function (el) { io.observe(el); });
|
|
}
|
|
|
|
/* ================= Current page in mobile navigation ================= */
|
|
function initActiveNav() {
|
|
var topnav = document.querySelector(".topnav");
|
|
if (!topnav) return;
|
|
|
|
var page = (location.pathname.split("/").pop() || "index.html").toLowerCase();
|
|
var selector = {
|
|
"index.html": ".logo",
|
|
"arabic-ai-learning-catalog.html": "nav a[href^='#catalog']",
|
|
"arabic-ai-learning-catalog-v2.html": "nav a[href^='#catalog']",
|
|
"article-agent-guide.html": "nav a[href='article-agent-guide.html']",
|
|
"post-locked.html": "nav a[href='article-agent-guide.html']",
|
|
"post-unlocked.html": "nav a[href='article-agent-guide.html']",
|
|
"subscription.html": "nav a[href='#exclusive-guides']",
|
|
"vip-onboarding.html": "nav a[href='subscription.html']",
|
|
"account-settings.html": ".nav-account",
|
|
"login.html": ".logo",
|
|
"forgot-password.html": ".logo",
|
|
"privacy.html": "nav a[href='privacy.html']"
|
|
}[page];
|
|
|
|
var active = selector && topnav.querySelector(selector);
|
|
if (active) active.setAttribute("aria-current", "page");
|
|
}
|
|
|
|
function boot() { initActiveNav(); initWebGL(); initReveal(); }
|
|
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", boot);
|
|
else boot();
|
|
})();
|