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

Compare commits

base: UniverseBow:main
Branches Tags
UniverseBow:main
UniverseBow:navigation
UniverseBow:chud-code
cry:main
..
compare: cry:main
Branches Tags
cry:main
UniverseBow:main
UniverseBow:navigation
UniverseBow:chud-code

No commits in common. "main" and "main" have entirely different histories.
main ... main

20 changed files with 31 additions and 1285 deletions
Download patch file Download diff file Expand all files Collapse all files

88
www/about.html
View file

@ -1,88 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WA2000 - About</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>
<div class="banner">
<img src="banner.png" alt="banner"/>
</div>
<div class="nav-wrap">
<a href="https://www.youtube.com/@universebow"
target="_blank" rel="noopener noreferrer">
<img src="./youtube.svg" target="_blank" alt="Icon description">
</a>
<div style="width: 2%;"></div>
<div class="nav-pill" id="nav-pill">
<div class="nav-pill-bar" id="nav-pill-bar">
<span class="nav-logo">About</span>
<svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="nav-divider"></div>
<a href="index.html" class="nav-link">WA2000</a>
<a href="" class="nav-link">About</a>
<a href="#" class="nav-link">Gallery</a>
<a href="#" class="nav-link">Contact</a>
</div>
</div>
<div style="width: 2%;"></div>
<a href="https://www.youtube.com/@universebow"
target="_blank" rel="noopener noreferrer">
<img src="./youtube.svg" target="_blank" alt="Icon description" width="43" height="43">
</a>
</div>
<div class="nav-placeholder" id="nav-placeholder"></div>
<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
<defs>
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="nav-disp-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="nav-spec-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="displacement-map-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="specular-map-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
</defs>
</svg>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<script src="./script.js"></script>
</body>
</html>

BIN
www/android-chrome-192x192.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 30 KiB

BIN
www/android-chrome-512x512.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 117 KiB

BIN
www/apple-touch-icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 27 KiB

BIN
www/background.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 369 KiB

BIN
www/banner.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 25 KiB

BIN
www/bannerold.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.3 MiB

0
www/css/style.css Normal file
View file

BIN
www/favicon-16x16.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 686 B

BIN
www/favicon-32x32.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 1.9 KiB

BIN
www/favicon.ico
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 15 KiB

BIN
www/icon.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 370 KiB

127
www/index.html
View file

@ -1,101 +1,36 @@
<!doctype html>
<html lang="en">
<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>
<head>
<meta charset="utf-8" />
<title>idk chat</title>
<div class="banner">
<img src="banner.png" alt="banner"/>
</div>
<!-- !! Favicon !! -->
<!-- <link rel="icon" href="imgs/favicon/favicon.ico" /> -->
<div class="nav-wrap">
<!-- Styling -->
<link type="text/css" rel="stylesheet" href="css/style.css">
</head>
<a href="https://www.youtube.com/@universebow"
target="_blank" rel="noopener noreferrer">
<img src="./youtube.svg" target="_blank" alt="Icon description">
</a>
<div style="width: 2%;"></div>
<div class="nav-pill" id="nav-pill">
<div class="nav-pill-bar" id="nav-pill-bar">
<span class="nav-logo">WA2000</span>
<svg class="nav-chevron" id="nav-chevron" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<polyline points="5,7 10,13 15,7" stroke="rgba(255,255,255,0.7)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="nav-divider"></div>
<a href="" class="nav-link">------</a>
<a href="about.html" class="nav-link">About</a>
<a href="#" class="nav-link">Gallery</a>
<a href="#" class="nav-link">Contact</a>
</div>
</div>
<div style="width: 2%;"></div>
<a href="https://www.youtube.com/@universebow"
target="_blank" rel="noopener noreferrer">
<img src="./youtube.svg" target="_blank" alt="Icon description" width="43" height="43">
</a>
</div>
<div class="nav-placeholder" id="nav-placeholder"></div>
<!-- SVG filter definition — hidden, just provides the filter for Chrome -->
<svg id="liquid-glass-svg" xmlns="http://www.w3.org/2000/svg" style="position:absolute;width:0;height:0;overflow:hidden;">
<defs>
<filter id="liquid-glass-nav" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="nav-disp-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="nav-disp-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="nav-spec-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
<filter id="liquid-glass" x="0" y="0" width="100%" height="100%" color-interpolation-filters="sRGB">
<feImage id="displacement-map-img" result="disp_map" />
<feDisplacementMap in="SourceGraphic" in2="disp_map" id="displacement-map-filter" xChannelSelector="R" yChannelSelector="G" result="refracted" />
<feImage id="specular-map-img" result="spec_map" />
<feBlend in="refracted" in2="spec_map" mode="screen" result="with_specular" />
<feComposite in="with_specular" in2="SourceGraphic" operator="atop" />
</filter>
</defs>
</svg>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<br>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<div class="card" id="card">
<h1>waff waff!</h1>
<div class="divider"></div>
<p>tiny text!!!</p>
<p>wuff</p>
</div>
<script src="./script.js"></script>
</body>
</html>
<body>
<pre>
&lt;-- ` ' --&gt;
&lt;-- ;,,, ` ' ,,,; --&gt;
&lt;-- `CRY6666bo. : : .od8888CRY' --&gt;
&lt;-- 888IO8DO88b. : : .d8888I8DO88 --&gt;
&lt;-- 8LOVET' `Y8b. ` ' .d8Y' `TLOVE8 --&gt;
&lt;-- jYOUM! .db. Yb. ' ' .dY .db. !MYOUk --&gt;
&lt;-- `888 Y88Y `q ( ) p' Y88Y 888' --&gt;
&lt;-- 8SOb '" ,', "' dSO8 --&gt;
&lt;-- j8plEASEYgr"' ':' `"?gpYplEASESk --&gt;
&lt;-- 'Y' .8' d' 'b '8. 'Y' --&gt;
&lt;-- ! .8' db d'; ;`b db '8. ! --&gt;
&lt;-- d88 `' 8 ; ; 8 `' 88b --&gt;
&lt;-- d88Ib .g8 ',' 8g. dI88b --&gt;
&lt;-- :888LOVE88Y' 'Y88LOVE888: --&gt;
&lt;-- '! YpME888' `888MEpY !' --&gt;
&lt;-- '8Y `Y Y' Y8' --&gt;
&lt;-- Y Y --&gt;
&lt;-- ! ! --&gt;
</pre>
</body>
</html>

