sealks
85 lines
2.7 KiB
HTML
85 lines
2.7 KiB
HTML
<!doctype html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>LED Output</title>
|
|
<link rel="stylesheet" href="/static/output/styles.css" />
|
|
</head>
|
|
<body>
|
|
<main id="outputApp" class="viewport" v-cloak>
|
|
<section
|
|
ref="wall"
|
|
id="wall"
|
|
class="wall"
|
|
:class="[`theme-${activeView}`, `motion-${motionMode}`, `focus-${focusTarget}`, { pulse: pulseActive }]"
|
|
>
|
|
<canvas ref="motionCanvas" id="motionCanvas" class="motion-canvas"></canvas>
|
|
<div class="grid-layer"></div>
|
|
<div class="scan-layer"></div>
|
|
|
|
<header class="screen-header">
|
|
<div>
|
|
<p class="eyebrow">Synchronized LED Wall Platform</p>
|
|
<h1>{{ sceneTitle }}</h1>
|
|
</div>
|
|
<div class="header-metrics">
|
|
<strong>{{ clockText }}</strong>
|
|
<span>v{{ state?.version || 0 }}</span>
|
|
<em>{{ tile?.id || "--" }} / {{ isPreview ? "PREVIEW" : "OUTPUT" }}</em>
|
|
</div>
|
|
</header>
|
|
|
|
<section
|
|
v-for="scene in sceneDefinitions"
|
|
:key="scene.id"
|
|
class="scene"
|
|
:class="{ active: activeView === scene.id }"
|
|
:data-view="scene.id"
|
|
>
|
|
<div class="hero-copy">
|
|
<span>{{ scene.kicker }}</span>
|
|
<h2>{{ scene.headline }}</h2>
|
|
<p>{{ scene.copy }}</p>
|
|
</div>
|
|
|
|
<div class="metric-grid">
|
|
<article v-for="metric in scene.metrics" :key="metric.label" class="metric-card">
|
|
<span>{{ metric.label }}</span>
|
|
<strong>{{ metric.value }}</strong>
|
|
<small>{{ metric.trend }}</small>
|
|
</article>
|
|
</div>
|
|
|
|
<div class="visual-stage">
|
|
<div class="route-field">
|
|
<i v-for="line in scene.lines" :key="line" :class="['route-line', line]"></i>
|
|
</div>
|
|
<div
|
|
v-for="node in scene.nodes"
|
|
:key="node.id"
|
|
class="stage-node"
|
|
:class="node.tone"
|
|
:style="{ left: node.x + 'px', top: node.y + 'px' }"
|
|
>
|
|
<span>{{ node.label }}</span>
|
|
<strong>{{ node.value }}</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="event-rail">
|
|
<article v-for="event in scene.events" :key="event.title" class="event-card">
|
|
<span>{{ event.time }}</span>
|
|
<strong>{{ event.title }}</strong>
|
|
<small>{{ event.detail }}</small>
|
|
</article>
|
|
</aside>
|
|
</section>
|
|
</section>
|
|
<aside ref="hud" id="hud" class="hud">{{ hudText }}</aside>
|
|
</main>
|
|
<script src="/static/vendor/vue.global.prod.js"></script>
|
|
<script src="/static/output/main.js"></script>
|
|
</body>
|
|
</html>
|