mirror of
https://github.com/MichaelScottsman/LiquidAss-Frame.git
synced 2026-10-18 09:01:02 +02:00
151 lines
11 KiB
HTML
151 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Glass Shell P2 — kit example (Library, Sort menu open)</title>
|
|
<link rel="stylesheet" href="kit.css">
|
|
<style>
|
|
/* Page-specific layout only. Every size is a DESIGN2 token or derived from one. */
|
|
.win { left: 0; top: 0; width: 1280px; height: var(--lg-glass-h); } /* "window" glass mode: 656, 64 px ornament margin below */
|
|
.hdr-back { position: absolute; left: var(--lg-inset); top: var(--lg-inset); }
|
|
.hdr-title { position: absolute; left: 100px; top: 25px; } /* right of the Back circle (WN D-3) */
|
|
.hdr-sub { position: absolute; left: 102px; top: 82px; }
|
|
.hdr-search { position: absolute; left: calc(640px - var(--lg-search-w) / 2); top: 22px; width: var(--lg-search-w); } /* section root: 520, centred at x 640 */
|
|
.hdr-avatar { position: absolute; right: 24px; top: 24px; }
|
|
.tabs { position: absolute; left: 40px; top: 118px; }
|
|
.grid { position: absolute; left: 0; top: 206px; right: 0; bottom: 0; overflow: hidden; border-radius: 0 0 var(--lg-r-window) var(--lg-r-window);
|
|
/* scroll edge: content fades under the bottom ornament instead of a hard clip */
|
|
-webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 120px), rgb(0 0 0 / .25) calc(100% - 36px), transparent 100%);
|
|
mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 120px), rgb(0 0 0 / .25) calc(100% - 36px), transparent 100%); }
|
|
.grid .lgk-poster { width: 220px; height: 330px; }
|
|
.chip-update { position: absolute; left: 14px; top: 14px; height: 32px; padding: 0 14px; border-radius: 16px; display: grid; place-items: center;
|
|
background: var(--lg-blue); font: 600 18px/1 var(--lg-font); }
|
|
.dl { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 44px; border-radius: 22px; background: rgb(0 0 0 / .52);
|
|
display: flex; align-items: center; gap: 10px; padding: 0 16px; font: 600 18px/1 var(--lg-font); }
|
|
.dl .bar { flex: 1; height: 8px; border-radius: 4px; background: rgb(255 255 255 / .22); overflow: hidden; }
|
|
.dl .bar > i { display: block; height: 100%; width: 62%; border-radius: 4px; background: #fff; }
|
|
.toolbar { left: 192px; top: var(--lg-ornament-y); width: 896px; } /* y 628-712, <= 960 wide, centred */
|
|
.menu { left: 204px; width: 392px; bottom: 106px; } /* 720 - 628 + 14: opens upward from its source */
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="lgk-view" data-room="lounge">
|
|
|
|
<!-- ============ VR main menu as the tab-bar ornament (frame.menu popup, its own quad: 0.034 deg per popup px = main px x 1.10) -->
|
|
<div class="lgk-pop" style="left:212px; top:28px; --pop-scale:1.10" data-dz="25" data-tier="T3/T4 frame.menu">
|
|
<div class="lgk-glass lgk-tabbar" data-mat="liquid" data-lens style="position:relative; --r:40px; --dz:25; gap:16px; padding:12px; width:80px; --lg-btn:56px">
|
|
<div class="lgk-tab"><i data-i="home"></i></div>
|
|
<div class="lgk-tab is-nav-selected" style="background:var(--lg-fill-nav)"><i data-i="library"></i></div>
|
|
<div class="lgk-tab"><i data-i="store"></i></div>
|
|
<div class="lgk-tab"><i data-i="friends"></i></div>
|
|
<div class="lgk-tab"><i data-i="media"></i></div>
|
|
<div class="lgk-tab"><i data-i="download"></i></div>
|
|
</div>
|
|
<div class="lgk-glass lgk-tabbar" data-mat="liquid" data-lens style="position:relative; margin-top:16px; --r:40px; --dz:25; gap:16px; padding:12px; width:80px; --lg-btn:56px">
|
|
<div class="lgk-tab"><i data-i="gear"></i></div>
|
|
<div class="lgk-tab"><i data-i="vr"></i></div>
|
|
<div class="lgk-tab"><i data-i="power"></i></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ Steam's main window: 1280 x 720 overlay at 1:1 -->
|
|
<div class="lgk-overlay" style="left:320px; top:66px">
|
|
|
|
<div class="lgk-glass win" data-mat="window" data-dz="0" data-tier="T5 window">
|
|
<span class="lgk-btn circle hdr-back"><i data-i="chevron-left"></i></span>
|
|
<div class="hdr-title t-large">Library</div>
|
|
<div class="hdr-sub t-subhead v2">350 games · 18 installed</div>
|
|
|
|
<div class="lgk-search hdr-search">
|
|
<i data-i="search"></i><span class="ph">Search your library</span>
|
|
</div>
|
|
<div class="lgk-btn circle hdr-avatar lgk-art" data-art="avatar:2:B" style="background-size:cover"></div>
|
|
|
|
<div class="lgk-seg tabs">
|
|
<span class="is-selected">All Games</span>
|
|
<span>Great on Frame</span>
|
|
<span>Ready to Play</span>
|
|
<span>Collections</span>
|
|
<span>Non-Steam</span>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<div class="lgk-poster lgk-art" data-art="poster:0:Starfall Drift" style="left:42px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:1:Hollow Peaks" style="left:286px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:2:Neon Orchard" style="left:530px; top:0">
|
|
<div class="dl"><i data-i="download" style="--is:22px"></i><span class="bar"><i></i></span><span class="t-num">62%</span></div>
|
|
</div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:3:Tidebreaker" style="left:774px; top:0"><span class="chip-update">Update</span></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:4:Lumen Vale" style="left:1018px; top:0"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:8:Echo Station" style="left:42px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:6:Ironwood" style="left:286px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:7:Paper Comets" style="left:530px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:5:Glasswing" style="left:774px; top:354px"></div>
|
|
<div class="lgk-poster lgk-art" data-art="poster:9:Deep Field" style="left:1018px; top:354px"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- bottom ornament: straddles the glass's bottom edge by 28 px at depth 0 with an inset slab (PLAN 1.10);
|
|
laser mode, so no controller glyph badges (VP D-5) -->
|
|
<div class="lgk-glass lgk-toolbar toolbar" data-mat="liquid" data-lens style="--dz:0" data-dz="0" data-tier="T1 layout + T5 inset slab">
|
|
<span class="lgk-btn capsule is-selected"><i data-i="sort"></i>Recently Played</span>
|
|
<span class="lgk-btn capsule plain"><i data-i="filter"></i>Filter<span class="lgk-badge inline" style="background:rgb(255 255 255 / .22)">2</span></span>
|
|
<span class="lgk-seg compact" style="height:60px; background:rgb(0 0 0 / .22); margin-left:12px">
|
|
<span class="is-selected">All</span><span>VR</span><span>Non-VR</span>
|
|
</span>
|
|
<span class="lgk-btn circle plain" style="margin-left:auto"><i data-i="more"></i></span>
|
|
</div>
|
|
|
|
<!-- the Sort menu grows out of its button (upward from a bottom ornament); thick glass at +10 mm
|
|
(default depth profile, PLAN 1.7); 5 items: one column of 72 px rows with a 40 px header (PLAN 1.12) -->
|
|
<div class="lgk-glass lgk-menu menu" data-mat="thick" data-lens style="--dz:10" data-dz="10" data-tier="T1 + T4 pop + T5 slab">
|
|
<div class="hdr">Sort By</div>
|
|
<div class="lgk-row"><span class="lead"></span>Alphabetical</div>
|
|
<div class="lgk-row is-hover" style="--hx:64%; --hy:50%"><span class="lead"><i data-i="check" class="bold"></i></span>Recently Played</div>
|
|
<div class="lgk-row"><span class="lead"></span>Hours Played</div>
|
|
<div class="lgk-row"><span class="lead"></span>Release Date</div>
|
|
<div class="lgk-row"><span class="lead"></span>Size on Disk</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ SteamVR frame controls (systemui panel: 0.023 deg per px = main px x 0.75), idle-dim -->
|
|
<div class="lgk-pop" id="fc" style="left:849px; top:802px; --pop-scale:.75; opacity:.72" data-tier="T1 vr:systemui">
|
|
<div class="lgk-glass lgk-toolbar" data-mat="panel" style="position:relative; height:80px; gap:8px; padding:0 8px; --r:40px">
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="keyboard"></i></span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="float"></i></span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="theater"></i></span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="more"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ the dashboard bar: a system ornament, 13 cm nearer (popup px x 1.20 = 0.037 deg per px) -->
|
|
<div class="lgk-pop" id="bar" style="left:578px; top:878px; --pop-scale:1.20; display:flex; gap:16px" data-dz="0" data-tier="bar quad (T1 + T5 slabs)">
|
|
<div class="lgk-glass lgk-toolbar" data-mat="liquid" data-lens style="position:relative; height:80px; gap:8px; padding:0 8px; --r:40px">
|
|
<span class="lgk-btn circle" style="--s:64px; background:rgb(255 255 255 / .16)"><i data-i="controller"></i></span>
|
|
<span class="lgk-btn circle lgk-art" data-art="poster:0:" style="--s:64px; background-size:cover; background-position:50% 35%"></span>
|
|
<span class="lgk-btn circle lgk-art" data-art="poster:3:" style="--s:64px; background-size:cover; background-position:50% 35%"></span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="plus"></i></span>
|
|
</div>
|
|
<div class="lgk-glass lgk-toolbar" data-mat="liquid" data-lens style="position:relative; height:80px; gap:8px; padding:0 8px 0 20px; --r:40px">
|
|
<span class="t-headline t-num" style="font-size:24px">4:56</span>
|
|
<span style="display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:18px; background:rgb(255 255 255 / .14); font:600 18px/1 var(--lg-font)" class="t-num">
|
|
<span style="width:22px; height:11px; border-radius:3px; box-shadow:inset 0 0 0 2px rgb(255 255 255 / .8); position:relative; display:inline-block"><span style="position:absolute; left:3px; top:3px; bottom:3px; width:13px; border-radius:1px; background:var(--lg-green)"></span></span>82%</span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="bell"></i><span class="lgk-badge" style="right:4px; top:6px; min-width:24px; height:24px; font-size:15px; padding:0 6px">3</span></span>
|
|
<span class="lgk-btn circle plain" style="--s:64px"><i data-i="grid"></i></span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SteamVR grab handle under the bar, as the visionOS window bar -->
|
|
<div class="lgk-windowbar" style="left:870px; top:996px"></div>
|
|
|
|
<!-- laser from the right controller to the hovered menu row (SteamVR draws beam and dot) -->
|
|
<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 points="1640,1095 1652,1095 773,410 771,410" fill="url(#beam)" opacity=".5"/>
|
|
</svg>
|
|
<div class="lgk-laser-dot" style="left:772px; top:410px"></div>
|
|
</div>
|
|
<script src="kit.js"></script>
|
|
</body>
|
|
</html>
|