364
www/script.js
View file

@ -1,364 +0,0 @@
// ─── Configuration ────────────────────────────────────────────────────────────
const CONFIG = {
bezelWidth: 0.18,
glassThickness: 2.0,
ior: 1.65,
scaleRatio: 1.6,
specularAngle: -55,
specularOpacity: 0.9,
specularSaturation: 6,
borderRadius: 50,
};
// ─── Maths helpers ────────────────────────────────────────────────────────────
function surfaceHeight(t) {
return Math.pow(1 - Math.pow(1 - t, 4), 0.25);
}
function surfaceNormal(t) {
const d = 0.001;
const y1 = surfaceHeight(Math.max(0, t - d));
const y2 = surfaceHeight(Math.min(1, t + d));
const derivative = (y2 - y1) / (2 * d);
return { x: -derivative, y: 1 };
}
function refract(incidentDir, normal, n1, n2) {
const nLen = Math.hypot(normal.x, normal.y);
const nx = normal.x / nLen;
const ny = normal.y / nLen;
const ratio = n1 / n2;
const cosI = -(incidentDir.x * nx + incidentDir.y * ny);
const sinT2 = ratio * ratio * (1 - cosI * cosI);
if (sinT2 > 1) return null;
const cosT = Math.sqrt(1 - sinT2);
return {
x: ratio * incidentDir.x + (ratio * cosI - cosT) * nx,
y: ratio * incidentDir.y + (ratio * cosI - cosT) * ny,
};
}
// ─── Rounded rect helper ──────────────────────────────────────────────────────
function roundedRectInfo(px, py, width, height, r) {
const radius = Math.min(r, width / 2, height / 2);
const inCornerZone =
(px < radius || px > width - radius) &&
(py < radius || py > height - radius);
let dist, nx, ny;
if (inCornerZone) {
const corners = [
{ cx: radius, cy: radius },
{ cx: width - radius, cy: radius },
{ cx: radius, cy: height - radius },
{ cx: width - radius, cy: height - radius },
];
let best = corners[0], bestD = Math.hypot(px - corners[0].cx, py - corners[0].cy);
for (let i = 1; i < corners.length; i++) {
const d = Math.hypot(px - corners[i].cx, py - corners[i].cy);
if (d < bestD) { bestD = d; best = corners[i]; }
}
dist = radius - bestD;
const len = bestD || 1;
nx = (best.cx - px) / len;
ny = (best.cy - py) / len;
} else {
const dLeft = px;
const dRight = width - 1 - px;
const dTop = py;
const dBottom = height - 1 - py;
const minD = Math.min(dLeft, dRight, dTop, dBottom);
dist = minD;
if (minD === dLeft) { nx = 1; ny = 0; }
else if (minD === dRight) { nx = -1; ny = 0; }
else if (minD === dTop) { nx = 0; ny = 1; }
else { nx = 0; ny = -1; }
}
return { dist, nx, ny };
}
// ─── Displacement map generation ─────────────────────────────────────────────
function buildDisplacementMap(width, height) {
const bezel = CONFIG.bezelWidth * Math.min(width, height);
const samples = 128;
const magnitudes = new Float32Array(samples);
const incident = { x: 0, y: 1 };
for (let i = 0; i < samples; i++) {
const t = i / (samples - 1);
const normal = surfaceNormal(t);
const refracted = refract(incident, normal, 1.0, CONFIG.ior);
magnitudes[i] = refracted
? (refracted.x - incident.x) * CONFIG.glassThickness * bezel
: 0;
}
const maxDisp = Math.max(...magnitudes) || 1;
const data = new Uint8ClampedArray(width * height * 4);
for (let py = 0; py < height; py++) {
for (let px = 0; px < width; px++) {
const idx = (py * width + px) * 4;
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
let dispX = 0, dispY = 0;
if (dist >= 0 && dist < bezel) {
const t = dist / bezel;
const sampleIdx = Math.min(samples - 1, Math.floor(t * (samples - 1)));
const rawMag = magnitudes[sampleIdx] / maxDisp;
const smooth = t * t * (3 - 2 * t);
const mag = rawMag * (1 - smooth);
dispX = nx * mag;
dispY = ny * mag;
}
data[idx] = Math.round(128 + dispX * 127);
data[idx + 1] = Math.round(128 + dispY * 127);
data[idx + 2] = 128;
data[idx + 3] = 255;
}
}
return {
imageData: new ImageData(data, width, height),
maxDisplacement: maxDisp * CONFIG.scaleRatio,
};
}
// ─── Specular highlight map generation ───────────────────────────────────────
function buildSpecularMap(width, height) {
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
const bezel = CONFIG.bezelWidth * Math.min(width, height);
const lightAngleRad = (CONFIG.specularAngle * Math.PI) / 180;
const lightDir = { x: Math.cos(lightAngleRad), y: Math.sin(lightAngleRad) };
const imageData = ctx.createImageData(width, height);
const data = imageData.data;
for (let py = 0; py < height; py++) {
for (let px = 0; px < width; px++) {
const idx = (py * width + px) * 4;
const { dist, nx, ny } = roundedRectInfo(px, py, width, height, CONFIG.borderRadius);
let intensity = 0;
if (dist >= 0 && dist < bezel) {
const t = dist / bezel;
const dot = nx * lightDir.x + ny * lightDir.y;
const rim = Math.max(0, dot);
const slope = Math.abs(surfaceNormal(t).x);
const smooth = t * t * (3 - 2 * t);
const raw = rim * slope * (1 - smooth);
intensity = Math.pow(raw, 0.5);
}
data[idx] = Math.round(235 * intensity);
data[idx + 1] = Math.round(245 * intensity);
data[idx + 2] = Math.round(255 * intensity);
data[idx + 3] = Math.round(CONFIG.specularOpacity * 255 * intensity);
}
}
ctx.putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
// ─── ImageData → data URL ─────────────────────────────────────────────────────
function imageDataToDataURL(imageData) {
const canvas = document.createElement('canvas');
canvas.width = imageData.width;
canvas.height = imageData.height;
canvas.getContext('2d').putImageData(imageData, 0, 0);
return canvas.toDataURL();
}
// ─── Apply filter to card ─────────────────────────────────────────────────────
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);
const dispImg = document.getElementById('displacement-map-img');
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', fw);
dispImg.setAttribute('height', fh);
specImg.setAttribute('href', specularDataURL);
specImg.setAttribute('width', fw);
specImg.setAttribute('height', fh);
dispFilter.setAttribute('scale', maxDisplacement);
const isChrome = /Chrome/.test(navigator.userAgent) && !/Edg|Firefox/.test(navigator.userAgent);
if (isChrome) {
card.style.backdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
card.style.webkitBackdropFilter = 'url(#liquid-glass) blur(3px) saturate(1.8) brightness(1.05)';
}
}
// ─── Nav glass ────────────────────────────────────────────────────────────────
// Phase durations in ms — keep in sync with CSS transitions
const OPEN_WIDTH_MS = 250; // width/radius expand duration
const OPEN_DROPDOWN_MS = 300; // dropdown slide-down duration
const OPEN_DROPDOWN_DELAY = 220; // CSS delay before dropdown opens
const CLOSE_DROPDOWN_MS = 200; // dropdown collapse duration (no CSS delay)
const CLOSE_WIDTH_MS = 250; // width/radius collapse duration
const CLOSE_WIDTH_DELAY = 200; // wait for dropdown to finish before collapsing width
// Build and apply nav glass maps at a specific border-radius
function applyNavGlassAt(radius) {
const pill = document.getElementById('nav-pill');
const w = pill.offsetWidth;
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;
CONFIG.bezelWidth = 0.35;
CONFIG.scaleRatio = 1.6;
CONFIG.borderRadius = Math.min(radius, w / 2, h / 2);
const { imageData, maxDisplacement } = buildDisplacementMap(w, h);
const dispDataURL = imageDataToDataURL(imageData);
const specularDataURL = buildSpecularMap(w, h);
CONFIG.bezelWidth = savedBezel;
CONFIG.scaleRatio = savedScale;
CONFIG.borderRadius = savedRadius;
document.getElementById('nav-disp-img').setAttribute('href', dispDataURL);
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', 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);
if (isChrome) {
pill.style.backdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
pill.style.webkitBackdropFilter = 'url(#liquid-glass-nav) blur(3px) saturate(1.8) brightness(1.05)';
}
}
// Animate refraction maps across a time window
function scheduleNavGlassFrames(startRadius, targetRadius, delayMs, durationMs, steps = 14) {
for (let i = 1; i <= steps; i++) {
const t = i / steps;
const eased = 1 - Math.pow(1 - t, 3);
const radius = startRadius + (targetRadius - startRadius) * eased;
setTimeout(() => applyNavGlassAt(radius), delayMs + t * durationMs);
}
}
function applyNavGlass() {
const pill = document.getElementById('nav-pill');
const radius = parseFloat(getComputedStyle(pill).borderRadius) || 999;
applyNavGlassAt(radius);
}
// ─── Event listeners ──────────────────────────────────────────────────────────
window.addEventListener('load', () => { applyLiquidGlass(); applyNavGlass(); });
window.addEventListener('resize', () => { applyLiquidGlass(); applyNavGlass(); });
let lastDPR = window.devicePixelRatio;
setInterval(() => {
if (window.devicePixelRatio !== lastDPR) {
lastDPR = window.devicePixelRatio;
applyLiquidGlass();
applyNavGlass();
}
}, 250);
// ─── Nav pill interactions ────────────────────────────────────────────────────
const navPill = document.getElementById('nav-pill');
const navBar = document.getElementById('nav-pill-bar');
navBar.addEventListener('click', () => {
const opening = !navPill.classList.contains('open');
navPill.classList.toggle('open');
if (opening) {
// Phase 1: width expands (0 → OPEN_WIDTH_MS)
scheduleNavGlassFrames(999, 25, 0, OPEN_WIDTH_MS);
// Phase 2: dropdown falls (OPEN_DROPDOWN_DELAY → +OPEN_DROPDOWN_MS)
// refraction height grows as the pill gets taller — track it live
scheduleNavGlassFrames(25, 25, OPEN_DROPDOWN_DELAY, OPEN_DROPDOWN_MS);
// Final settle
setTimeout(applyNavGlass, OPEN_DROPDOWN_DELAY + OPEN_DROPDOWN_MS + 50);
} else {
// Phase 1: dropdown collapses (0 → CLOSE_DROPDOWN_MS)
scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS);
// Phase 2: width shrinks after dropdown finishes
scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS);
// Final settle
setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
}
});
document.addEventListener('click', (e) => {
if (!navPill.contains(e.target) && navPill.classList.contains('open')) {
navPill.classList.remove('open');
scheduleNavGlassFrames(25, 25, 0, CLOSE_DROPDOWN_MS);
scheduleNavGlassFrames(25, 999, CLOSE_WIDTH_DELAY, CLOSE_WIDTH_MS);
setTimeout(applyNavGlass, CLOSE_WIDTH_DELAY + CLOSE_WIDTH_MS + 50);
}
});
// ─── Nav pin on scroll ────────────────────────────────────────────────────────
const navWrap = document.querySelector('.nav-wrap');
const navPlaceholder = document.getElementById('nav-placeholder');
function updateNavPin() {
navWrap.classList.remove('pinned');
navPlaceholder.classList.remove('visible');
const offsetTop = navWrap.offsetTop;
if (window.scrollY > offsetTop) {
navWrap.classList.add('pinned');
navPlaceholder.classList.add('visible');
}
}
window.addEventListener('scroll', updateNavPin);
window.addEventListener('load', updateNavPin);

