mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-23 20:00:24 +02:00
104 lines
7.5 KiB
HTML
104 lines
7.5 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Glass Shell P2 — controls: pickers (segmented, stepped, option circles, a pop-up button and its value menu)</title>
|
||
<link rel="stylesheet" href="kit.css">
|
||
<link rel="stylesheet" href="window-nav-shared.css"><!-- the E3 edge without the linear top layer (PLAN §1.6, WN D-15) -->
|
||
<link rel="stylesheet" href="controls.css">
|
||
<style>
|
||
/* the /zoo spec board inside `window` glass 1280 x 656; content runs y 108..632 */
|
||
.pa { left: 40px; width: 420px; right: auto; top: 140px; height: 176px; }
|
||
.pb { left: 40px; width: 420px; right: auto; top: 358px; height: 112px; }
|
||
.pc { left: 40px; width: 420px; right: auto; top: 512px; height: 118px; }
|
||
.pd { left: 476px; width: 444px; right: auto; top: 140px; height: 160px; }
|
||
.pd .c-row { padding: 0 14px 0 26px; }
|
||
.seg1 { position: absolute; left: 28px; top: 20px; }
|
||
.seg2 { position: absolute; left: 28px; top: 96px; }
|
||
.opts { position: absolute; left: 0; right: 0; top: 16px; display: flex; justify-content: center; gap: 24px; }
|
||
.opts > .c-opt { width: 60px; height: 60px; }
|
||
.optcap { position: absolute; left: 0; right: 0; top: 90px; text-align: center; }
|
||
/* the open value menu (<= 8 options): thick glass grown out of its capsule, right-aligned to it (slab right = capsule right + 8),
|
||
below it because it fits above y 628 (PLAN §1.12, SET §4.5 order: below, above, over) */
|
||
.menu { width: 380px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="lgk-view" data-room="lounge">
|
||
<div class="lgk-overlay" style="left:320px; top:66px">
|
||
<div class="lgk-glass cg-win" data-mat="window" data-dz="0" data-tier="T5 window cover; T1 smoky tint" data-id="window">
|
||
<div class="cg-side" data-sel="Pickers"></div>
|
||
<div class="cg-main">
|
||
<div class="cg-head"><span class="t-title2">Pickers</span>
|
||
<span class="lgk-btn circle" style="right:24px"><i data-i="more"></i></span></div>
|
||
|
||
<div class="cg-sec" style="top:112px">Segmented <span class="v3">· contiguous; the pill travels</span></div>
|
||
<div class="cg-platter pa">
|
||
<div class="c-seg2 compact seg1"><span><b>Small</b></span><span class="on"><b>Default</b></span><span class="is-hover" style="--hx:40%; --hy:60%"><b>Large</b></span></div>
|
||
<div class="c-seg2 compact seg2"><span><b>All</b></span><span class="lift"><b>VR</b></span><span><b>Non-VR</b></span></div>
|
||
</div>
|
||
|
||
<div class="cg-sec" style="top:330px">Stepped Slider <span class="v3">· notches, title-case labels</span></div>
|
||
<div class="cg-platter pb">
|
||
<div class="c-slider stepped" style="position:absolute; left:22px; right:22px; top:14px; --v:.6667"><span class="fill"></span><span class="knob"></span>
|
||
<span class="notches"><i class="under" style="left:0%"></i><i class="under" style="left:33.33%"></i><i class="under" style="left:66.67%; opacity:0"></i><i style="left:100%"></i></span></div>
|
||
<div class="c-notchlabels" style="left:54px; right:54px; top:86px; height:18px"><span style="left:0%">72 Hz</span><span style="left:33.33%">90 Hz</span><span class="on" style="left:66.67%">120 Hz</span><span style="left:100%">144 Hz</span></div>
|
||
</div>
|
||
|
||
<div class="cg-sec" style="top:484px">Option Circles <span class="v3">· SteamVR</span></div>
|
||
<div class="cg-platter pc">
|
||
<div class="opts">
|
||
<span class="c-opt">72</span><span class="c-opt">90</span><span class="c-opt is-focus">100</span><span class="c-opt is-selected">120</span><span class="c-opt">144</span>
|
||
</div>
|
||
<div class="cg-cap optcap">60 circles at an 84 pitch (24 px clear)</div>
|
||
</div>
|
||
|
||
<div class="cg-sec" style="top:112px; left:502px">Pop-up Buttons <span class="v3">· open = white</span></div>
|
||
<div class="c-list pd">
|
||
<div class="c-row"><span class="pill"></span><span class="lab">Output</span><span class="trail"><span class="c-popup is-open" id="src" data-id="popup-open"><span class="val">Steam Frame Speakers</span><i data-i="updown"></i></span></span></div>
|
||
<div class="c-row"><span class="pill"></span><span class="lab">Language</span><span class="trail"><span class="c-popup"><span class="val">English</span><i data-i="updown"></i></span></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- the value menu: Steam's gamepad context menu, a sibling of the window glass in the main overlay; T1 in-page thick glass,
|
||
T5 a non-interactive crop at +10 mm over a thick slab, 0 -> +10 on `depth` with the materialize (PLAN §1.7) -->
|
||
<div class="lgk-glass lgk-menu c-menu menu" id="menu" data-mat="thick" data-lens style="--dz:10" data-dz="10" data-id="menu"
|
||
data-tier="T1 in-page thick glass; T5 +10 mm non-interactive crop + thick slab">
|
||
<div class="hdr">Output</div>
|
||
<div class="lgk-row is-hover" id="hrow" style="--hx:62%; --hy:52%"><span class="lead"></span><span class="lab">Headset Audio</span></div>
|
||
<div class="lgk-row" data-id="row-current"><span class="lead"><i data-i="check"></i></span><span class="lab">Steam Frame Speakers</span></div>
|
||
<div class="lgk-row"><span class="lead"></span><span class="lab">HDMI Audio</span></div>
|
||
<span class="c-cancel">Cancel</span>
|
||
</div>
|
||
</div>
|
||
|
||
<svg style="position:absolute; inset:0; width:1920px; height:1080px; pointer-events:none; z-index:40" viewBox="0 0 1920 1080">
|
||
<defs><linearGradient id="beam" x1="1" y1="1" x2="0" y2="0"><stop offset="0" stop-color="#fff" stop-opacity="0"/><stop offset=".35" stop-color="#dbe8ff" stop-opacity=".55"/><stop offset="1" stop-color="#fff" stop-opacity=".9"/></linearGradient></defs>
|
||
<polygon id="beamp" points="0,0" fill="url(#beam)" opacity=".5"/>
|
||
</svg>
|
||
<div class="lgk-laser-dot" id="dot"></div>
|
||
|
||
<div class="c-note" style="left:1622px; top:150px; width:270px"><b>Up to 8 options</b>: the slab grows out of its capsule, right-aligned to it, below it when it fits above y 628 (else above, else over it). The source turns white while open; the current value has a check in the leading slot, no fill. Rows 72, a 40 px header, Steam's Cancel as a 56 px quiet capsule. Laser hover: + .08 and the light at the pointer. Native: +10 mm, non-interactive.</div>
|
||
<div class="c-note" style="left:1622px; top:478px; width:270px"><b>Longer lists</b>: on settings routes, more than 8 options become the list page (settings concept); elsewhere 9–14 use two columns and 15 or more one scrolling column of two-line rows (<span class="k">p2_controls_timezone</span>).</div>
|
||
</div>
|
||
<script src="controls-gallery.js"></script>
|
||
<script src="kit.js"></script>
|
||
<script src="controls-icons.js"></script>
|
||
<script>
|
||
// anchor the slab to its source as T2 does: right edge = capsule right + 8, top = capsule bottom + 8 (all in the overlay's px)
|
||
addEventListener('DOMContentLoaded', () => requestAnimationFrame(() => {
|
||
const ov = document.querySelector('.lgk-overlay').getBoundingClientRect();
|
||
const s = document.getElementById('src').getBoundingClientRect(), m = document.getElementById('menu');
|
||
m.style.left = (s.right + 8 - ov.left - m.offsetWidth) + 'px'; m.style.top = (s.bottom + 8 - ov.top) + 'px';
|
||
requestAnimationFrame(() => {
|
||
const h = document.getElementById('hrow').getBoundingClientRect();
|
||
const x = h.left + h.width * .62, y = h.top + h.height * .52;
|
||
const d = document.getElementById('dot'); d.style.left = x + 'px'; d.style.top = y + 'px';
|
||
document.getElementById('beamp').setAttribute('points', `1760,1095 1772,1095 ${x + 1},${y} ${x - 1},${y}`);
|
||
});
|
||
}));
|
||
</script>
|
||
</body>
|
||
</html>
|