mirror of
https://gitlab.com/vyla-entertainment/home.git
synced 2026-11-14 14:17:25 -05:00
fixed some issues...?
This commit is contained in:
273
ui/index.html
273
ui/index.html
@@ -271,61 +271,66 @@
|
||||
console.warn("OGL Shader background failed to load (offline):", err);
|
||||
}
|
||||
|
||||
if (!window.__OGL_LOADED__) {
|
||||
document.body.style.background = "radial-gradient(circle at 80% 20%, #1e1b4b 0%, #050505 70%)";
|
||||
} else {
|
||||
const { Renderer, Program, Triangle, Mesh } = window.__OGL_LOADED__;
|
||||
const rayContainer = document.getElementById("side-rays");
|
||||
const settings = {
|
||||
speed: 2.5,
|
||||
rayColor1: "#EAB308",
|
||||
rayColor2: "#96c8ff",
|
||||
intensity: 2,
|
||||
spread: 2,
|
||||
origin: "top-right",
|
||||
tilt: 0,
|
||||
saturation: 1.5,
|
||||
blend: 0.75,
|
||||
falloff: 1.6,
|
||||
opacity: 1
|
||||
};
|
||||
window.dispatchEvent(new Event('ogl-ready'));
|
||||
</script>
|
||||
|
||||
function hexToRgb(hex) {
|
||||
const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (!match) return [1, 1, 1];
|
||||
return [
|
||||
parseInt(match[1], 16) / 255,
|
||||
parseInt(match[2], 16) / 255,
|
||||
parseInt(match[3], 16) / 255
|
||||
];
|
||||
}
|
||||
<script>
|
||||
window.addEventListener('ogl-ready', () => {
|
||||
if (!window.__OGL_LOADED__) {
|
||||
document.body.style.background = "radial-gradient(circle at 80% 20%, #1e1b4b 0%, #050505 70%)";
|
||||
} else {
|
||||
const { Renderer, Program, Triangle, Mesh } = window.__OGL_LOADED__;
|
||||
const rayContainer = document.getElementById("side-rays");
|
||||
const settings = {
|
||||
speed: 2.5,
|
||||
rayColor1: "#EAB308",
|
||||
rayColor2: "#96c8ff",
|
||||
intensity: 2,
|
||||
spread: 2,
|
||||
origin: "top-right",
|
||||
tilt: 0,
|
||||
saturation: 1.5,
|
||||
blend: 0.75,
|
||||
falloff: 1.6,
|
||||
opacity: 1
|
||||
};
|
||||
|
||||
function originToFlip(origin) {
|
||||
switch (origin) {
|
||||
case "top-left": return [1, 0];
|
||||
case "bottom-right": return [0, 1];
|
||||
case "bottom-left": return [1, 1];
|
||||
default: return [0, 0];
|
||||
function hexToRgb(hex) {
|
||||
const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
|
||||
if (!match) return [1, 1, 1];
|
||||
return [
|
||||
parseInt(match[1], 16) / 255,
|
||||
parseInt(match[2], 16) / 255,
|
||||
parseInt(match[3], 16) / 255
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
const renderer = new Renderer({
|
||||
dpr: Math.min(window.devicePixelRatio, 2),
|
||||
alpha: true
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
gl.canvas.style.width = "100%";
|
||||
gl.canvas.style.height = "100%";
|
||||
rayContainer.appendChild(gl.canvas);
|
||||
function originToFlip(origin) {
|
||||
switch (origin) {
|
||||
case "top-left": return [1, 0];
|
||||
case "bottom-right": return [0, 1];
|
||||
case "bottom-left": return [1, 1];
|
||||
default: return [0, 0];
|
||||
}
|
||||
}
|
||||
|
||||
const vertexShader = `
|
||||
const renderer = new Renderer({
|
||||
dpr: Math.min(window.devicePixelRatio, 2),
|
||||
alpha: true
|
||||
});
|
||||
const gl = renderer.gl;
|
||||
gl.canvas.style.width = "100%";
|
||||
gl.canvas.style.height = "100%";
|
||||
rayContainer.appendChild(gl.canvas);
|
||||
|
||||
const vertexShader = `
|
||||
attribute vec2 position;
|
||||
void main() {
|
||||
gl_Position = vec4(position, 0.0, 1.0);
|
||||
}
|
||||
`;
|
||||
|
||||
const fragmentShader = `
|
||||
const fragmentShader = `
|
||||
precision highp float;
|
||||
uniform float iTime;
|
||||
uniform vec2 iResolution;
|
||||
@@ -386,77 +391,77 @@ void main() {
|
||||
}
|
||||
`;
|
||||
|
||||
const [flipX, flipY] = originToFlip(settings.origin);
|
||||
const uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: [1, 1] },
|
||||
iSpeed: { value: settings.speed },
|
||||
iRayColor1: { value: hexToRgb(settings.rayColor1) },
|
||||
iRayColor2: { value: hexToRgb(settings.rayColor2) },
|
||||
iIntensity: { value: settings.intensity },
|
||||
iSpread: { value: settings.spread },
|
||||
iFlipX: { value: flipX },
|
||||
iFlipY: { value: flipY },
|
||||
iTilt: { value: settings.tilt },
|
||||
iSaturation: { value: settings.saturation },
|
||||
iBlend: { value: settings.blend },
|
||||
iFalloff: { value: settings.falloff },
|
||||
iOpacity: { value: settings.opacity }
|
||||
};
|
||||
const [flipX, flipY] = originToFlip(settings.origin);
|
||||
const uniforms = {
|
||||
iTime: { value: 0 },
|
||||
iResolution: { value: [1, 1] },
|
||||
iSpeed: { value: settings.speed },
|
||||
iRayColor1: { value: hexToRgb(settings.rayColor1) },
|
||||
iRayColor2: { value: hexToRgb(settings.rayColor2) },
|
||||
iIntensity: { value: settings.intensity },
|
||||
iSpread: { value: settings.spread },
|
||||
iFlipX: { value: flipX },
|
||||
iFlipY: { value: flipY },
|
||||
iTilt: { value: settings.tilt },
|
||||
iSaturation: { value: settings.saturation },
|
||||
iBlend: { value: settings.blend },
|
||||
iFalloff: { value: settings.falloff },
|
||||
iOpacity: { value: settings.opacity }
|
||||
};
|
||||
|
||||
const geometry = new Triangle(gl);
|
||||
const program = new Program(gl, { vertex: vertexShader, fragment: fragmentShader, uniforms });
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
const geometry = new Triangle(gl);
|
||||
const program = new Program(gl, { vertex: vertexShader, fragment: fragmentShader, uniforms });
|
||||
const mesh = new Mesh(gl, { geometry, program });
|
||||
|
||||
function resize() {
|
||||
const width = rayContainer.clientWidth;
|
||||
const height = rayContainer.clientHeight;
|
||||
renderer.dpr = Math.min(window.devicePixelRatio, 2);
|
||||
renderer.setSize(width, height);
|
||||
uniforms.iResolution.value = [width * renderer.dpr, height * renderer.dpr];
|
||||
}
|
||||
function resize() {
|
||||
const width = rayContainer.clientWidth;
|
||||
const height = rayContainer.clientHeight;
|
||||
renderer.dpr = Math.min(window.devicePixelRatio, 2);
|
||||
renderer.setSize(width, height);
|
||||
uniforms.iResolution.value = [width * renderer.dpr, height * renderer.dpr];
|
||||
}
|
||||
|
||||
window.addEventListener("resize", resize);
|
||||
resize();
|
||||
window.addEventListener("resize", resize);
|
||||
resize();
|
||||
|
||||
function animate(time) {
|
||||
uniforms.iTime.value = time * 0.001;
|
||||
renderer.render({ scene: mesh });
|
||||
function animate(time) {
|
||||
uniforms.iTime.value = time * 0.001;
|
||||
renderer.render({ scene: mesh });
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
requestAnimationFrame(animate);
|
||||
|
||||
function initLiquidButtons() {
|
||||
const borderWidth = 0.16;
|
||||
const brightness = 35;
|
||||
const opacity = 0.55;
|
||||
const blur = 4;
|
||||
const displace = 1.2;
|
||||
const borderRadius = 9999;
|
||||
const distortionScale = -380;
|
||||
const redOffset = -25;
|
||||
const greenOffset = 0;
|
||||
const blueOffset = 25;
|
||||
const xChannel = "R";
|
||||
const yChannel = "G";
|
||||
const mixBlendMode = "screen";
|
||||
function initLiquidButtons() {
|
||||
const borderWidth = 0.16;
|
||||
const brightness = 35;
|
||||
const opacity = 0.55;
|
||||
const blur = 4;
|
||||
const displace = 1.2;
|
||||
const borderRadius = 9999;
|
||||
const distortionScale = -380;
|
||||
const redOffset = -25;
|
||||
const greenOffset = 0;
|
||||
const blueOffset = 25;
|
||||
const xChannel = "R";
|
||||
const yChannel = "G";
|
||||
const mixBlendMode = "screen";
|
||||
|
||||
document.querySelectorAll(".liquid-glass-btn").forEach((btn, index) => {
|
||||
const filterId = `glass-filter-${index + 1}`;
|
||||
btn.style.setProperty("--filter-id", `url(#${filterId})`);
|
||||
document.querySelectorAll(".liquid-glass-btn").forEach((btn, index) => {
|
||||
const filterId = `glass-filter-${index + 1}`;
|
||||
btn.style.setProperty("--filter-id", `url(#${filterId})`);
|
||||
|
||||
const feImage = btn.querySelector(".fe-image");
|
||||
const redChannel = btn.querySelector(".redchannel");
|
||||
const greenChannel = btn.querySelector(".greenchannel");
|
||||
const blueChannel = btn.querySelector(".bluechannel");
|
||||
const gaussianBlur = btn.querySelector(".gaussianBlur");
|
||||
const feImage = btn.querySelector(".fe-image");
|
||||
const redChannel = btn.querySelector(".redchannel");
|
||||
const greenChannel = btn.querySelector(".greenchannel");
|
||||
const blueChannel = btn.querySelector(".bluechannel");
|
||||
const gaussianBlur = btn.querySelector(".gaussianBlur");
|
||||
|
||||
function generateDisplacementMap() {
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const actualWidth = rect.width || 140;
|
||||
const actualHeight = rect.height || 48;
|
||||
function generateDisplacementMap() {
|
||||
const rect = btn.getBoundingClientRect();
|
||||
const actualWidth = rect.width || 140;
|
||||
const actualHeight = rect.height || 48;
|
||||
|
||||
const svgContent = `
|
||||
const svgContent = `
|
||||
<svg viewBox="0 0 ${actualWidth} ${actualHeight}" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient id="red-grad-${index}" x1="100%" y1="0%" x2="0%" y2="0%">
|
||||
@@ -473,32 +478,33 @@ void main() {
|
||||
<rect width="${actualWidth}" height="${actualHeight}" rx="${borderRadius}" fill="url(#blue-grad-${index})" style="mix-blend-mode:${mixBlendMode}"/>
|
||||
</svg>
|
||||
`;
|
||||
return "data:image/svg+xml," + encodeURIComponent(svgContent);
|
||||
}
|
||||
return "data:image/svg+xml," + encodeURIComponent(svgContent);
|
||||
}
|
||||
|
||||
function update() {
|
||||
feImage.setAttribute("href", generateDisplacementMap());
|
||||
redChannel.setAttribute("scale", distortionScale + redOffset);
|
||||
greenChannel.setAttribute("scale", distortionScale + greenOffset);
|
||||
blueChannel.setAttribute("scale", distortionScale + blueOffset);
|
||||
[redChannel, greenChannel, blueChannel].forEach((ch) => {
|
||||
ch.setAttribute("xChannelSelector", xChannel);
|
||||
ch.setAttribute("yChannelSelector", yChannel);
|
||||
});
|
||||
gaussianBlur.setAttribute("stdDeviation", displace);
|
||||
}
|
||||
function update() {
|
||||
feImage.setAttribute("href", generateDisplacementMap());
|
||||
redChannel.setAttribute("scale", distortionScale + redOffset);
|
||||
greenChannel.setAttribute("scale", distortionScale + greenOffset);
|
||||
blueChannel.setAttribute("scale", distortionScale + blueOffset);
|
||||
[redChannel, greenChannel, blueChannel].forEach((ch) => {
|
||||
ch.setAttribute("xChannelSelector", xChannel);
|
||||
ch.setAttribute("yChannelSelector", yChannel);
|
||||
});
|
||||
gaussianBlur.setAttribute("stdDeviation", displace);
|
||||
}
|
||||
|
||||
update();
|
||||
btn.classList.remove("glass-surface--fallback");
|
||||
btn.classList.add("glass-surface--svg");
|
||||
update();
|
||||
btn.classList.remove("glass-surface--fallback");
|
||||
btn.classList.add("glass-surface--svg");
|
||||
|
||||
const observer = new ResizeObserver(() => setTimeout(update, 0));
|
||||
observer.observe(btn);
|
||||
});
|
||||
const observer = new ResizeObserver(() => setTimeout(update, 0));
|
||||
observer.observe(btn);
|
||||
});
|
||||
}
|
||||
|
||||
initLiquidButtons();
|
||||
}
|
||||
|
||||
initLiquidButtons();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
@@ -535,8 +541,17 @@ void main() {
|
||||
}
|
||||
|
||||
async function initTauriEvents() {
|
||||
const eventApi = window.__TAURI__?.event || window.__TAURI_INTERNALS__;
|
||||
if (!eventApi || typeof eventApi.listen !== 'function') {
|
||||
let eventApi = null;
|
||||
|
||||
if (window.__TAURI__?.event && typeof window.__TAURI__.event.listen === 'function') {
|
||||
eventApi = window.__TAURI__.event;
|
||||
} else if (window.__TAURI_INTERNALS__ && typeof window.__TAURI_INTERNALS__.listen === 'function') {
|
||||
eventApi = window.__TAURI_INTERNALS__;
|
||||
} else if (window.__TAURI__ && typeof window.__TAURI__.listen === 'function') {
|
||||
eventApi = window.__TAURI__;
|
||||
}
|
||||
|
||||
if (!eventApi) {
|
||||
setTimeout(initTauriEvents, 50);
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user