UniverseBow/wa2k.com-Website
1
1
Fork 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

new styles, borders, and fixed dropdown menu

Browse source
This commit is contained in:
UniverseBow 2026-03-15 21:43:33 -07:00
parent 9bcabfe5e7
commit 82724d5ee1
8 changed files with 162 additions and 134 deletions
Download patch file Download diff file Expand all files Collapse all files

36
www/index.html
View file

@ -3,11 +3,6 @@
<head>
<meta charset="utf-8" />
<title>WA2000</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link type="text/css" rel="stylesheet" href="./style.css">
</head>
<body>
@ -268,10 +263,20 @@ function imageDataToDataURL(imageData) {
function applyLiquidGlass() {
const card = document.getElementById('card');
// offsetWidth/Height for map generation (unaffected by zoom)
const w = card.offsetWidth;
const h = card.offsetHeight;
if (w === 0 || h === 0) return;
// getBoundingClientRect for SVG filter dimensions — these must match the
// actual rendered pixel size that backdrop-filter sees at current zoom level
const rect = card.getBoundingClientRect();
const fw = Math.round(rect.width);
const fh = Math.round(rect.height);
CONFIG.borderRadius = parseFloat(getComputedStyle(card).borderRadius) || 25;
const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
const dispDataURL = imageDataToDataURL(imageData);
const specularDataURL = buildSpecularMap(w, h);
@ -280,12 +285,13 @@ function applyLiquidGlass() {
const specImg = document.getElementById('specular-map-img');
const dispFilter = document.getElementById('displacement-map-filter');
// Set filter image dimensions to the zoomed rect size so the map aligns correctly
dispImg.setAttribute('href', dispDataURL);
dispImg.setAttribute('width', w);
dispImg.setAttribute('height', h);
dispImg.setAttribute('width', fw);
dispImg.setAttribute('height', fh);
specImg.setAttribute('href', specularDataURL);
specImg.setAttribute('width', w);
specImg.setAttribute('height', h);
specImg.setAttribute('width', fw);
specImg.setAttribute('height', fh);
dispFilter.setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
@ -312,6 +318,10 @@ function applyNavGlassAt(radius) {
const h = pill.offsetHeight;
if (w === 0 || h === 0) return;
const rect = pill.getBoundingClientRect();
const fw = Math.round(rect.width);
const fh = Math.round(rect.height);
const savedBezel = CONFIG.bezelWidth;
const savedScale = CONFIG.scaleRatio;
const savedRadius = CONFIG.borderRadius;
@ -328,11 +338,11 @@ function applyNavGlassAt(radius) {
CONFIG.borderRadius = savedRadius;
document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
document.getElementById('nav-disp-img').setAttribute('width', w);
document.getElementById('nav-disp-img').setAttribute('height', h);
document.getElementById('nav-disp-img').setAttribute('width', fw);
document.getElementById('nav-disp-img').setAttribute('height', fh);
document.getElementById('nav-spec-img').setAttribute('href', specularDataURL);
document.getElementById('nav-spec-img').setAttribute('width', w);
document.getElementById('nav-spec-img').setAttribute('height', h);
document.getElementById('nav-spec-img').setAttribute('width', fw);
document.getElementById('nav-spec-img').setAttribute('height', fh);
document.getElementById('nav-disp-filter').setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);