diff --git a/www/about.html b/www/about.html new file mode 100644 index 0000000..8dfcd71 --- /dev/null +++ b/www/about.html @@ -0,0 +1,88 @@ + + + + +WA2000 - About + + + + + + + + + + + +
+ + + Icon description + + +
+ + + + + +
+ + + Icon description + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+

waff waff!

+
+

tiny text!!!

+

wuff

+
+ + + + + \ No newline at end of file diff --git a/www/android-chrome-192x192.png b/www/android-chrome-192x192.png new file mode 100644 index 0000000..3a41a87 Binary files /dev/null and b/www/android-chrome-192x192.png differ diff --git a/www/android-chrome-512x512.png b/www/android-chrome-512x512.png new file mode 100644 index 0000000..1d5d0ac Binary files /dev/null and b/www/android-chrome-512x512.png differ diff --git a/www/apple-touch-icon.png b/www/apple-touch-icon.png new file mode 100644 index 0000000..71ff0c7 Binary files /dev/null and b/www/apple-touch-icon.png differ diff --git a/www/background.png b/www/background.png index 0de7dbe..94fadad 100644 Binary files a/www/background.png and b/www/background.png differ diff --git a/www/banner.png b/www/banner.png new file mode 100644 index 0000000..b36d2d2 Binary files /dev/null and b/www/banner.png differ diff --git a/www/bannerold.png b/www/bannerold.png new file mode 100644 index 0000000..23c330b Binary files /dev/null and b/www/bannerold.png differ diff --git a/www/favicon-16x16.png b/www/favicon-16x16.png new file mode 100644 index 0000000..04d910c Binary files /dev/null and b/www/favicon-16x16.png differ diff --git a/www/favicon-32x32.png b/www/favicon-32x32.png new file mode 100644 index 0000000..d1cfe9b Binary files /dev/null and b/www/favicon-32x32.png differ diff --git a/www/favicon.ico b/www/favicon.ico new file mode 100644 index 0000000..4042e15 Binary files /dev/null and b/www/favicon.ico differ diff --git a/www/icon.png b/www/icon.png new file mode 100644 index 0000000..609bbab Binary files /dev/null and b/www/icon.png differ diff --git a/www/index.html b/www/index.html index aefe784..aea91cf 100644 --- a/www/index.html +++ b/www/index.html @@ -1,17 +1,101 @@ - - - WA2000 - + + +WA2000 + + + + + + + + - - -
-

waff waff!

-
-

tiny text!!!

-

wuff

+ + +
+ + + Icon description + + +
+ + - - + + + +
+ + + Icon description + + +
+ + + + + + + + + + + + + + + + + + + + + + + +
+

waff waff!

+
+

tiny text!!!

+

wuff

+
+
+
+

waff waff!

+
+

tiny text!!!

+

wuff

+
+
+

waff waff!

+
+

tiny text!!!

+

wuff

+
+ + + + + \ No newline at end of file diff --git a/www/script.js b/www/script.js new file mode 100644 index 0000000..fe0168a --- /dev/null +++ b/www/script.js @@ -0,0 +1,364 @@ +// ─── 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); diff --git a/www/site.webmanifest b/www/site.webmanifest new file mode 100644 index 0000000..45dc8a2 --- /dev/null +++ b/www/site.webmanifest @@ -0,0 +1 @@ +{"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"} \ No newline at end of file diff --git a/www/style.css b/www/style.css index d465a46..ed39baf 100644 --- a/www/style.css +++ b/www/style.css @@ -1,47 +1,261 @@ +* { margin: 0; padding: 0; box-sizing: border-box; } /* Remove default browser spacing; include padding/border in element size */ -* { margin: 0; padding: 0; box-sizing: border-box; } +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; +} - body { - min-height: 100vh; - display: flex; - align-items: center; - justify-content: center; - background: #0a0e1a url('background.png') center/cover no-repeat; - } +.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 */ +} - .card { - width: min(520px, 88%); - padding: 52px; - border-radius: 24px; - text-align: center; - background: rgba(255, 255, 255, 0.06); - border: 1px solid rgba(255, 255, 255, 0.14); - backdrop-filter: blur(32px) saturate(1.4); - box-shadow: 0 32px 80px rgba(0, 0, 0, 0.45); - } +.banner img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; + display: block; +} - h1 { - font-size: clamp(36px, 6vw, 52px); - font-weight: 300; - line-height: 1.1; - color: rgba(255, 255, 255, 0.92); - } +.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; +} - h1 em { - font-style: italic; - color: rgba(180, 210, 255, 0.85); - } +/* ── 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; +} - .divider { - width: 40px; - height: 0.5px; - background: rgba(255, 255, 255, 0.2); - margin: 22px auto; - } +/* ── 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; +} - p { - font-size: 15px; - font-weight: 300; - line-height: 1.75; - color: rgba(255, 255, 255, 0.52); - } +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 */ +} diff --git a/www/style.css.bak b/www/style.css.bak new file mode 100644 index 0000000..4e23e67 --- /dev/null +++ b/www/style.css.bak @@ -0,0 +1,266 @@ +* { 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 */ +} diff --git a/www/test.png b/www/test.png new file mode 100644 index 0000000..a8848ce Binary files /dev/null and b/www/test.png differ diff --git a/www/youtube.svg b/www/youtube.svg new file mode 100644 index 0000000..7d4c6ab --- /dev/null +++ b/www/youtube.svg @@ -0,0 +1,164 @@ + + + + + diff --git a/www/youtube.svg.bak b/www/youtube.svg.bak new file mode 100644 index 0000000..e10d7b2 --- /dev/null +++ b/www/youtube.svg.bak @@ -0,0 +1,45 @@ + + + + +