1
www/site.webmanifest
View file

@ -1 +0,0 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

261
www/style.css
View file

@ -1,261 +0,0 @@
* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #0a0e1a url('background.png') center/cover no-repeat;
overflow-x: hidden;
}
.banner {
position: relative;
width: 99%;
overflow: hidden;
margin: 5px 5px 10px 5px;
border-radius: 25px;
display: flex;
border: 4px solid rgba(196, 214, 226, 0.9);
align-items: center;
max-height: 30vh; /* % of the viewport height */
}
.banner img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.card {
width: min(880px, 88%);
height: 320px; /* scaled from 540px proportionally for 480px monitor */
padding: 28px; /* scaled from 40px */
border-radius: 25px; /* matches eww .box border-radius */
text-align: center;
background: rgba(242, 242, 243, 0.6); /* eww .box background-color */
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15), /* eww notification box-shadow */
inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww .box inset shadow */
position: relative;
overflow: hidden;
}
/* ── Main specular: top-left corner catch ── */
.card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(
ellipse 60% 30% at 10% -5%,
rgba(255, 255, 255, 0.35) 0%, /* brighter on light bg */
transparent 55%
),
linear-gradient(
128deg,
rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.08) 30%,
transparent 55%
);
pointer-events: none;
}
/* ── Glass rim: inset edge highlights — matches eww border colour ── */
.card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: transparent;
border: 1px solid transparent;
border-image: none;
box-shadow:
inset 1px 1px 0 rgba(196, 214, 226, 0.8), /* eww border colour as rim light */
inset -1px -1px 0 rgba(0, 0, 0, 0.08);
pointer-events: none;
}
h1 {
font-size: clamp(24px, 5vw, 38px); /* scaled down for smaller monitor */
font-weight: 300;
line-height: 1.1;
color: rgba(35, 38, 41, 0.92); /* eww $text-color #232629 */
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* eww label.time text-shadow */
}
h1 em {
font-style: italic;
color: rgba(137, 180, 250, 0.9); /* eww $primary-neon #89b4fa */
}
.divider {
width: 40px;
height: 0.5px;
background: rgba(196, 214, 226, 0.8); /* eww border colour */
margin: 16px auto; /* scaled from 22px */
}
p {
font-size: 14px; /* scaled from 15px */
font-weight: 300;
line-height: 1.75;
color: rgba(35, 38, 41, 0.52); /* eww $text-color at reduced opacity */
}
/* ── Nav pill wrapper ── */
.nav-wrap {
position: absolute;
top: -50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: flex-start;
padding: 6px 0;
z-index: 10;
}
.nav-wrap > a {
display: flex;
align-items: flex-end;
line-height: 0;
height: 65px; /* match .nav-pill-bar height */
overflow: hidden;
}
.nav-wrap > a img {
height: 67px; /* whatever size looks right */
width: auto;
}
.nav-wrap.pinned {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 100;
padding: 6px 0;
}
.nav-pill-bar img,
.nav-pill-bar svg {
height: 20px; /* adjust to taste */
width: auto;
flex-shrink: 0;
}
.nav-pill-bar a {
display: flex;
align-items: center;
line-height: 0; /* collapses inline whitespace that can add phantom height */
}
/* ── The pill itself ── */
.nav-pill {
margin-top: 7px;
width: 160px;
border-radius: 999px;
background: rgba(242, 242, 243, 0.6); /* eww .box background */
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww inset shadow */
overflow: hidden;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-pill-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px; /* scaled from 44px */
padding: 0 16px;
cursor: pointer;
user-select: none;
}
.nav-dropdown {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
opacity 0.25s ease 0.22s;
}
.nav-pill.open {
border-radius: 22px;
width: 200px;
}
.nav-logo {
font-size: 13px;
font-weight: 400;
color: rgba(35, 38, 41, 0.88); /* eww $text-color */
letter-spacing: 0.06em;
}
.nav-chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Restyle chevron stroke to dark to match eww theme */
.nav-chevron polyline {
stroke: rgba(35, 38, 41, 0.7); /* eww $text-color */
}
.nav-pill.open .nav-chevron {
transform: rotate(180deg);
}
.nav-pill.open .nav-dropdown {
max-height: 300px;
opacity: 1;
}
.nav-pill:not(.open) .nav-dropdown {
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s ease;
}
.nav-pill:not(.open) {
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.nav-divider {
height: 1px;
background: rgba(196, 214, 226, 0.8); /* eww .spacer border colour */
margin: 0 12px;
}
.nav-link {
display: block;
padding: 10px 16px;
font-size: 13px;
font-weight: 300;
text-align: center;
color: rgba(35, 38, 41, 0.75); /* eww $text-color */
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover {
color: rgb(0, 0, 0); /* eww $primary-neon on hover */
background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */
}

266
www/style.css.bak
View file

@ -1,266 +0,0 @@
* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background: #0a0e1a url('background.png') center/cover no-repeat;
overflow-x: hidden;
}
.banner {
position: relative;
width: 99%;
max-height: 280px;
overflow: hidden;
margin: 5px 5px 10px 5px;
border-radius: 25px;
display: flex;
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
align-items: center; /* Vertically centre the image within the container */
}
.banner img {
width: 100%;
object-fit: cover;
object-position: center center;
display: block;
}
.card {
width: min(880px, 88%);
height: 320px; /* scaled from 540px proportionally for 480px monitor */
padding: 28px; /* scaled from 40px */
border-radius: 25px; /* matches eww .box border-radius */
text-align: center;
background: rgba(242, 242, 243, 0.6); /* eww .box background-color */
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15), /* eww notification box-shadow */
inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww .box inset shadow */
position: relative;
overflow: hidden;
}
/* ── Main specular: top-left corner catch ── */
.card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(
ellipse 60% 30% at 10% -5%,
rgba(255, 255, 255, 0.35) 0%, /* brighter on light bg */
transparent 55%
),
linear-gradient(
128deg,
rgba(255, 255, 255, 0.20) 0%,
rgba(255, 255, 255, 0.08) 30%,
transparent 55%
);
pointer-events: none;
}
/* ── Glass rim: inset edge highlights — matches eww border colour ── */
.card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: transparent;
border: 1px solid transparent;
border-image: none;
box-shadow:
inset 1px 1px 0 rgba(196, 214, 226, 0.8), /* eww border colour as rim light */
inset -1px -1px 0 rgba(0, 0, 0, 0.08);
pointer-events: none;
}
h1 {
font-size: clamp(24px, 5vw, 38px); /* scaled down for smaller monitor */
font-weight: 300;
line-height: 1.1;
color: rgba(35, 38, 41, 0.92); /* eww $text-color #232629 */
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3); /* eww label.time text-shadow */
}
h1 em {
font-style: italic;
color: rgba(137, 180, 250, 0.9); /* eww $primary-neon #89b4fa */
}
.divider {
width: 40px;
height: 0.5px;
background: rgba(196, 214, 226, 0.8); /* eww border colour */
margin: 16px auto; /* scaled from 22px */
}
p {
font-size: 14px; /* scaled from 15px */
font-weight: 300;
line-height: 1.75;
color: rgba(35, 38, 41, 0.52); /* eww $text-color at reduced opacity */
}
/* ── Nav pill wrapper ── */
.nav-wrap {
align-self: stretch;
display: flex;
justify-content: center;
align-items: flex-start; /* add this */
padding: 6px 0;
}
.nav-wrap > a {
display: flex;
align-items: flex-end;
line-height: 0;
height: 65px; /* match .nav-pill-bar height */
overflow: hidden;
}
.nav-wrap > a img {
height: 67px; /* whatever size looks right */
width: auto;
}
.nav-wrap.pinned {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
padding: 6px 0;
display: flex;
justify-content: center;
}
.nav-placeholder {
display: none;
align-self: stretch;
height: 56px; /* scaled: 44px pill + 6px + 6px padding */
}
.nav-placeholder.visible {
display: block;
}
.nav-pill-bar img,
.nav-pill-bar svg {
height: 20px; /* adjust to taste */
width: auto;
flex-shrink: 0;
}
.nav-pill-bar a {
display: flex;
align-items: center;
line-height: 0; /* collapses inline whitespace that can add phantom height */
}
/* ── The pill itself ── */
.nav-pill {
margin-top: 7px;
width: 160px;
border-radius: 999px;
background: rgba(242, 242, 243, 0.6); /* eww .box background */
border: 4px solid rgba(196, 214, 226, 0.9); /* eww .box border */
backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
-webkit-backdrop-filter: blur(8px) saturate(1.4) brightness(1.02);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.15),
inset 0 0 2px rgba(0, 0, 0, 0.2); /* eww inset shadow */
overflow: hidden;
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-pill-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 40px; /* scaled from 44px */
padding: 0 16px;
cursor: pointer;
user-select: none;
}
.nav-dropdown {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.22s,
opacity 0.25s ease 0.22s;
}
.nav-pill.open {
border-radius: 22px;
width: 200px;
}
.nav-logo {
font-size: 13px;
font-weight: 400;
color: rgba(35, 38, 41, 0.88); /* eww $text-color */
letter-spacing: 0.06em;
}
.nav-chevron {
width: 14px;
height: 14px;
flex-shrink: 0;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Restyle chevron stroke to dark to match eww theme */
.nav-chevron polyline {
stroke: rgba(35, 38, 41, 0.7); /* eww $text-color */
}
.nav-pill.open .nav-chevron {
transform: rotate(180deg);
}
.nav-pill.open .nav-dropdown {
max-height: 300px;
opacity: 1;
}
.nav-pill:not(.open) .nav-dropdown {
transition: max-height 0.2s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.15s ease;
}
.nav-pill:not(.open) {
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
border-radius 0.25s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
.nav-divider {
height: 1px;
background: rgba(196, 214, 226, 0.8); /* eww .spacer border colour */
margin: 0 12px;
}
.nav-link {
display: block;
padding: 10px 16px;
font-size: 13px;
font-weight: 300;
text-align: center;
color: rgba(35, 38, 41, 0.75); /* eww $text-color */
text-decoration: none;
transition: color 0.15s ease, background 0.15s ease;
}
.nav-link:hover {
color: rgba(137, 180, 250, 1); /* eww $primary-neon on hover */
background: rgba(196, 214, 226, 0.25); /* soft eww border colour tint */
}

BIN
www/test.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 23 KiB

164
www/youtube.svg
View file

@ -1,164 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xml:space="preserve"
width="571.19171"
height="571.19171"
version="1.1"
id="svg6"
sodipodi:docname="youtube.svg"
inkscape:version="1.4.3 (0d15f75042, 2025-12-25)"
inkscape:export-filename="youtube.svg"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs10"><linearGradient
id="linearGradient56"
inkscape:collect="always"><stop
style="stop-color:#f4f4f4;stop-opacity:1;"
offset="0"
id="stop56" /><stop
style="stop-color:#cadae4;stop-opacity:0;"
offset="1"
id="stop57" /></linearGradient><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Drop Shadow"
id="filter47"
x="-0.31564095"
y="-0.31564095"
width="1.6312819"
height="1.6312819"><feFlood
result="flood"
in="SourceGraphic"
flood-opacity="0.333333"
flood-color="rgb(0,0,0)"
id="feFlood46" /><feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="31.826903"
id="feGaussianBlur46" /><feOffset
result="offset"
in="blur"
dx="0.000000"
dy="0.000000"
id="feOffset46" /><feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite46" /><feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite47" /></filter><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Drop Shadow"
id="filter54"
x="-0.16529255"
y="-0.2361939"
width="1.3305851"
height="1.4723878"><feFlood
result="flood"
in="SourceGraphic"
flood-opacity="0.164706"
flood-color="rgb(0,0,0)"
id="feFlood53" /><feGaussianBlur
result="blur"
in="SourceGraphic"
stdDeviation="11.94747"
id="feGaussianBlur53" /><feOffset
result="offset"
in="blur"
dx="0.000000"
dy="0.000000"
id="feOffset53" /><feComposite
result="comp1"
operator="in"
in="flood"
in2="offset"
id="feComposite53" /><feComposite
result="comp2"
operator="over"
in="SourceGraphic"
in2="comp1"
id="feComposite54" /></filter><linearGradient
inkscape:collect="always"
xlink:href="#linearGradient56"
id="linearGradient57"
x1="-10.367967"
y1="150.00002"
x2="310.36798"
y2="150.00002"
gradientUnits="userSpaceOnUse"
gradientTransform="matrix(0.9700025,0,0,0.9700025,-134.70136,66.356612)" /><filter
style="color-interpolation-filters:sRGB"
inkscape:label="Blur"
id="filter57"
x="-0.069346031"
y="-0.069346031"
width="1.1386921"
height="1.1386921"><feGaussianBlur
stdDeviation="5.7687512"
result="blur"
id="feGaussianBlur57" /></filter></defs><sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="2.5"
inkscape:cx="150.4"
inkscape:cy="252.6"
inkscape:window-width="2560"
inkscape:window-height="1397"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg6"><inkscape:page
x="0"
y="0"
width="571.19171"
height="571.19171"
id="page2"
margin="0"
bleed="0" /></sodipodi:namedview>
<rect
width="319.73596"
height="319.73596"
fill="#fff"
ry="159.86798"
id="rect2"
style="display:inline;fill:#f2f2f2;fill-opacity:0.6;stroke-width:0.999999"
x="-117.42066"
y="241.78889"
transform="rotate(-38.967342)" /><rect
width="310.14468"
height="310.14468"
fill="#fff"
ry="155.07234"
id="rect2-6"
style="display:inline;mix-blend-mode:normal;fill:none;fill-opacity:0.6;stroke:url(#linearGradient57);stroke-width:15.3246;stroke-dasharray:none;stroke-opacity:0.9;filter:url(#filter57)"
x="-144.27332"
y="56.78466"
transform="matrix(0.72646784,-0.65599909,0.65599909,0.72646784,138.77274,138.77274)" />
<path
fill="red"
d="m 149.94643,89.300042 c 0,0 -54.21767,5e-5 -67.825582,3.536002 -7.286147,2.035817 -13.285723,8.035456 -15.321561,15.428766 -3.535921,13.60792 -3.536002,41.78881 -3.536002,41.78881 0,0 8.1e-5,28.28787 3.536002,41.68161 2.035838,7.39321 7.928262,13.2857 15.321561,15.32156 13.715064,3.64307 67.825582,3.6432 67.825582,3.6432 0,0 54.32516,-4e-5 67.93279,-3.53599 7.39335,-2.03583 13.28566,-7.82119 15.21435,-15.32157 3.64311,-13.50091 3.64321,-41.68161 3.64321,-41.68161 0,0 0.10707,-28.28809 -3.64321,-41.89601 -1.92869,-7.39331 -7.821,-13.28566 -15.21435,-15.214361 -13.60763,-3.750236 -67.93279,-3.750407 -67.93279,-3.750407 z m -17.25119,34.716808 45.11041,26.03677 -45.11041,25.92957 z"
id="path4"
style="mix-blend-mode:normal;fill:#171717;fill-opacity:1;stroke-width:0.726642;filter:url(#filter54)"
transform="matrix(1.3761936,0,0,1.3761936,79.166751,79.166816)" />
<circle
style="opacity:1;mix-blend-mode:overlay;fill:none;fill-opacity:1;stroke:#cadae4;stroke-width:23.9898;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:0.9;paint-order:normal;filter:url(#filter47)"
id="path1"
cx="150"
cy="150"
r="140"
transform="matrix(1.2505322,0,0,1.2505322,98.016035,98.016035)" /></svg>
Side by side

Before

Width:  |  Height:  |  Size: 5.7 KiB

45
www/youtube.svg.bak
View file

@ -1,45 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xml:space="preserve"
width="300"
height="300"
version="1.1"
id="svg6"
sodipodi:docname="YouTube_social_red_circle_(2024).svg"
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"><defs
id="defs10" /><sodipodi:namedview
id="namedview8"
pagecolor="#ffffff"
bordercolor="#000000"
borderopacity="0.25"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showgrid="false"
inkscape:zoom="1.25"
inkscape:cx="142.4"
inkscape:cy="150.8"
inkscape:window-width="1187"
inkscape:window-height="582"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg6" />
<rect
width="300"
height="300"
fill="#fff"
ry="150"
id="rect2"
style="fill:#ff0033;fill-opacity:1" />
<path
fill="red"
d="M149.93750587 79.22267364s-63.21885.000059-79.08593926 4.12304707c-8.49578714 2.37380204-15.49140825 9.36950015-17.86523429 17.99023729-4.12295306 15.86710025-4.12304706 48.72656078-4.12304706 48.72656078s.000094 32.98420052 4.12304706 48.60156077c2.37382604 8.62062014 9.24450615 15.49138025 17.86523429 17.86524029 15.99203025 4.24788007 79.08593926 4.24804007 79.08593926 4.24804007s63.34418101-.00005 79.21094127-4.12304007c8.62079014-2.37381004 15.49133025-9.11966015 17.74023028-17.86524029 4.24793007-15.74232025 4.24805007-48.60156077 4.24805007-48.60156077s.12484-32.98446053-4.24805007-48.85156078c-2.24890003-8.62073714-9.11944014-15.49133425-17.74023028-17.74023729-15.86676026-4.37284707-79.21094127-4.37304707-79.21094127-4.37304707zm-20.11523032 40.48046465 52.59961084 30.35938049-52.59961084 30.23438048v-60.59376097z"
id="path4"
style="fill:#ffffff;fill-opacity:1" />
</svg>
Side by side

Before

Width:  |  Height:  |  Size: 2 KiB