364 lines
54 KiB
HTML
364 lines
54 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN"><head><meta charset="utf-8"><meta http-equiv="Content-Security-Policy" content="connect-src 'none'"><meta name="viewport" content="width=device-width,initial-scale=1"><title>风格对比</title><style>
|
||
:root{--canvas:#f4f4f4;--surface:#fff;--well:#e8e8e8;--raised:#fff;--line:#e2e2e2;--line-2:#d0d0d0;--text:#161616;--soft:#5c5c5c;--faint:#8c8c8c;--ink:#161616;--hl:#ffe28a;--bar-h:48px;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--brand:"Helvetica Neue",Helvetica,Arial,sans-serif;color-scheme:light;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;color:var(--text);background:var(--canvas);font-synthesis:none;-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;
|
||
/* 动效:咔嗒用于控件,滑行用于画面与切换,弹出用于确认;弹簧曲线由刚度/阻尼采样 */
|
||
--snap:cubic-bezier(.2,.9,.25,1.04);--snap-d:330ms;--glide:cubic-bezier(.2,.8,.2,1);--glide-d:440ms;--pop:cubic-bezier(.3,1.5,.5,1);--exit:cubic-bezier(.4,0,1,1)}
|
||
@supports (transition-timing-function:linear(0,1)){:root{
|
||
--snap:linear(0,.058,.186,.339,.491,.626,.739,.827,.893,.941,.973,.994,1.005,1.011,1.013,1.013,1.012,1.01,1.008,1.006,1);
|
||
--glide:linear(0,.028,.097,.186,.286,.384,.48,.565,.644,.71,.768,.816,.856,.889,.915,.936,.953,.966,.976,.983,.989,.993,1);
|
||
--pop:linear(0,.087,.289,.533,.765,.954,1.084,1.156,1.176,1.161,1.126,1.083,1.042,1.009,.986,.973,.969,.971,.977,.985,.992,.998,1.002,1.005,1.005,1.005,1)}}
|
||
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--canvas)}h1,h2,p,dl,dd{margin:0}button,textarea,input{font:inherit;color:inherit}button{background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}:focus-visible{outline:2px solid var(--ink);outline-offset:3px}[hidden]{display:none!important}
|
||
|
||
.bar{position:sticky;top:0;z-index:10;min-height:48px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px;padding:6px 20px;background:#f4f4f4e6;backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);view-transition-name:bar}
|
||
.bar-l{display:flex;align-items:center;gap:12px;min-width:0}
|
||
.brand{display:flex;align-items:center;gap:8px;flex:none;color:var(--ink);text-decoration:none}.brand img{width:28px;height:28px;display:block;transition:transform .5s var(--snap)}.brand:hover img{transform:rotate(-10deg) scale(1.06)}.brand:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px}
|
||
.wm{font-family:var(--brand);font-size:19px;line-height:1;font-weight:700;letter-spacing:-.045em;display:flex;align-items:flex-start;gap:3px}.wm b{font-size:9.5px;line-height:1;font-weight:700;letter-spacing:.06em;padding:2px 4px 1.5px;margin-top:-1px;border-radius:4px;background:var(--hl);box-shadow:inset 0 0 0 1.4px var(--ink)}
|
||
.sep{width:1px;height:18px;background:var(--line-2);flex:none}.proj{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.round{font-size:13px;color:var(--faint);white-space:nowrap}
|
||
.bar-c{display:flex;gap:8px}.bar-r{display:flex;justify-content:flex-end;align-items:center;gap:12px}
|
||
.seg{position:relative;display:flex;padding:2px;border-radius:8px;background:var(--well)}
|
||
.seg button{position:relative;z-index:1;font-size:13px;line-height:1.5;padding:4px 11px;border-radius:6px;color:var(--soft);white-space:nowrap;transition:color .2s}.seg button:hover{color:var(--text)}.seg button[aria-pressed=true]{color:var(--text)}
|
||
.thumb{position:absolute;left:0;top:0;width:0;border-radius:6px;background:var(--raised);box-shadow:0 1px 2px #0000001f,0 2px 8px -2px #00000014,inset 0 0 0 .5px #0000000f;transition:transform var(--snap-d) var(--snap),width var(--snap-d) var(--snap)}
|
||
.toggle{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);cursor:pointer;white-space:nowrap}.toggle input{appearance:none;width:28px;height:16px;margin:0;border-radius:99px;background:var(--line-2);position:relative;cursor:pointer;transition:background .2s}.toggle input::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:99px;background:#fff;box-shadow:0 1px 2px #0003;transition:transform var(--snap-d) var(--snap),width .15s}.toggle input:checked{background:var(--ink)}.toggle input:checked::after{transform:translateX(12px)}.toggle:active input::after{width:14px}.toggle:active input:checked::after{transform:translateX(10px)}
|
||
.filter{position:relative;font-size:13px}.filter summary{list-style:none;cursor:pointer;color:var(--soft);padding:4px 10px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--line);white-space:nowrap;transition:color .15s,box-shadow .15s}.filter summary::-webkit-details-marker{display:none}.filter summary:hover,.filter[open] summary{color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
|
||
.filter-list{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:grid;gap:2px;padding:6px;border-radius:10px;background:var(--raised);box-shadow:0 18px 44px -8px #00000026,0 0 0 1px #00000012;transform-origin:top right}.filter[open]>.filter-list{animation:pop-in var(--snap-d) var(--snap) both}
|
||
.filter-list label{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:6px;cursor:pointer;font-size:14px;transition:background .12s}.filter-list label:hover{background:#0000000a}.filter-list input{accent-color:var(--ink);width:15px;height:15px;margin:0}.filter-list .n{font-family:var(--mono);color:var(--faint);font-size:13px}
|
||
|
||
.intro{max-width:1840px;margin:0 auto;padding:28px 24px 0}.intro p{font-size:14px;line-height:1.75;color:var(--soft);max-width:68ch}
|
||
|
||
.grid{max-width:1840px;margin:0 auto;padding:24px 24px 64px;display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:48px 28px;align-items:start}
|
||
.grid.first .card,.intro.first{animation:rise .7s var(--glide) both;animation-delay:calc(var(--i,0) * 70ms + 60ms)}
|
||
.card{min-width:0;display:flex;flex-direction:column}
|
||
.cap{display:flex;align-items:center;gap:12px;padding-top:14px}.cap .no{font-family:var(--mono);font-size:13px;color:var(--faint);transition:color .2s}.cap .name{font-size:16px;font-weight:600;line-height:1.4;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cap .strip-mini{margin:0 auto 0 4px;width:40px;flex:none}.cap .no.base{font-family:inherit;font-size:12px;font-weight:600;line-height:1.6;padding:0 8px;border-radius:99px;background:var(--well);color:var(--soft)}
|
||
.lede{margin-top:8px;font-size:13.5px;line-height:1.7;color:var(--soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.grid[data-notes=off] .lede{display:none}
|
||
.name{font-size:19px;line-height:1.35;font-weight:600;overflow-wrap:anywhere}.strip-mini{display:flex;height:4px;width:96px;margin-top:9px;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1px #0000001f}.strip-mini i{flex:1}
|
||
.frame{position:relative;background:var(--surface);border-radius:4px;box-shadow:0 0 0 1px #00000014,0 24px 48px -30px #00000040;transition:box-shadow .25s,transform .45s var(--glide)}.frame:hover{box-shadow:0 0 0 1px #0000002e,0 36px 64px -30px #00000052;transform:translateY(-3px)}.frame:active{transform:translateY(-1px) scale(.995);transition-duration:.25s,.12s}.frame[data-viewport=mobile]{padding:20px 0;background:var(--well)}
|
||
.peek{position:absolute;inset:auto 0 0 0;z-index:2;padding:10px 12px;font-size:12.5px;color:#fff;background:linear-gradient(transparent,#000b);opacity:0;transform:translateY(6px);transition:opacity .18s,transform .3s var(--glide);pointer-events:none;border-radius:0 0 4px 4px}.frame:hover .peek,.hit:focus-visible~.peek{opacity:1;transform:none}
|
||
.stage{position:relative;overflow:hidden;margin:0 auto;border-radius:3px;background:#ebebeb}.stage iframe,.stage img{position:absolute;left:0;top:0;border:0;display:block;transform-origin:top left;background:#fff;opacity:0;transition:opacity .4s ease-out}.stage.ready iframe,.stage.ready img{opacity:1}.stage iframe{pointer-events:none}.stage img{object-fit:contain;background:#ebebeb}
|
||
.hit{position:absolute;inset:0;width:100%;height:100%;z-index:1;border-radius:4px;cursor:zoom-in}.hit:focus-visible{outline-offset:-2px}
|
||
.service-note{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--canvas);overflow:auto;pointer-events:none}
|
||
.service-message{width:100%;max-width:440px;min-width:0;margin:auto;font-size:14px;line-height:1.7;color:var(--soft)}.service-message h3{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--text)}
|
||
.service-command{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:16px;pointer-events:auto}.service-command code{flex:1 1 200px;min-width:0;padding:6px 10px;border-radius:6px;background:var(--well);font-family:var(--mono);font-size:12.5px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}.service-command .tool{flex:none;background:var(--raised)}
|
||
.stage.offline .static{display:none}
|
||
.slide .static{display:none}.static{position:absolute;left:10px;bottom:10px;z-index:2;font-size:12.5px;line-height:1.4;padding:3px 8px;border-radius:4px;background:#000c;color:#ddd;pointer-events:none}
|
||
.pick-mark{position:absolute;top:10px;right:10px;z-index:3;display:none;align-items:center;gap:6px;padding:4px 10px 4px 8px;border-radius:99px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;line-height:1.4;box-shadow:0 6px 16px #0000003d;pointer-events:none;transform-origin:85% 50%}.pick-mark::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--hl)}
|
||
.is-chosen .pick-mark{display:inline-flex}.is-chosen .frame{box-shadow:0 0 0 2px var(--ink),0 30px 60px -30px #00000052}.is-chosen .cap .no{color:var(--text)}
|
||
|
||
.spec{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px 12px;font-size:13px;line-height:1.6}.spec dt{color:var(--faint)}.spec dd{color:var(--soft);min-width:0}
|
||
.pick{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;line-height:1.5;padding:8px 16px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--text);white-space:nowrap;transition:background .2s,color .2s,box-shadow .2s,transform .35s var(--snap)}.pick:hover{background:#0000000a}.pick:active{transform:scale(.96);transition-duration:.2s,.2s,.2s,.08s}
|
||
.pick kbd{font-family:var(--mono);font-size:12px;color:var(--faint);padding:0 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-2);transition:color .2s,box-shadow .2s}
|
||
.pick[data-on]{background:var(--ink);color:#fff;box-shadow:none}.pick[data-on]:hover{background:#333}.pick[data-on] kbd{color:#bdbdbd;box-shadow:inset 0 0 0 1px #ffffff40}
|
||
.pick[data-on]::before{content:"";width:9px;height:5px;margin:-3px 1px 0 0;border-left:1.6px solid;border-bottom:1.6px solid;transform:rotate(-45deg)}
|
||
.cap .pick{flex:none;font-size:13px;padding:4px 12px;border-radius:6px}
|
||
|
||
.loupe{position:fixed;top:var(--bar-h);left:0;right:0;bottom:0;display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:minmax(0,1fr)}
|
||
.view{position:relative;min-width:0;min-height:0;display:flex;flex-direction:column}
|
||
.surface{position:relative;flex:1;min-height:0;overflow:clip}
|
||
.track{display:flex;height:100%;transition:transform var(--glide-d) var(--glide)}
|
||
.slide{flex:0 0 100%;min-width:0;height:100%;overflow:auto;padding:20px 72px;display:flex;justify-content:center;align-items:center}.slide[data-zoom=actual]{display:block}
|
||
.slide .stage{flex:none;box-shadow:0 0 0 1px #00000014,0 40px 80px -40px #00000059;transition:transform var(--glide-d) var(--glide),opacity var(--glide-d) ease-out}.slide:not(.is-current) .stage{transform:scale(.92);opacity:.4}.slide.is-current .stage iframe{pointer-events:auto}
|
||
.nav{position:absolute;top:50%;z-index:2;width:44px;height:44px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;font-size:18px;background:#ffffffd9;color:var(--ink);box-shadow:0 0 0 1px #00000014,0 8px 24px -6px #00000033;backdrop-filter:blur(8px);opacity:.85;transition:opacity .2s,transform .35s var(--snap)}.nav:hover{opacity:1}.nav:active{transform:scale(.9);transition-duration:.2s,.08s}.nav.prev{left:14px}.nav.next{right:14px}.nav:disabled{opacity:0;pointer-events:none;transform:scale(.8)}
|
||
.info{grid-row:1;grid-column:2;overflow:auto;border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;view-transition-name:info}
|
||
.film{position:relative;display:grid;gap:2px;padding:10px;border-bottom:1px solid var(--line)}
|
||
.film-ind{position:absolute;left:0;top:0;width:0;height:0;border-radius:8px;background:#f0f0f0;box-shadow:inset 0 0 0 1px var(--line);transition:transform var(--snap-d) var(--snap),width var(--snap-d) var(--snap),height var(--snap-d) var(--snap)}
|
||
.film button{position:relative;z-index:1;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:3px 10px;padding:7px 10px;border-radius:8px;color:var(--soft);text-align:left;transition:color .2s,background .15s}.film button:hover{color:var(--text)}.film button:not([aria-current=true]):hover{background:#00000006}.film button[aria-current=true]{color:var(--text)}
|
||
.film .fn{font-family:var(--mono);font-size:12.5px;color:var(--faint);grid-row:span 2}.film .ft{font-size:13.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.film .strip-mini{margin:0;width:48px;height:3px}
|
||
.film .ft.chosen::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);display:inline-block;margin-left:8px;vertical-align:middle}
|
||
.info-body{padding:20px 20px 24px;display:flex;flex-direction:column;gap:16px}
|
||
.idx{font-size:48px;line-height:.9;font-weight:200;letter-spacing:-.02em;color:var(--faint)}.info .name{font-size:20px;line-height:1.35;margin-top:-6px}.north{font-size:14px;line-height:1.7;color:#2b2b2b}
|
||
.big-sw{display:grid;gap:6px}.big-sw div{display:grid;grid-template-columns:32px 1fr;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--soft)}.big-sw i{height:20px;border-radius:4px;box-shadow:inset 0 0 0 1px #00000017}
|
||
.info .pick{align-self:stretch;padding:8px 14px;font-size:13.5px}
|
||
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.tool{font-size:13px;padding:5px 12px;border-radius:6px;color:var(--soft);box-shadow:inset 0 0 0 1px var(--line-2);transition:color .15s,background .2s}.tool:hover{color:var(--text)}.tool[aria-pressed=true]{background:var(--ink);color:#fff;box-shadow:none}
|
||
.hint{font-size:12px;line-height:1.9;color:var(--faint)}.hint kbd{font-family:var(--mono);font-size:12px;padding:0 5px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--soft)}
|
||
.src{font-size:12px;line-height:1.6;color:var(--faint);overflow-wrap:anywhere}
|
||
|
||
.picked{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--soft);white-space:nowrap;max-width:220px;padding-left:12px;border-left:1px solid var(--line);overflow:hidden}.picked #decide-name{display:block;overflow:hidden;text-overflow:ellipsis}.picked.on #decide-name{color:var(--text);font-weight:600}
|
||
.picked .strip-mini,.choice-empty{flex:none;margin:0;width:22px;height:12px;border-radius:3px}.choice-empty{box-shadow:inset 0 0 0 1px var(--line-2)}
|
||
.notes-panel{width:340px;padding:10px}.notes-panel textarea{width:100%;min-height:110px;resize:vertical;padding:10px 12px;border:0;border-radius:6px;background:#f6f6f6;box-shadow:inset 0 0 0 1px var(--line);font-size:14px;line-height:1.7;transition:box-shadow .15s,background .15s}.notes-panel textarea:focus{outline:0;background:#fff;box-shadow:inset 0 0 0 1px var(--faint)}.notes-panel textarea::placeholder{color:var(--faint)}
|
||
.state{font-size:12px;line-height:1.6;color:var(--faint);padding:8px 2px 0}.state:empty{display:none}.state[data-warn]{color:#b3401f}
|
||
|
||
.toast{position:fixed;left:50%;bottom:24px;z-index:40;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));padding:10px 16px 10px 12px;border-radius:12px;background:var(--ink);color:#fff;box-shadow:0 18px 44px -10px #00000066;font-size:13.5px;line-height:1.5;opacity:0;transform:translate(-50%,14px) scale(.96);pointer-events:none;transition:opacity .16s var(--exit),transform .2s var(--exit)}
|
||
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto;transition:opacity .18s ease-out,transform var(--snap-d) var(--snap)}
|
||
.toast .tick{flex:none;width:22px;height:22px;border-radius:50%;background:var(--hl);display:grid;place-items:center}.toast .tick::before{content:"";width:8px;height:4px;margin-top:-2px;border-left:1.6px solid var(--ink);border-bottom:1.6px solid var(--ink);transform:rotate(-45deg)}.toast[data-fail] .tick{background:#c2462e}.toast[data-fail] .tick::before{width:2px;height:9px;margin:0;border:0;background:#fff;transform:none}
|
||
.toast b{font-weight:600;white-space:nowrap}.toast code{font-family:var(--mono);font-size:12.5px;color:#a8a8a8;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;user-select:all}.toast[data-fail] code{white-space:pre-wrap}
|
||
|
||
.none,.empty{max-width:560px;margin:18vh auto;padding:24px;text-align:center;font-size:15px;line-height:1.8;color:var(--soft)}.none button{margin-top:12px;color:var(--text);text-decoration:underline;text-underline-offset:4px}
|
||
|
||
@keyframes rise{from{opacity:0;transform:translateY(16px)}}
|
||
@keyframes pop-in{from{opacity:0;transform:translateY(-4px) scale(.96)}}
|
||
@keyframes vt-out{to{opacity:0;transform:scale(.97)}}
|
||
@keyframes vt-in{from{opacity:0;transform:scale(.98)}}
|
||
@keyframes info-in{from{transform:translateX(100%)}}
|
||
@keyframes info-out{to{transform:translateX(100%)}}
|
||
/* 并排与单张之间、视口与筛选变化用页面过渡:同一方向的画面从卡片放大到单张,其他卡片淡出,侧栏从右侧滑入 */
|
||
::view-transition-group(*){animation-duration:var(--glide-d);animation-timing-function:var(--glide)}
|
||
::view-transition-old(*),::view-transition-new(*){height:100%;object-fit:cover;object-position:50% 0}
|
||
::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
|
||
::view-transition-old(*):only-child{animation:vt-out .18s var(--exit) both}
|
||
::view-transition-new(*):only-child{animation:vt-in .3s .08s ease-out both}
|
||
::view-transition-new(info):only-child{animation:info-in var(--glide-d) var(--glide) both}
|
||
::view-transition-old(info):only-child{animation:info-out .22s var(--exit) both}
|
||
::view-transition-old(bar){display:none}::view-transition-new(bar){animation:none}
|
||
/* 视口、筛选、说明开关和缩放只改变形状与位置:外框直接变形,内容不做叠影 */
|
||
html[data-vt=reshape]::view-transition-old(*){animation:none;opacity:0}
|
||
html[data-vt=reshape]::view-transition-new(*){animation:none}
|
||
html[data-vt=reshape]::view-transition-old(*):only-child{animation:vt-out .18s var(--exit) both;opacity:1}
|
||
html[data-vt=reshape]::view-transition-new(*):only-child{animation:vt-in .3s .08s ease-out both}
|
||
|
||
@media(max-width:1180px){.grid{--cols:2!important}.bar{grid-template-columns:minmax(0,1fr) auto;row-gap:10px}.bar-r{grid-column:1/-1;justify-content:flex-start;flex-wrap:wrap}.loupe{grid-template-columns:minmax(0,1fr) 280px}}
|
||
@media(max-width:760px){.bar{grid-template-columns:1fr;padding:10px 16px}.bar-c{flex-wrap:wrap}.intro{padding:24px 16px 0}.grid{--cols:1!important;padding:24px 16px 48px;gap:48px}.loupe{position:static;display:flex;flex-direction:column}.surface{flex:none}.track{height:auto;align-items:flex-start}.slide{height:auto;padding:16px 12px}.info{border-left:0;border-top:1px solid var(--line)}.film{display:flex;overflow-x:auto}.film button{flex:none}.info-body{padding:20px 16px}.nav{display:none}.picked{border-left:0;padding-left:0}.notes-panel{width:min(340px,calc(100vw - 32px))}.filter-list{right:auto;left:0;transform-origin:top left}}
|
||
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;animation-duration:0s!important;animation-delay:0s!important}.frame:hover{transform:none}}
|
||
</style></head><body>
|
||
<header class="bar" id="bar" hidden>
|
||
<div class="bar-l"><a class="brand" href="https://www.oiloil.org" target="_blank" rel="noopener" title="Oil UI · oiloil.org" aria-label="Oil UI,打开 oiloil.org"><img src="data:image/png;base64,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" alt=""><span class="wm">Oil<b>UI</b></span></a><span class="sep" aria-hidden="true"></span><span class="proj" id="project"></span><span class="round" id="round"></span></div>
|
||
<div class="bar-c">
|
||
<div class="seg" role="group" aria-label="查看方式"><span class="thumb" aria-hidden="true"></span><button type="button" data-layout="compare" aria-pressed="true">并排</button><button type="button" data-layout="loupe" aria-pressed="false">单张</button></div>
|
||
<div class="seg" role="group" aria-label="预览视口"><span class="thumb" aria-hidden="true"></span><button type="button" data-viewport="desktop" aria-pressed="true">桌面 1280</button><button type="button" data-viewport="mobile" aria-pressed="false">手机 390</button></div>
|
||
</div>
|
||
<div class="bar-r">
|
||
<label class="toggle"><input id="notes-toggle" type="checkbox" checked>设计说明</label>
|
||
<details class="filter"><summary id="filter-summary"></summary><div id="filter-list" class="filter-list"></div></details>
|
||
<span class="picked" id="picked" title="当前选择的方向"><span id="choice-chip" class="choice-empty"></span><span id="decide-name">未选择方向</span></span>
|
||
<details class="filter"><summary id="notes-open">备注</summary><div class="filter-list notes-panel"><textarea id="notes" aria-label="备注" placeholder="喜欢哪里、要改哪里,可以用编号指明方向。"></textarea><p id="state" class="state"></p></div></details>
|
||
</div>
|
||
</header>
|
||
<div id="compare-view" hidden>
|
||
<section class="intro"><p id="brief"></p></section>
|
||
<main id="grid" class="grid" aria-label="候选方向"></main>
|
||
</div>
|
||
<main id="loupe" class="loupe" hidden aria-label="单张查看">
|
||
<div class="view">
|
||
<button type="button" class="nav prev" id="prev" aria-label="上一个方向">←</button>
|
||
<div id="surface" class="surface"><div id="track" class="track"></div></div>
|
||
<button type="button" class="nav next" id="next" aria-label="下一个方向">→</button>
|
||
</div>
|
||
<aside id="info" class="info"><nav id="film" class="film" aria-label="切换方向"></nav><div id="info-body" class="info-body" aria-live="polite"></div></aside>
|
||
</main>
|
||
<div id="none" class="none" hidden>当前没有要比较的方向。<br><button type="button" id="show-all">显示全部</button></div>
|
||
<div id="empty" class="empty" hidden>尚未加入设计小样。按 references/style-explorer.md 准备 manifest 后用生成器组装。</div>
|
||
<div id="toast" class="toast" role="status" aria-live="polite"><span class="tick"></span><b></b><code></code></div>
|
||
<script>
|
||
const DATA = /*__OIL_UI_DATA__*/ null;
|
||
(()=>{
|
||
const $=s=>document.querySelector(s),$$=s=>document.querySelectorAll(s);
|
||
if(!DATA?.candidates?.length){$('#empty').hidden=false;return;}
|
||
const C=DATA.candidates,SIZES={desktop:{w:1280,h:900},mobile:{w:390,h:844}},KEY=`oil-ui:${DATA.fingerprint||DATA.project}`;
|
||
const byId=Object.fromEntries(C.map(c=>[c.id,c])),DIRS=C.filter(c=>!c.baseline),no=c=>c.baseline?'现状':String(DIRS.indexOf(c)+1).padStart(2,'0'),vtName=c=>`stage-${C.indexOf(c)}`;
|
||
const root=document.documentElement,calm=matchMedia('(prefers-reduced-motion: reduce)'),narrow=()=>matchMedia('(max-width:760px)').matches;
|
||
const ease=n=>getComputedStyle(root).getPropertyValue(`--${n}`).trim()||'ease-out';
|
||
let st={layout:'compare',viewport:'desktop',notesOn:true,visible:C.map(c=>c.id),current:C[0].id,chosen:null,notes:''},stored=true,zoomActual=false,compareScroll=0,gridKey='',loupeKey='',toastTimer=0;
|
||
try{const saved=JSON.parse(localStorage.getItem(KEY)||'null');if(saved&&typeof saved==='object'){Object.assign(st,saved);st.visible=(Array.isArray(st.visible)?st.visible:[]).filter(id=>byId[id]);if(!byId[st.chosen])st.chosen=null;if(!byId[st.current])st.current=C[0].id;if(!['compare','loupe'].includes(st.layout))st.layout='compare';if(!SIZES[st.viewport])st.viewport='desktop';}}catch{stored=false;}
|
||
function save(){if(!stored)return;try{localStorage.setItem(KEY,JSON.stringify(st));}catch{stored=false;status();}}
|
||
const el=(tag,cls,text)=>{const n=document.createElement(tag);if(cls)n.className=cls;if(text!=null)n.textContent=text;return n;};
|
||
const shown=()=>C.filter(c=>st.visible.includes(c.id));
|
||
const services=new Map(C.filter(c=>c.kind==='url').map(c=>[c.content,{ready:null,pending:false}]));
|
||
const startCommand=DATA.serve?(DATA.serve.cwd?`cd "${DATA.serve.cwd.replace(/[\\"$`]/g,'\\$&')}" && ${DATA.serve.command}`:DATA.serve.command):'';
|
||
|
||
function serviceNotice(){
|
||
const note=el('div','service-note'),message=el('div','service-message');note.hidden=true;note.setAttribute('role','status');
|
||
message.append(el('h3',null,'开发服务器没有运行'),el('p',null,'在对话里跟 Agent 说“打开对比页”就行。'));
|
||
if(startCommand){const row=el('div','service-command'),button=el('button','tool','复制命令');button.type='button';button.dataset.copyServe='';button.setAttribute('aria-label','复制启动命令');button.addEventListener('click',()=>copy(startCommand));row.append(el('code',null,startCommand),button);message.append(row);}
|
||
note.append(message);return note;
|
||
}
|
||
function syncService(s,c){
|
||
const ready=services.get(c.content).ready,m=s.querySelector('iframe');
|
||
s.classList.toggle('offline',ready===false);s.querySelector('.service-note').hidden=ready!==false;m.hidden=ready!==true;
|
||
if(ready===true){if(m.getAttribute('src')!==c.content){s.classList.remove('ready');m.src=c.content;}}
|
||
else{s.classList.remove('ready');if(m.hasAttribute('src'))m.removeAttribute('src');}
|
||
}
|
||
async function checkService(url){
|
||
const state=services.get(url);if(state.pending)return;state.pending=true;
|
||
const controller=new AbortController(),timer=setTimeout(()=>controller.abort(),2500);
|
||
const target=new URL(url);if(target.hostname==='[::1]')target.hostname='localhost';
|
||
try{await fetch(target.href,{mode:'no-cors',cache:'no-store',credentials:'omit',signal:controller.signal});state.ready=true;}catch{state.ready=false;}
|
||
finally{clearTimeout(timer);state.pending=false;}
|
||
$$('.stage').forEach(s=>{const c=byId[s.dataset.id];if(c.kind==='url'&&c.content===url)syncService(s,c);});
|
||
}
|
||
const checkServices=()=>services.forEach((state,url)=>checkService(url));
|
||
|
||
// 动效工具:尊重“减少动态效果”,浏览器不支持时直接落到最终状态
|
||
function animate(node,frames,opts){if(calm.matches||!node?.animate)return;try{node.animate(frames,opts);}catch{node.animate(frames,{...opts,easing:'ease-out'});}}
|
||
let vtSeq=0;
|
||
function morph(update,kind){
|
||
if(calm.matches||!document.startViewTransition||document.hidden){update();return;}
|
||
const n=++vtSeq;root.dataset.vt=kind||'';
|
||
try{document.startViewTransition(update).finished.finally(()=>{if(n===vtSeq)delete root.dataset.vt;});}catch{update();}
|
||
}
|
||
function slideTo(ind,target,instant){
|
||
if(!ind||!target||!target.offsetWidth)return;
|
||
if(instant)ind.style.transition='none';
|
||
ind.style.width=`${target.offsetWidth}px`;ind.style.height=`${target.offsetHeight}px`;ind.style.transform=`translate(${target.offsetLeft}px,${target.offsetTop}px)`;
|
||
if(instant){ind.offsetWidth;ind.style.transition='';}
|
||
}
|
||
const placeThumbs=instant=>$$('.seg').forEach(s=>slideTo(s.querySelector('.thumb'),s.querySelector('[aria-pressed=true]'),instant));
|
||
const placeFilm=instant=>{const f=$('#film');slideTo(f.querySelector('.film-ind'),f.querySelector('[aria-current=true]'),instant);};
|
||
|
||
document.title=`${DATA.project} · Oil UI`;
|
||
$('#project').textContent=DATA.project;$('#round').textContent=DATA.round||'';
|
||
$('#brief').textContent=DATA.brief||'';
|
||
|
||
function stripMini(c){const s=el('span','strip-mini');(c.palette||[]).forEach(h=>{const i=el('i');i.style.background=h;s.append(i);});return s;}
|
||
function stage(c,interactive){
|
||
const s=el('div','stage');s.dataset.id=c.id;
|
||
const m=document.createElement(c.kind==='image'?'img':'iframe');
|
||
if(c.kind==='image'){m.alt=c.name;m.draggable=false;}
|
||
else{m.title=c.name;m.setAttribute('sandbox',c.kind==='url'?'allow-scripts allow-same-origin allow-forms':c.interactive?'allow-scripts allow-forms':'');m.referrerPolicy='no-referrer';if(!interactive)m.tabIndex=-1;}
|
||
m.addEventListener('load',()=>{if(c.kind==='url'&&services.get(c.content).ready!==true)return;s.classList.add('ready');fit(s);});
|
||
if(c.kind==='image')m.src=c.content;else if(c.kind!=='url')m.srcdoc=c.content;
|
||
s.append(m);
|
||
if(c.kind==='url'){s.append(serviceNotice());syncService(s,c);}
|
||
if(c.kind!=='html'||c.interactive)s.append(el('span','static',c.kind==='url'?'本地运行':c.kind==='image'?'静态图':'可操作'));
|
||
return s;
|
||
}
|
||
function fit(s){
|
||
if(!s.isConnected)return;
|
||
const size=SIZES[st.viewport],m=s.querySelector('iframe,img'),box=s.parentElement;let r;
|
||
if(box.classList.contains('slide')){const cs=getComputedStyle(box),w=box.clientWidth-parseFloat(cs.paddingLeft)-parseFloat(cs.paddingRight),h=narrow()?Infinity:box.clientHeight-parseFloat(cs.paddingTop)-parseFloat(cs.paddingBottom);r=box.dataset.zoom==='actual'?1:Math.min(w/size.w,h/size.h,1);}
|
||
else r=Math.min(box.clientWidth/size.w,1);
|
||
if(!(r>0))return;
|
||
s.style.width=`${size.w*r}px`;s.style.height=`${size.h*r}px`;m.style.width=`${size.w}px`;m.style.height=`${size.h}px`;m.style.transform=`scale(${r})`;
|
||
}
|
||
const fitAll=()=>$$('.stage').forEach(fit),refit=()=>requestAnimationFrame(fitAll);
|
||
|
||
function specList(c){
|
||
const dl=el('dl','spec');const row=(k,v)=>{dl.append(el('dt',null,k),el('dd',null,v));};
|
||
row('字体',c.typography);row('特征',(c.traits||[]).join(' · '));return dl;
|
||
}
|
||
function pickButton(c){const b=el('button','pick');b.type='button';b.dataset.pick=c.id;b.addEventListener('click',()=>choose(c.id));return b;}
|
||
function card(c,i){
|
||
const a=el('article','card');a.dataset.id=c.id;a.style.setProperty('--i',i);a.setAttribute('aria-label',c.name);
|
||
const frame=el('div','frame');frame.style.viewTransitionName=vtName(c);const s=stage(c,false);
|
||
const hit=el('button','hit');hit.type='button';hit.setAttribute('aria-label',`单张查看 ${c.name}`);hit.addEventListener('click',()=>setLayout('loupe',c.id));
|
||
s.append(hit);frame.append(s,el('span','pick-mark','已选择'),el('span','peek','点击单张查看 · 实际尺寸'));
|
||
const cap=el('div','cap');cap.style.viewTransitionName=`cap-${C.indexOf(c)}`;cap.append(el('span',c.baseline?'no base':'no',no(c)),el('h2','name',c.name),stripMini(c),pickButton(c));
|
||
const lede=el('p','lede',c.concept);lede.title=c.concept;lede.style.viewTransitionName=`lede-${C.indexOf(c)}`;
|
||
a.append(frame,cap,lede);return a;
|
||
}
|
||
function syncCompare(){
|
||
const list=shown(),g=$('#grid'),key=list.map(c=>c.id).join();
|
||
if(key!==gridKey){gridKey=key;g.replaceChildren(...list.map(card));}
|
||
g.dataset.notes=st.notesOn?'on':'off';g.style.setProperty('--cols',Math.min(Math.max(list.length,1),st.viewport==='mobile'?4:3));
|
||
$$('.card .frame').forEach(f=>f.dataset.viewport=st.viewport);
|
||
}
|
||
|
||
// 单张查看:所有方向预先排成一条横向轨道,切换时整条轨道滑动,不重新加载画面
|
||
function syncLoupe(dir){
|
||
const list=shown(),key=list.map(c=>c.id).join();if(!list.length)return;
|
||
if(key!==loupeKey){
|
||
loupeKey=key;dir=0;
|
||
$('#track').replaceChildren(...list.map(c=>{const sl=el('div','slide');sl.dataset.id=c.id;sl.append(stage(c,true));return sl;}));
|
||
$('#film').replaceChildren(el('span','film-ind'),...list.map(c=>{const b=el('button');b.type='button';b.dataset.id=c.id;b.append(el('span','fn',no(c)),el('span','ft',c.name),stripMini(c));b.addEventListener('click',()=>go(c.id));return b;}));
|
||
}
|
||
if(!list.some(c=>c.id===st.current))st.current=list[0].id;
|
||
const i=list.findIndex(c=>c.id===st.current),track=$('#track');
|
||
if(!dir)track.style.transition='none';
|
||
track.style.transform=`translateX(${-i*100}%)`;
|
||
if(!dir){track.offsetWidth;track.style.transition='';}
|
||
$$('.slide').forEach(sl=>{const on=sl.dataset.id===st.current;sl.classList.toggle('is-current',on);sl.inert=!on;sl.dataset.zoom=on&&zoomActual?'actual':'fit';sl.firstElementChild.style.viewTransitionName=on?vtName(byId[sl.dataset.id]):'none';});
|
||
$('#prev').disabled=i<=0;$('#next').disabled=i>=list.length-1;
|
||
$$('#film button').forEach(b=>b.setAttribute('aria-current',String(b.dataset.id===st.current)));
|
||
renderInfo(dir);placeFilm(!dir);
|
||
const cur=$('#film [aria-current=true]'),f=$('#film');
|
||
if(cur&&f.scrollWidth>f.clientWidth)f.scrollTo({left:cur.offsetLeft-16,behavior:calm.matches||!dir?'auto':'smooth'});
|
||
}
|
||
function renderInfo(dir){
|
||
const c=byId[st.current],body=$('#info-body');
|
||
const sw=el('div','big-sw');(c.palette||[]).forEach(h=>{const d=el('div');const x=el('i');x.style.background=h;d.append(x,h.toUpperCase());sw.append(d);});
|
||
const tools=el('div','tools');const z=el('button','tool',zoomActual?'适应窗口':'实际尺寸 100%');z.id='zoom';z.type='button';z.setAttribute('aria-pressed',String(zoomActual));z.addEventListener('click',toggleZoom);tools.append(z);
|
||
const hint=el('p','hint');hint.innerHTML='<kbd>←</kbd> <kbd>→</kbd> 切换方向 <kbd>P</kbd> 选择并复制<br><kbd>Esc</kbd> 回到并排';
|
||
const blocks=[el('span','idx',no(c)),el('h2','name',c.name)];
|
||
if(st.notesOn)blocks.push(el('p','north',c.concept),sw,specList(c));
|
||
blocks.push(pickButton(c),tools,hint,el('p','src',c.kind==='image'?`静态图:${c.sourceLabel}。缩放不代表响应式重排。`:c.kind==='url'?`实时运行 ${c.sourceLabel}。空白时确认开发服务器已启动,且允许被嵌入。`:c.interactive?`单张查看时可以直接操作 ${c.sourceLabel};无法联网,也不保留浏览器存储。`:`预览禁用脚本与提交;交互请直接打开 ${c.sourceLabel}。`));
|
||
body.replaceChildren(...blocks);paintChoice();
|
||
if(dir)animate(body,[{opacity:0,transform:`translateX(${dir*18}px)`},{opacity:1,transform:'none'}],{duration:420,easing:ease('glide')});
|
||
}
|
||
function toggleZoom(){
|
||
morph(()=>{zoomActual=!zoomActual;const sl=$('.slide.is-current');sl.dataset.zoom=zoomActual?'actual':'fit';fitAll();sl.scrollTo(0,0);const z=$('#zoom');z.textContent=zoomActual?'适应窗口':'实际尺寸 100%';z.setAttribute('aria-pressed',String(zoomActual));},'reshape');
|
||
}
|
||
|
||
function render(){
|
||
const list=shown(),loupe=st.layout==='loupe'&&list.length>0;
|
||
$('#compare-view').hidden=st.layout!=='compare'||!list.length;$('#loupe').hidden=!loupe;$('#none').hidden=list.length>0;
|
||
syncCompare();syncLoupe(0);
|
||
$$('[data-layout]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.layout===st.layout)));
|
||
$$('[data-viewport]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.viewport===st.viewport)));
|
||
placeThumbs(false);placeFilm(true);
|
||
$('#notes-toggle').checked=st.notesOn;
|
||
$('#filter-summary').textContent=`比较范围 ${list.length}/${C.length}`;
|
||
$$('#filter-list input').forEach(i=>i.checked=st.visible.includes(i.value));
|
||
paintChoice();fitAll();
|
||
}
|
||
function setLayout(layout,id){
|
||
if(layout===st.layout&&!(id&&id!==st.current))return;
|
||
if(layout==='loupe'&&st.layout==='compare')compareScroll=scrollY;
|
||
if(id)st.current=id;st.layout=layout;zoomActual=false;save();
|
||
morph(()=>{
|
||
render();
|
||
if(layout==='loupe'){window.scrollTo(0,0);return;}
|
||
window.scrollTo(0,compareScroll);
|
||
const a=$(`.card[data-id="${CSS.escape(st.current)}"]`),r=a?.getBoundingClientRect();
|
||
if(r&&(r.top<60||r.bottom>innerHeight))a.scrollIntoView({block:'center'});
|
||
});
|
||
}
|
||
function go(id){
|
||
const list=shown(),from=list.findIndex(c=>c.id===st.current),to=list.findIndex(c=>c.id===id);
|
||
if(to<0||to===from)return;
|
||
st.current=id;zoomActual=false;save();syncLoupe(Math.sign(to-from));fitAll();
|
||
}
|
||
function step(d){const list=shown(),i=list.findIndex(c=>c.id===st.current),n=list[i+d];if(n)go(n.id);else nudge(d);}
|
||
function nudge(d){animate($('.slide.is-current .stage'),[{transform:'none'},{transform:`translateX(${d*14}px)`},{transform:'none'}],{duration:320,easing:'ease-out'});}
|
||
|
||
// 选择即复制:再次点击“已选择”会带上最新备注重新复制,不再有单独的复制按钮
|
||
function choose(id){
|
||
const fresh=st.chosen!==id;st.chosen=id;save();paintChoice();
|
||
if(fresh){
|
||
animate($(`.card[data-id="${CSS.escape(id)}"] .pick-mark`),[{opacity:0,transform:'scale(.4)'},{opacity:1,transform:'scale(1)'}],{duration:500,easing:ease('pop')});
|
||
animate($('#decide-name'),[{opacity:0,transform:'translateY(10px)'},{opacity:1,transform:'none'}],{duration:380,easing:ease('glide')});
|
||
animate($('#choice-chip'),[{transform:'scale(.3)'},{transform:'scale(1)'}],{duration:500,easing:ease('pop')});
|
||
}
|
||
copy();
|
||
}
|
||
function paintChoice(){
|
||
$$('.card').forEach(a=>a.classList.toggle('is-chosen',a.dataset.id===st.chosen));
|
||
$$('[data-pick]').forEach(b=>{const on=b.dataset.pick===st.chosen,short=!!b.closest('.cap');b.replaceChildren(document.createTextNode(on?(short?'已选择':'已选择 · 复制'):(short?'选择':'选这个方向')));if(!short)b.append(el('kbd',null,'P'));b.toggleAttribute('data-on',on);b.title=on?'再点一次,带上最新备注重新复制':'选择这个方向,并复制给 Agent';});
|
||
$$('#film button').forEach(b=>b.querySelector('.ft').classList.toggle('chosen',b.dataset.id===st.chosen));
|
||
const c=byId[st.chosen];$('#decide-name').textContent=c?`${no(c)} ${c.name}`:'未选择方向';$('#picked').classList.toggle('on',!!c);
|
||
const chip=$('#choice-chip'),next=c?stripMini(c):el('span','choice-empty');next.id='choice-chip';chip.replaceWith(next);
|
||
status();
|
||
}
|
||
function status(){$('#notes-open').textContent=st.notes?'备注 ·':'备注';const s=$('#state');if(!stored){s.textContent='浏览器存储不可用:关闭页面后选择和备注不会保留。';s.dataset.warn='';}else{s.textContent='备注会和选择一起复制。改完备注,再点一次“已选择”重新复制。';delete s.dataset.warn;}}
|
||
function copyText(){const c=byId[st.chosen];let t=`${DATA.round?DATA.round+':':''}选 ${no(c)} ${c.name}`;if(st.notes.trim())t+=`\n备注:${st.notes.trim()}`;return t;}
|
||
async function copy(t=copyText()){
|
||
let ok=false;
|
||
try{await navigator.clipboard.writeText(t);ok=true;}catch{const a=el('textarea');a.value=t;a.setAttribute('readonly','');a.style.cssText='position:fixed;opacity:0';document.body.append(a);a.select();try{ok=document.execCommand('copy');}catch{}a.remove();}
|
||
toast(ok,t);
|
||
}
|
||
function toast(ok,t){
|
||
const n=$('#toast');n.toggleAttribute('data-fail',!ok);n.querySelector('b').textContent=ok?'已复制,粘贴给 Agent':'复制失败,请手动复制';n.querySelector('code').textContent=ok?t.replace(/\n/g,' · '):t;
|
||
n.classList.remove('show');n.offsetWidth;n.classList.add('show');
|
||
clearTimeout(toastTimer);toastTimer=setTimeout(()=>n.classList.remove('show'),ok?2400:8000);
|
||
}
|
||
|
||
const fl=$('#filter-list');
|
||
C.forEach(c=>{const l=el('label'),i=el('input');i.type='checkbox';i.value=c.id;i.addEventListener('change',()=>{st.visible=C.map(x=>x.id).filter(id=>id===c.id?i.checked:st.visible.includes(id));save();morph(render,'reshape');});l.append(i,el('span','n',no(c)),c.name);fl.append(l);});
|
||
$('#show-all').addEventListener('click',()=>{st.visible=C.map(c=>c.id);save();morph(render,'reshape');});
|
||
$$('button[data-layout]').forEach(b=>b.addEventListener('click',()=>setLayout(b.dataset.layout)));
|
||
$$('button[data-viewport]').forEach(b=>b.addEventListener('click',()=>{if(st.viewport===b.dataset.viewport)return;st.viewport=b.dataset.viewport;save();morph(render,'reshape');}));
|
||
$('#notes-toggle').addEventListener('change',e=>{st.notesOn=e.target.checked;save();morph(render,'reshape');});
|
||
$('#prev').addEventListener('click',()=>step(-1));$('#next').addEventListener('click',()=>step(1));
|
||
document.addEventListener('keydown',e=>{
|
||
if(e.target.closest?.('textarea,input,summary')||e.metaKey||e.ctrlKey||e.altKey||st.layout!=='loupe')return;
|
||
if(e.key==='ArrowLeft')step(-1);else if(e.key==='ArrowRight')step(1);else if(e.key==='Escape')setLayout('compare');else if(e.key.toLowerCase()==='p')choose(st.current);
|
||
});
|
||
const notes=$('#notes');notes.value=st.notes||'';
|
||
notes.addEventListener('input',()=>{st.notes=notes.value;save();status();});
|
||
$('#notes-open').parentElement.addEventListener('toggle',e=>{if(e.target.open)notes.focus();});
|
||
function syncBars(){root.style.setProperty('--bar-h',`${$('#bar').offsetHeight}px`);placeThumbs(true);placeFilm(true);refit();}
|
||
window.addEventListener('resize',syncBars,{passive:true});
|
||
document.fonts?.ready.then(()=>{placeThumbs(true);placeFilm(true);});
|
||
$('#bar').hidden=false;
|
||
if(st.layout==='compare'){$('#grid').classList.add('first');$('.intro').classList.add('first');setTimeout(()=>{$('#grid').classList.remove('first');$('.intro').classList.remove('first');},1400);}
|
||
render();syncBars();
|
||
if(services.size){checkServices();setInterval(()=>{if(!document.hidden)checkServices();},5000);window.addEventListener('focus',checkServices);document.addEventListener('visibilitychange',()=>{if(!document.hidden)checkServices();});}
|
||
})();
|
||
</script></body></html>
|