Commit ·
94bd375
1
Parent(s): db121cf
Publish UniversalLabeler semantic packet explorer
Browse files- README.md +11 -5
- index.html +513 -17
README.md
CHANGED
|
@@ -1,10 +1,16 @@
|
|
| 1 |
---
|
| 2 |
-
title: UniversalLabeler
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
colorTo: indigo
|
| 6 |
sdk: static
|
|
|
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: UniversalLabeler — Meaning, packed.
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: red
|
|
|
|
| 5 |
sdk: static
|
| 6 |
+
app_file: index.html
|
| 7 |
pinned: false
|
| 8 |
+
license: apache-2.0
|
| 9 |
+
short_description: See grounded meaning move across five languages.
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# UniversalLabeler explorer
|
| 13 |
+
|
| 14 |
+
Interactive visual companion to the
|
| 15 |
+
[`itspublu/UniversalLabeler`](https://huggingface.co/datasets/itspublu/UniversalLabeler)
|
| 16 |
+
data and schema release.
|
index.html
CHANGED
|
@@ -1,19 +1,515 @@
|
|
| 1 |
<!doctype html>
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 19 |
</html>
|
|
|
|
| 1 |
<!doctype html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
| 6 |
+
<meta name="description" content="An interactive view of UniversalLabeler: language surfaces compress into evidence-linked semantic claims, then expand without discarding world information.">
|
| 7 |
+
<title>UniversalLabeler — Meaning, packed.</title>
|
| 8 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 9 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,600&family=DM+Mono:wght@300;400;500&display=swap" rel="stylesheet">
|
| 11 |
+
<style>
|
| 12 |
+
:root {
|
| 13 |
+
--paper: #efede5;
|
| 14 |
+
--paper-deep: #dfdcd1;
|
| 15 |
+
--ink: #161613;
|
| 16 |
+
--muted: #727066;
|
| 17 |
+
--signal: #ef4c2f;
|
| 18 |
+
--signal-soft: #ffc4ad;
|
| 19 |
+
--line: rgba(22, 22, 19, .22);
|
| 20 |
+
--line-strong: rgba(22, 22, 19, .72);
|
| 21 |
+
--serif: "Bodoni Moda", "Iowan Old Style", "Times New Roman", serif;
|
| 22 |
+
--mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
|
| 23 |
+
}
|
| 24 |
+
|
| 25 |
+
* { box-sizing: border-box; }
|
| 26 |
+
html { scroll-behavior: smooth; }
|
| 27 |
+
body {
|
| 28 |
+
margin: 0;
|
| 29 |
+
color: var(--ink);
|
| 30 |
+
background:
|
| 31 |
+
linear-gradient(90deg, transparent calc(50% - .5px), rgba(22,22,19,.05) 50%, transparent calc(50% + .5px)),
|
| 32 |
+
var(--paper);
|
| 33 |
+
font-family: var(--mono);
|
| 34 |
+
overflow-x: hidden;
|
| 35 |
+
}
|
| 36 |
+
body::before {
|
| 37 |
+
content: "";
|
| 38 |
+
position: fixed;
|
| 39 |
+
inset: 0;
|
| 40 |
+
opacity: .08;
|
| 41 |
+
pointer-events: none;
|
| 42 |
+
z-index: 20;
|
| 43 |
+
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
|
| 44 |
+
mix-blend-mode: multiply;
|
| 45 |
+
}
|
| 46 |
+
button, a { font: inherit; }
|
| 47 |
+
button { color: inherit; }
|
| 48 |
+
::selection { background: var(--signal); color: var(--paper); }
|
| 49 |
+
|
| 50 |
+
.shell { width: min(1600px, 100%); margin: 0 auto; padding: 0 28px; }
|
| 51 |
+
.topbar {
|
| 52 |
+
height: 72px;
|
| 53 |
+
border-bottom: 1px solid var(--line-strong);
|
| 54 |
+
display: grid;
|
| 55 |
+
grid-template-columns: 1fr auto 1fr;
|
| 56 |
+
align-items: center;
|
| 57 |
+
position: relative;
|
| 58 |
+
z-index: 5;
|
| 59 |
+
}
|
| 60 |
+
.mark { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
|
| 61 |
+
.mark-glyph { width: 28px; height: 28px; border: 1px solid var(--ink); display: grid; place-items: center; font-weight: 500; }
|
| 62 |
+
.top-center { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
|
| 63 |
+
.top-right { justify-self: end; display: flex; align-items: center; gap: 18px; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
|
| 64 |
+
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgba(239,76,47,.14); animation: breathe 2s infinite; }
|
| 65 |
+
|
| 66 |
+
.hero {
|
| 67 |
+
min-height: calc(100vh - 72px);
|
| 68 |
+
display: grid;
|
| 69 |
+
grid-template-rows: auto 1fr auto;
|
| 70 |
+
padding-top: 44px;
|
| 71 |
+
padding-bottom: 24px;
|
| 72 |
+
}
|
| 73 |
+
.hero-heading {
|
| 74 |
+
display: grid;
|
| 75 |
+
grid-template-columns: 1.25fr .75fr;
|
| 76 |
+
align-items: end;
|
| 77 |
+
gap: 40px;
|
| 78 |
+
margin-bottom: 40px;
|
| 79 |
+
}
|
| 80 |
+
h1 { margin: 0; font: 400 clamp(52px, 7vw, 118px)/.82 var(--serif); letter-spacing: -.055em; max-width: 980px; }
|
| 81 |
+
h1 em { color: var(--signal); font-style: italic; }
|
| 82 |
+
.lede { margin: 0 0 6px auto; max-width: 440px; font-size: 12px; line-height: 1.75; color: var(--muted); }
|
| 83 |
+
.lede strong { color: var(--ink); font-weight: 500; }
|
| 84 |
+
|
| 85 |
+
.machine {
|
| 86 |
+
min-height: 470px;
|
| 87 |
+
border-top: 1px solid var(--line-strong);
|
| 88 |
+
border-bottom: 1px solid var(--line-strong);
|
| 89 |
+
display: grid;
|
| 90 |
+
grid-template-columns: minmax(260px, .85fr) minmax(360px, 1.15fr) minmax(320px, 1fr);
|
| 91 |
+
position: relative;
|
| 92 |
+
isolation: isolate;
|
| 93 |
+
}
|
| 94 |
+
.machine::after {
|
| 95 |
+
content: "";
|
| 96 |
+
position: absolute;
|
| 97 |
+
inset: 0;
|
| 98 |
+
background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
|
| 99 |
+
background-size: 44px 44px;
|
| 100 |
+
opacity: .2;
|
| 101 |
+
pointer-events: none;
|
| 102 |
+
z-index: -1;
|
| 103 |
+
}
|
| 104 |
+
.panel { padding: 22px; min-width: 0; position: relative; }
|
| 105 |
+
.panel + .panel { border-left: 1px solid var(--line-strong); }
|
| 106 |
+
.panel-label { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
|
| 107 |
+
.panel-label span:last-child { color: var(--muted); }
|
| 108 |
+
|
| 109 |
+
.source-panel { display: flex; flex-direction: column; }
|
| 110 |
+
.evidence-window {
|
| 111 |
+
background: var(--ink);
|
| 112 |
+
color: var(--paper);
|
| 113 |
+
min-height: 220px;
|
| 114 |
+
position: relative;
|
| 115 |
+
overflow: hidden;
|
| 116 |
+
padding: 16px;
|
| 117 |
+
display: flex;
|
| 118 |
+
align-items: end;
|
| 119 |
+
}
|
| 120 |
+
.evidence-window::before {
|
| 121 |
+
content: "";
|
| 122 |
+
position: absolute;
|
| 123 |
+
width: 260px;
|
| 124 |
+
height: 260px;
|
| 125 |
+
border: 1px solid rgba(239,237,229,.2);
|
| 126 |
+
border-radius: 50%;
|
| 127 |
+
top: -122px;
|
| 128 |
+
right: -82px;
|
| 129 |
+
box-shadow: 0 0 0 34px rgba(239,237,229,.03), 0 0 0 68px rgba(239,237,229,.03);
|
| 130 |
+
}
|
| 131 |
+
.scene-glyph { position: absolute; inset: 0; }
|
| 132 |
+
.surface-line { position: relative; z-index: 2; font: 400 clamp(23px, 2.3vw, 38px)/1.05 var(--serif); max-width: 90%; }
|
| 133 |
+
.surface-line span { transition: color .35s, background .35s; }
|
| 134 |
+
.surface-line .hot { color: var(--signal-soft); }
|
| 135 |
+
.framecode { position: absolute; top: 14px; left: 16px; color: rgba(239,237,229,.48); font-size: 9px; letter-spacing: .12em; }
|
| 136 |
+
.scope-line { position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; background: rgba(239,237,229,.16); }
|
| 137 |
+
.scope-line::after { content: ""; display: block; height: 100%; width: var(--progress, 0%); background: var(--signal); transition: width .8s ease; }
|
| 138 |
+
.evidence-meta { margin-top: auto; padding-top: 20px; display: grid; gap: 9px; font-size: 10px; }
|
| 139 |
+
.meta-row { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
|
| 140 |
+
.meta-row span:last-child { color: var(--muted); text-align: right; }
|
| 141 |
+
|
| 142 |
+
.core-panel { overflow: hidden; }
|
| 143 |
+
.core-stage { height: 355px; position: relative; display: grid; place-items: center; }
|
| 144 |
+
.orbit { position: absolute; border: 1px solid var(--line); border-radius: 50%; animation: turn 22s linear infinite; }
|
| 145 |
+
.orbit.one { width: 326px; height: 326px; }
|
| 146 |
+
.orbit.two { width: 250px; height: 250px; animation-duration: 15s; animation-direction: reverse; border-style: dashed; }
|
| 147 |
+
.orbit::before, .orbit::after { content: ""; position: absolute; width: 8px; height: 8px; background: var(--signal); border-radius: 50%; }
|
| 148 |
+
.orbit::before { left: 50%; top: -4px; }
|
| 149 |
+
.orbit::after { left: 50%; bottom: -4px; background: var(--ink); }
|
| 150 |
+
.core {
|
| 151 |
+
width: 178px;
|
| 152 |
+
height: 178px;
|
| 153 |
+
border-radius: 50%;
|
| 154 |
+
background: var(--ink);
|
| 155 |
+
color: var(--paper);
|
| 156 |
+
position: relative;
|
| 157 |
+
display: grid;
|
| 158 |
+
place-items: center;
|
| 159 |
+
text-align: center;
|
| 160 |
+
box-shadow: 0 0 0 12px var(--paper), 0 0 0 13px var(--ink);
|
| 161 |
+
z-index: 3;
|
| 162 |
+
}
|
| 163 |
+
.core::before { content: ""; position: absolute; inset: 16px; border: 1px dashed rgba(239,237,229,.34); border-radius: 50%; animation: turn 12s linear infinite; }
|
| 164 |
+
.core-copy { position: relative; }
|
| 165 |
+
.core-kicker { font-size: 9px; letter-spacing: .18em; color: var(--signal-soft); }
|
| 166 |
+
.core-name { display: block; margin: 9px 0 5px; font: 400 25px/1 var(--serif); }
|
| 167 |
+
.core-count { font-size: 9px; letter-spacing: .08em; color: rgba(239,237,229,.6); }
|
| 168 |
+
.claim-node { position: absolute; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; background: var(--paper); border: 1px solid var(--ink); padding: 5px 7px; z-index: 4; transition: transform .3s, background .3s, color .3s; }
|
| 169 |
+
.claim-node.active { background: var(--signal); color: var(--paper); transform: scale(1.08); }
|
| 170 |
+
.n1{top:14px;left:19%}.n2{top:49px;right:6%}.n3{top:139px;right:0}.n4{bottom:58px;right:8%}.n5{bottom:8px;right:29%}.n6{bottom:18px;left:14%}.n7{bottom:92px;left:0}.n8{top:117px;left:0}.n9{top:45px;left:5%}
|
| 171 |
+
.compression-meter { position: absolute; inset: auto 0 0; display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--line); }
|
| 172 |
+
.metric { padding: 11px; border-right: 1px solid var(--line); }
|
| 173 |
+
.metric:last-child { border: 0; }
|
| 174 |
+
.metric b { display: block; font: 400 22px/1 var(--serif); }
|
| 175 |
+
.metric span { font-size: 8px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }
|
| 176 |
+
|
| 177 |
+
.outputs { display: flex; flex-direction: column; gap: 0; }
|
| 178 |
+
.output {
|
| 179 |
+
appearance: none;
|
| 180 |
+
border: 0;
|
| 181 |
+
border-top: 1px solid var(--line);
|
| 182 |
+
background: transparent;
|
| 183 |
+
padding: 14px 0;
|
| 184 |
+
display: grid;
|
| 185 |
+
grid-template-columns: 58px 1fr 20px;
|
| 186 |
+
align-items: baseline;
|
| 187 |
+
gap: 10px;
|
| 188 |
+
text-align: left;
|
| 189 |
+
cursor: pointer;
|
| 190 |
+
transition: padding .25s, color .25s;
|
| 191 |
+
}
|
| 192 |
+
.output:first-child { border-top: 0; }
|
| 193 |
+
.output:hover, .output.active { padding-left: 10px; color: var(--signal); }
|
| 194 |
+
.output-code { font-size: 9px; color: var(--muted); text-transform: uppercase; }
|
| 195 |
+
.output-text { font: 400 clamp(17px, 1.45vw, 24px)/1.15 var(--serif); }
|
| 196 |
+
.output-check { font-size: 11px; opacity: .3; }
|
| 197 |
+
.output.active .output-check { opacity: 1; }
|
| 198 |
+
.ledger { margin-top: auto; background: var(--paper-deep); padding: 13px; font-size: 9px; line-height: 1.8; }
|
| 199 |
+
.ledger-line { display: flex; justify-content: space-between; }
|
| 200 |
+
.ledger-line b { font-weight: 400; color: var(--signal); }
|
| 201 |
+
|
| 202 |
+
.scenario-strip { display: grid; grid-template-columns: auto repeat(4, 1fr) auto; align-items: stretch; min-height: 66px; }
|
| 203 |
+
.strip-label { padding: 0 18px 0 0; display: flex; align-items: center; font-size: 9px; text-transform: uppercase; letter-spacing: .15em; }
|
| 204 |
+
.scenario {
|
| 205 |
+
appearance: none; background: transparent; border: 0; border-left: 1px solid var(--line); padding: 12px 16px; text-align: left; cursor: pointer; position: relative;
|
| 206 |
+
}
|
| 207 |
+
.scenario::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--signal); transition: right .35s; }
|
| 208 |
+
.scenario.active::after { right: 0; }
|
| 209 |
+
.scenario-num { display: block; color: var(--muted); font-size: 8px; margin-bottom: 5px; }
|
| 210 |
+
.scenario-name { font: 400 15px/1 var(--serif); }
|
| 211 |
+
.pause { appearance: none; border: 0; border-left: 1px solid var(--line); background: transparent; width: 58px; cursor: pointer; font-size: 15px; }
|
| 212 |
+
|
| 213 |
+
.particle { position: fixed; z-index: 30; pointer-events: none; background: var(--signal); color: var(--paper); font-size: 8px; padding: 4px 7px; border-radius: 12px; white-space: nowrap; transition: transform .72s cubic-bezier(.7,0,.25,1), opacity .2s .55s; }
|
| 214 |
+
|
| 215 |
+
.thesis { padding: 108px 0 90px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; border-bottom: 1px solid var(--line-strong); }
|
| 216 |
+
.thesis-index { font-size: 10px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
|
| 217 |
+
.thesis h2 { font: 400 clamp(42px, 5vw, 82px)/.94 var(--serif); letter-spacing: -.04em; margin: 0; }
|
| 218 |
+
.thesis h2 em { color: var(--signal); }
|
| 219 |
+
.thesis-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 54px; font-size: 11px; line-height: 1.8; color: var(--muted); }
|
| 220 |
+
.thesis-copy strong { color: var(--ink); font-weight: 500; }
|
| 221 |
+
|
| 222 |
+
.packet-section { padding: 72px 0 100px; }
|
| 223 |
+
.section-head { display: flex; justify-content: space-between; align-items: end; border-bottom: 1px solid var(--line-strong); padding-bottom: 18px; }
|
| 224 |
+
.section-head h2 { margin: 0; font: 400 clamp(38px,4vw,64px)/1 var(--serif); letter-spacing: -.035em; }
|
| 225 |
+
.section-head p { max-width: 440px; font-size: 10px; line-height: 1.7; color: var(--muted); margin: 0; }
|
| 226 |
+
.packet-table { display: grid; }
|
| 227 |
+
.packet-row { display: grid; grid-template-columns: 42px 180px 1fr 95px; gap: 18px; align-items: center; min-height: 64px; border-bottom: 1px solid var(--line); transition: background .2s; }
|
| 228 |
+
.packet-row:hover { background: rgba(255,255,255,.22); }
|
| 229 |
+
.packet-row .idx { color: var(--muted); font-size: 9px; }
|
| 230 |
+
.packet-row .field { text-transform: uppercase; font-size: 9px; letter-spacing: .12em; }
|
| 231 |
+
.packet-row .value { font: 400 19px/1.2 var(--serif); }
|
| 232 |
+
.packet-row .state { justify-self: end; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--signal); }
|
| 233 |
+
|
| 234 |
+
footer { background: var(--ink); color: var(--paper); padding: 28px; }
|
| 235 |
+
.footer-inner { width: min(1544px,100%); margin: auto; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; }
|
| 236 |
+
.footer-title { font: 400 clamp(38px,6vw,92px)/.86 var(--serif); letter-spacing: -.045em; }
|
| 237 |
+
.footer-meta { text-align: right; font-size: 9px; line-height: 1.9; color: rgba(239,237,229,.56); }
|
| 238 |
+
.footer-meta a { color: var(--paper); text-decoration-color: var(--signal); text-underline-offset: 4px; }
|
| 239 |
+
|
| 240 |
+
@keyframes turn { to { transform: rotate(360deg); } }
|
| 241 |
+
@keyframes breathe { 50% { opacity: .35; transform: scale(.8); } }
|
| 242 |
+
@keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
|
| 243 |
+
|
| 244 |
+
@media (max-width: 1050px) {
|
| 245 |
+
.hero-heading { grid-template-columns: 1fr; }
|
| 246 |
+
.lede { margin-left: 0; }
|
| 247 |
+
.machine { grid-template-columns: 1fr 1.25fr; }
|
| 248 |
+
.source-panel { display: none; }
|
| 249 |
+
.core-panel { border-left: 0 !important; }
|
| 250 |
+
.scenario-strip { grid-template-columns: repeat(4,1fr) auto; }
|
| 251 |
+
.strip-label { display: none; }
|
| 252 |
+
}
|
| 253 |
+
@media (max-width: 700px) {
|
| 254 |
+
.shell { padding: 0 16px; }
|
| 255 |
+
.topbar { grid-template-columns: 1fr auto; height: 62px; }
|
| 256 |
+
.top-center { display: none; }
|
| 257 |
+
.top-right span:not(.status-dot) { display: none; }
|
| 258 |
+
.hero { padding-top: 30px; }
|
| 259 |
+
h1 { font-size: clamp(48px,16vw,74px); }
|
| 260 |
+
.machine { display: block; }
|
| 261 |
+
.core-panel { height: 430px; border-bottom: 1px solid var(--line-strong); }
|
| 262 |
+
.outputs-panel { min-height: 420px; border-left: 0 !important; }
|
| 263 |
+
.scenario-strip { grid-template-columns: 1fr 1fr; }
|
| 264 |
+
.scenario { border-bottom: 1px solid var(--line); }
|
| 265 |
+
.pause { position: absolute; top: 14px; right: 16px; border: 1px solid var(--line); width: 36px; height: 30px; z-index: 8; }
|
| 266 |
+
.thesis { grid-template-columns: 1fr; padding: 72px 0; }
|
| 267 |
+
.thesis-copy { grid-template-columns: 1fr; margin-top: 34px; }
|
| 268 |
+
.section-head { display: block; }
|
| 269 |
+
.section-head p { margin-top: 20px; }
|
| 270 |
+
.packet-row { grid-template-columns: 28px 100px 1fr; gap: 8px; }
|
| 271 |
+
.packet-row .state { display: none; }
|
| 272 |
+
.packet-row .value { font-size: 16px; }
|
| 273 |
+
.footer-inner { grid-template-columns: 1fr; }
|
| 274 |
+
.footer-meta { text-align: left; }
|
| 275 |
+
}
|
| 276 |
+
@media (prefers-reduced-motion: reduce) {
|
| 277 |
+
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
|
| 278 |
+
.particle { display: none; }
|
| 279 |
+
}
|
| 280 |
+
</style>
|
| 281 |
+
</head>
|
| 282 |
+
<body>
|
| 283 |
+
<header class="shell topbar">
|
| 284 |
+
<div class="mark"><span class="mark-glyph">U</span><span>UniversalLabeler</span></div>
|
| 285 |
+
<div class="top-center">Loss-resistant annotation translation</div>
|
| 286 |
+
<div class="top-right"><span class="status-dot" aria-hidden="true"></span><span>v1.0.1 / Public spec</span></div>
|
| 287 |
+
</header>
|
| 288 |
+
|
| 289 |
+
<main>
|
| 290 |
+
<section class="shell hero" aria-labelledby="hero-title">
|
| 291 |
+
<div class="hero-heading">
|
| 292 |
+
<h1 id="hero-title">Language changes.<br>The <em>event</em> does not.</h1>
|
| 293 |
+
<p class="lede"><strong>Pack the world, not just the sentence.</strong> UniversalLabeler turns an annotation into addressable claims—action, actors, hands, objects, state, place, time, outcome and evidence—then renders each language from the same packet.</p>
|
| 294 |
+
</div>
|
| 295 |
+
|
| 296 |
+
<div class="machine" id="machine">
|
| 297 |
+
<section class="panel source-panel" aria-label="Source evidence">
|
| 298 |
+
<div class="panel-label"><span>01 / Observe</span><span id="source-locale">EN source</span></div>
|
| 299 |
+
<div class="evidence-window">
|
| 300 |
+
<div class="framecode" id="framecode">FRAME 01:00:01.000—01:00:08.000</div>
|
| 301 |
+
<svg class="scene-glyph" viewBox="0 0 420 260" aria-hidden="true">
|
| 302 |
+
<g fill="none" stroke="rgba(239,237,229,.28)" stroke-width="1.4">
|
| 303 |
+
<path d="M38 190H382M94 190v42M330 190v42"/>
|
| 304 |
+
<path id="object-shape" d="M145 154 Q210 126 275 154 L260 182H157Z"/>
|
| 305 |
+
<path d="M45 94Q93 105 142 151M375 92Q328 106 276 151"/>
|
| 306 |
+
<circle cx="45" cy="94" r="9"/><circle cx="375" cy="92" r="9"/>
|
| 307 |
+
</g>
|
| 308 |
+
<g fill="#ef4c2f"><circle cx="142" cy="151" r="4"/><circle cx="276" cy="151" r="4"/></g>
|
| 309 |
+
<text x="51" y="86" fill="rgba(239,237,229,.58)" font-family="monospace" font-size="8">LEFT / STABILIZE</text>
|
| 310 |
+
<text x="283" y="84" fill="rgba(239,237,229,.58)" font-family="monospace" font-size="8">RIGHT / ACT</text>
|
| 311 |
+
</svg>
|
| 312 |
+
<div class="surface-line" id="source-text">Fold the <span class="hot">towel</span> on the table with both hands.</div>
|
| 313 |
+
<div class="scope-line" id="scope-line"></div>
|
| 314 |
+
</div>
|
| 315 |
+
<div class="evidence-meta">
|
| 316 |
+
<div class="meta-row"><span>EVIDENCE</span><span>head_video · hand_pose</span></div>
|
| 317 |
+
<div class="meta-row"><span>ENVIRONMENT</span><span id="environment">indoor · laundry area</span></div>
|
| 318 |
+
<div class="meta-row"><span>TIME SCOPE</span><span id="time-scope">7.00 s · episode_clock</span></div>
|
| 319 |
+
<div class="meta-row"><span>PROVENANCE</span><span>source-bound · reviewed</span></div>
|
| 320 |
+
</div>
|
| 321 |
+
</section>
|
| 322 |
+
|
| 323 |
+
<section class="panel core-panel" aria-label="Semantic packet">
|
| 324 |
+
<div class="panel-label"><span>02 / Pack</span><span>UAP core v1</span></div>
|
| 325 |
+
<div class="core-stage">
|
| 326 |
+
<div class="orbit one"></div><div class="orbit two"></div>
|
| 327 |
+
<span class="claim-node n1" data-claim="action">action</span>
|
| 328 |
+
<span class="claim-node n2" data-claim="patient">object</span>
|
| 329 |
+
<span class="claim-node n3" data-claim="hands">hands</span>
|
| 330 |
+
<span class="claim-node n4" data-claim="state">state Δ</span>
|
| 331 |
+
<span class="claim-node n5" data-claim="outcome">outcome</span>
|
| 332 |
+
<span class="claim-node n6" data-claim="evidence">evidence</span>
|
| 333 |
+
<span class="claim-node n7" data-claim="time">time</span>
|
| 334 |
+
<span class="claim-node n8" data-claim="place">place</span>
|
| 335 |
+
<span class="claim-node n9" data-claim="roles">roles</span>
|
| 336 |
+
<div class="core" id="core">
|
| 337 |
+
<div class="core-copy"><span class="core-kicker">CONTENT-BOUND</span><span class="core-name">meaning<br>packet</span><span class="core-count">10 / 10 claims</span></div>
|
| 338 |
+
</div>
|
| 339 |
+
<div class="compression-meter">
|
| 340 |
+
<div class="metric"><b id="claim-count">10</b><span>atomic claims</span></div>
|
| 341 |
+
<div class="metric"><b>0</b><span>silent drops</span></div>
|
| 342 |
+
<div class="metric"><b>5</b><span>projections</span></div>
|
| 343 |
+
</div>
|
| 344 |
+
</div>
|
| 345 |
+
</section>
|
| 346 |
+
|
| 347 |
+
<section class="panel outputs-panel" aria-label="Language projections">
|
| 348 |
+
<div class="panel-label"><span>03 / Project</span><span>one packet → many surfaces</span></div>
|
| 349 |
+
<div class="outputs" id="outputs"></div>
|
| 350 |
+
<div class="ledger">
|
| 351 |
+
<div class="ledger-line"><span>CLAIMS REPRESENTED</span><b id="represented">10 / 10</b></div>
|
| 352 |
+
<div class="ledger-line"><span>CLAIMS OMITTED</span><b>0</b></div>
|
| 353 |
+
<div class="ledger-line"><span>REVIEW STATE</span><b>CONFORMANCE</b></div>
|
| 354 |
+
</div>
|
| 355 |
+
</section>
|
| 356 |
+
</div>
|
| 357 |
+
|
| 358 |
+
<nav class="scenario-strip" aria-label="Example events">
|
| 359 |
+
<span class="strip-label">Select event</span>
|
| 360 |
+
<button class="scenario active" data-scene="0"><span class="scenario-num">01</span><span class="scenario-name">Fold textile</span></button>
|
| 361 |
+
<button class="scenario" data-scene="1"><span class="scenario-num">02</span><span class="scenario-name">Open container</span></button>
|
| 362 |
+
<button class="scenario" data-scene="2"><span class="scenario-num">03</span><span class="scenario-name">Place object</span></button>
|
| 363 |
+
<button class="scenario" data-scene="3"><span class="scenario-num">04</span><span class="scenario-name">Cut ingredient</span></button>
|
| 364 |
+
<button class="pause" id="pause" aria-label="Pause automatic examples" title="Pause animation">Ⅱ</button>
|
| 365 |
+
</nav>
|
| 366 |
+
</section>
|
| 367 |
+
|
| 368 |
+
<section class="shell thesis">
|
| 369 |
+
<div class="thesis-index">00 / Design principle</div>
|
| 370 |
+
<div>
|
| 371 |
+
<h2>Compress the <em>description.</em><br>Keep the world.</h2>
|
| 372 |
+
<div class="thesis-copy">
|
| 373 |
+
<p><strong>A universal vocabulary is not an infinite dictionary.</strong> It is a compositional address space. New actions and nouns become concept IDs; roles describe how they participate; evidence says why each claim is believed.</p>
|
| 374 |
+
<p><strong>Fluent text is a view, not the database.</strong> English, Chinese, Tagalog, Spanish and Hindi can choose their own word order and grammar without becoming the authority for hands, state, timing or geometry.</p>
|
| 375 |
+
</div>
|
| 376 |
+
</div>
|
| 377 |
+
</section>
|
| 378 |
+
|
| 379 |
+
<section class="shell packet-section" aria-labelledby="packet-title">
|
| 380 |
+
<div class="section-head">
|
| 381 |
+
<h2 id="packet-title">Inside one event.</h2>
|
| 382 |
+
<p>The visible sentence is short. The packet remains explicit. Click an event above and every value below updates from the same semantic frame.</p>
|
| 383 |
+
</div>
|
| 384 |
+
<div class="packet-table" id="packet-table"></div>
|
| 385 |
+
</section>
|
| 386 |
+
</main>
|
| 387 |
+
|
| 388 |
+
<footer>
|
| 389 |
+
<div class="footer-inner">
|
| 390 |
+
<div class="footer-title">Meaning,<br>packed.</div>
|
| 391 |
+
<div class="footer-meta">UNIVERSAL LABELER / RELEASE 1.0.1<br>5 HUMAN LANGUAGES · 22 WORLD DIMENSIONS<br><a href="https://huggingface.co/datasets/itspublu/UniversalLabeler">VIEW DATA + SCHEMAS ↗</a></div>
|
| 392 |
+
</div>
|
| 393 |
+
</footer>
|
| 394 |
+
|
| 395 |
+
<script>
|
| 396 |
+
const scenes = [
|
| 397 |
+
{
|
| 398 |
+
name: "fold_towel", source: "Fold the towel on the table with both hands.", hot: "towel",
|
| 399 |
+
environment: "indoor · laundry area", duration: "7.00 s · episode_clock", claims: 10,
|
| 400 |
+
values: { action: "fold", agent: "human performer", roles: "left stabilizes · right acts", object: "towel_01 · patient", place: "table · laundry area", before: "unfolded · dry", after: "folded · dry", time: "1.00—8.00 s", outcome: "success", evidence: "RGB · hand pose · narration" },
|
| 401 |
+
text: { en: "Fold the towel on the table with both hands.", zh: "用双手在桌上把毛巾叠好。", tl: "Tiklupin ang tuwalya sa mesa gamit ang dalawang kamay.", es: "Dobla la toalla sobre la mesa con ambas manos.", hi: "दोनों हाथों से मेज़ पर तौलिया मोड़ें।" }
|
| 402 |
+
},
|
| 403 |
+
{
|
| 404 |
+
name: "open_jar", source: "Hold the jar with the left hand and unscrew the lid with the right.", hot: "unscrew",
|
| 405 |
+
environment: "indoor · kitchen counter", duration: "4.20 s · episode_clock", claims: 11,
|
| 406 |
+
values: { action: "unscrew", agent: "human performer", roles: "left stabilizes · right rotates", object: "lid_01 · patient", place: "jar · kitchen counter", before: "jar sealed", after: "jar open", time: "12.30—16.50 s", outcome: "success", evidence: "RGB · hand pose · object track" },
|
| 407 |
+
text: { en: "Hold the jar with the left hand and unscrew the lid with the right.", zh: "左手扶稳罐子，右手拧开盖子。", tl: "Hawakan ang garapon sa kaliwang kamay at pihitin ang takip gamit ang kanan.", es: "Sujeta el frasco con la izquierda y desenrosca la tapa con la derecha.", hi: "बाएँ हाथ से जार को थामें और दाएँ हाथ से ढक्कन खोलें।" }
|
| 408 |
+
},
|
| 409 |
+
{
|
| 410 |
+
name: "place_mug", source: "Place the blue mug upright on the upper shelf using the right hand.", hot: "upper shelf",
|
| 411 |
+
environment: "indoor · storage cabinet", duration: "2.80 s · episode_clock", claims: 10,
|
| 412 |
+
values: { action: "place", agent: "human performer", roles: "right acts · left idle", object: "blue_mug_01 · patient", place: "upper_shelf · destination", before: "held · tilted", after: "supported · upright", time: "21.10—23.90 s", outcome: "stable placement", evidence: "RGB · depth · object pose" },
|
| 413 |
+
text: { en: "Place the blue mug upright on the upper shelf using the right hand.", zh: "用右手把蓝色杯子直立放到上层架子上。", tl: "Ilagay nang patayo ang asul na tasa sa itaas na estante gamit ang kanang kamay.", es: "Coloca la taza azul en posición vertical sobre el estante superior con la mano derecha.", hi: "दाएँ हाथ से नीले मग को ऊपरी शेल्फ़ पर सीधा रखें।" }
|
| 414 |
+
},
|
| 415 |
+
{
|
| 416 |
+
name: "slice_tomato", source: "Stabilize the tomato with the left hand and slice it with the knife.", hot: "knife",
|
| 417 |
+
environment: "indoor · food prep station", duration: "5.60 s · episode_clock", claims: 12,
|
| 418 |
+
values: { action: "slice", agent: "human performer", roles: "left stabilizes · right cuts", object: "tomato_01 · patient", place: "cutting_board · support", before: "whole tomato", after: "separated slices", time: "31.00—36.60 s", outcome: "cut completed", evidence: "RGB · contact · temporal span" },
|
| 419 |
+
text: { en: "Stabilize the tomato with the left hand and slice it with the knife.", zh: "左手扶稳番茄，用刀将它切片。", tl: "Hawakan nang matatag ang kamatis sa kaliwang kamay at hiwain ito gamit ang kutsilyo.", es: "Sujeta el tomate con la mano izquierda y córtalo en rodajas con el cuchillo.", hi: "बाएँ हाथ से टमाटर को स्थिर रखें और चाकू से उसके टुकड़े काटें।" }
|
| 420 |
+
}
|
| 421 |
+
];
|
| 422 |
+
|
| 423 |
+
const languageNames = { en: "English", zh: "简体中文", tl: "Tagalog", es: "Español", hi: "हिन्दी" };
|
| 424 |
+
const output = document.querySelector("#outputs");
|
| 425 |
+
const table = document.querySelector("#packet-table");
|
| 426 |
+
const core = document.querySelector("#core");
|
| 427 |
+
const machine = document.querySelector("#machine");
|
| 428 |
+
let sceneIndex = 0;
|
| 429 |
+
let activeLanguage = "tl";
|
| 430 |
+
let playing = true;
|
| 431 |
+
let timer;
|
| 432 |
+
|
| 433 |
+
function renderOutputs(scene) {
|
| 434 |
+
output.innerHTML = Object.entries(scene.text).map(([code, value]) => `
|
| 435 |
+
<button class="output ${code === activeLanguage ? "active" : ""}" data-language="${code}" aria-label="Highlight ${languageNames[code]}">
|
| 436 |
+
<span class="output-code">${code}</span><span class="output-text" lang="${code}">${value}</span><span class="output-check">✓</span>
|
| 437 |
+
</button>`).join("");
|
| 438 |
+
output.querySelectorAll(".output").forEach(button => button.addEventListener("click", () => {
|
| 439 |
+
activeLanguage = button.dataset.language;
|
| 440 |
+
renderOutputs(scenes[sceneIndex]);
|
| 441 |
+
launchParticles();
|
| 442 |
+
}));
|
| 443 |
+
}
|
| 444 |
+
|
| 445 |
+
function renderTable(scene) {
|
| 446 |
+
const rows = [
|
| 447 |
+
["action", scene.values.action], ["agent", scene.values.agent], ["effector roles", scene.values.roles],
|
| 448 |
+
["primary object", scene.values.object], ["environment", scene.values.place], ["state before", scene.values.before],
|
| 449 |
+
["state after", scene.values.after], ["temporal scope", scene.values.time], ["outcome", scene.values.outcome], ["evidence", scene.values.evidence]
|
| 450 |
+
];
|
| 451 |
+
table.innerHTML = rows.map((row, i) => `<div class="packet-row"><span class="idx">${String(i+1).padStart(2,"0")}</span><span class="field">${row[0]}</span><span class="value">${row[1]}</span><span class="state">preserved</span></div>`).join("");
|
| 452 |
+
}
|
| 453 |
+
|
| 454 |
+
function launchParticles() {
|
| 455 |
+
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
| 456 |
+
const source = document.querySelector("#source-text");
|
| 457 |
+
const target = output.querySelector(".output.active .output-text") || output.querySelector(".output-text");
|
| 458 |
+
if (!source || !target || window.innerWidth < 720) return;
|
| 459 |
+
const a = source.getBoundingClientRect(), c = core.getBoundingClientRect(), b = target.getBoundingClientRect();
|
| 460 |
+
const labels = ["ACTION", "ROLE", "OBJECT", "STATE", "TIME", "EVIDENCE"];
|
| 461 |
+
labels.forEach((label, i) => {
|
| 462 |
+
const p = document.createElement("span");
|
| 463 |
+
p.className = "particle"; p.textContent = label;
|
| 464 |
+
p.style.left = `${a.right - 30}px`; p.style.top = `${a.top + 22 + (i%3)*24}px`; p.style.opacity = "1";
|
| 465 |
+
document.body.appendChild(p);
|
| 466 |
+
requestAnimationFrame(() => {
|
| 467 |
+
p.style.transform = `translate(${c.left + c.width/2 - a.right - 8}px, ${c.top + c.height/2 - a.top - 28 - (i%3)*24}px) scale(.55)`;
|
| 468 |
+
});
|
| 469 |
+
setTimeout(() => {
|
| 470 |
+
p.style.transition = "transform .68s cubic-bezier(.7,0,.25,1), opacity .2s .5s";
|
| 471 |
+
p.style.transform = `translate(${b.left - a.right + 5}px, ${b.top - a.top - (i%3)*24}px) scale(.35)`;
|
| 472 |
+
p.style.opacity = "0";
|
| 473 |
+
}, 760 + i*35);
|
| 474 |
+
setTimeout(() => p.remove(), 1550 + i*35);
|
| 475 |
+
});
|
| 476 |
+
const nodes = [...document.querySelectorAll(".claim-node")];
|
| 477 |
+
nodes.forEach((node, i) => setTimeout(() => { node.classList.add("active"); setTimeout(() => node.classList.remove("active"), 300); }, i*80));
|
| 478 |
+
}
|
| 479 |
+
|
| 480 |
+
function setScene(index, animate = true) {
|
| 481 |
+
sceneIndex = index;
|
| 482 |
+
const scene = scenes[index];
|
| 483 |
+
document.querySelectorAll(".scenario").forEach((b, i) => b.classList.toggle("active", i === index));
|
| 484 |
+
const source = scene.source.replace(scene.hot, `<span class="hot">${scene.hot}</span>`);
|
| 485 |
+
document.querySelector("#source-text").innerHTML = source;
|
| 486 |
+
document.querySelector("#environment").textContent = scene.environment;
|
| 487 |
+
document.querySelector("#time-scope").textContent = scene.duration;
|
| 488 |
+
document.querySelector("#framecode").textContent = `EVENT / ${scene.name.toUpperCase()}`;
|
| 489 |
+
document.querySelector("#claim-count").textContent = scene.claims;
|
| 490 |
+
document.querySelector(".core-count").textContent = `${scene.claims} / ${scene.claims} claims`;
|
| 491 |
+
document.querySelector("#represented").textContent = `${scene.claims} / ${scene.claims}`;
|
| 492 |
+
document.querySelector("#scope-line").style.setProperty("--progress", "0%");
|
| 493 |
+
requestAnimationFrame(() => document.querySelector("#scope-line").style.setProperty("--progress", "100%"));
|
| 494 |
+
renderOutputs(scene); renderTable(scene);
|
| 495 |
+
if (animate) setTimeout(launchParticles, 120);
|
| 496 |
+
}
|
| 497 |
+
|
| 498 |
+
function schedule() {
|
| 499 |
+
clearInterval(timer);
|
| 500 |
+
if (playing) timer = setInterval(() => setScene((sceneIndex + 1) % scenes.length), 6200);
|
| 501 |
+
}
|
| 502 |
+
|
| 503 |
+
document.querySelectorAll(".scenario").forEach(button => button.addEventListener("click", () => {
|
| 504 |
+
setScene(Number(button.dataset.scene)); schedule();
|
| 505 |
+
}));
|
| 506 |
+
document.querySelector("#pause").addEventListener("click", (event) => {
|
| 507 |
+
playing = !playing; event.currentTarget.textContent = playing ? "Ⅱ" : "▶";
|
| 508 |
+
event.currentTarget.setAttribute("aria-label", playing ? "Pause automatic examples" : "Play automatic examples"); schedule();
|
| 509 |
+
});
|
| 510 |
+
|
| 511 |
+
setScene(0, false); schedule();
|
| 512 |
+
window.addEventListener("load", () => setTimeout(launchParticles, 900), { once: true });
|
| 513 |
+
</script>
|
| 514 |
+
</body>
|
| 515 |
</html>
|