Implement synchronized LED wall output
This commit is contained in:
@@ -1,8 +1,8 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: Inter, "Segoe UI", system-ui, sans-serif;
|
||||
background: #000;
|
||||
color: #f8fafc;
|
||||
font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
|
||||
background: #030712;
|
||||
color: #f8fbff;
|
||||
--wall-width: 14880px;
|
||||
--wall-height: 3510px;
|
||||
--scale: 1;
|
||||
@@ -23,10 +23,14 @@ body,
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #030712;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: #020407;
|
||||
background: #030712;
|
||||
}
|
||||
|
||||
.wall {
|
||||
@@ -39,33 +43,34 @@ body,
|
||||
transform-origin: 0 0;
|
||||
transform: translate(var(--offset-x), var(--offset-y)) scale(var(--scale));
|
||||
background:
|
||||
linear-gradient(90deg, rgba(20, 184, 166, 0.14), transparent 34%, rgba(249, 115, 22, 0.12)),
|
||||
#071018;
|
||||
radial-gradient(circle at 50% 40%, rgba(20, 184, 166, 0.28), transparent 36%),
|
||||
radial-gradient(circle at 82% 22%, rgba(249, 115, 22, 0.18), transparent 24%),
|
||||
linear-gradient(135deg, #061528 0%, #0b1220 48%, #071018 100%);
|
||||
}
|
||||
|
||||
.motionCanvas,
|
||||
.gridLayer {
|
||||
.motion-canvas,
|
||||
.grid-layer {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.gridLayer {
|
||||
.grid-layer {
|
||||
background-image:
|
||||
linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
|
||||
linear-gradient(rgba(255,255,255,0.045) 2px, transparent 2px),
|
||||
linear-gradient(90deg, rgba(255,255,255,0.045) 2px, transparent 2px);
|
||||
background-size: 240px 240px;
|
||||
opacity: 0.72;
|
||||
opacity: 0.74;
|
||||
}
|
||||
|
||||
.wallHeader {
|
||||
.screen-header {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
z-index: 4;
|
||||
left: 360px;
|
||||
right: 360px;
|
||||
top: 180px;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 120px;
|
||||
}
|
||||
|
||||
@@ -77,41 +82,45 @@ p {
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin-bottom: 36px;
|
||||
margin-bottom: 38px;
|
||||
color: #5eead4;
|
||||
font-size: 58px;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 178px;
|
||||
line-height: 1;
|
||||
font-weight: 820;
|
||||
color: #ffffff;
|
||||
text-shadow: 0 0 36px rgba(20, 184, 166, 0.46);
|
||||
}
|
||||
|
||||
.metrics {
|
||||
.header-metrics {
|
||||
display: grid;
|
||||
justify-items: end;
|
||||
gap: 24px;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.metrics strong {
|
||||
font-size: 108px;
|
||||
.header-metrics strong {
|
||||
font-size: 112px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.metrics span {
|
||||
.header-metrics span {
|
||||
color: #cbd5e1;
|
||||
font-size: 48px;
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
.scene {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
inset: 620px 360px 240px;
|
||||
z-index: 3;
|
||||
inset: 620px 360px 250px;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 360ms ease, transform 360ms ease;
|
||||
transform: translateY(54px);
|
||||
transition: opacity 260ms linear, transform 260ms linear;
|
||||
}
|
||||
|
||||
.scene.active {
|
||||
@@ -120,58 +129,61 @@ h1 {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.headline {
|
||||
max-width: 5900px;
|
||||
.hero-copy {
|
||||
max-width: 6200px;
|
||||
}
|
||||
|
||||
.headline h2 {
|
||||
font-size: 156px;
|
||||
.hero-copy h2 {
|
||||
font-size: 158px;
|
||||
line-height: 1.05;
|
||||
font-weight: 820;
|
||||
}
|
||||
|
||||
.headline p {
|
||||
margin-top: 42px;
|
||||
color: #cbd5e1;
|
||||
font-size: 62px;
|
||||
line-height: 1.35;
|
||||
.hero-copy p {
|
||||
margin-top: 44px;
|
||||
color: #dbeafe;
|
||||
font-size: 66px;
|
||||
line-height: 1.34;
|
||||
}
|
||||
|
||||
.kpiGrid {
|
||||
margin-top: 140px;
|
||||
.card-grid {
|
||||
margin-top: 150px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 72px;
|
||||
}
|
||||
|
||||
.kpi,
|
||||
.sideStats article,
|
||||
.camera {
|
||||
border: 3px solid rgba(255,255,255,0.12);
|
||||
.metric-card,
|
||||
.side-stats article,
|
||||
.camera-card {
|
||||
border: 4px solid rgba(94, 234, 212, 0.32);
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.055);
|
||||
background: rgba(15, 23, 42, 0.76);
|
||||
box-shadow: inset 0 0 60px rgba(20, 184, 166, 0.10), 0 0 42px rgba(20, 184, 166, 0.12);
|
||||
}
|
||||
|
||||
.kpi {
|
||||
min-height: 500px;
|
||||
padding: 70px;
|
||||
.metric-card {
|
||||
min-height: 520px;
|
||||
padding: 74px;
|
||||
}
|
||||
|
||||
.kpi span,
|
||||
.sideStats span {
|
||||
.metric-card span,
|
||||
.side-stats span {
|
||||
display: block;
|
||||
color: #aeb7c2;
|
||||
color: #a7f3d0;
|
||||
font-size: 58px;
|
||||
}
|
||||
|
||||
.kpi strong,
|
||||
.sideStats strong {
|
||||
.metric-card strong,
|
||||
.side-stats strong {
|
||||
display: block;
|
||||
margin-top: 46px;
|
||||
font-size: 130px;
|
||||
margin-top: 48px;
|
||||
color: #ffffff;
|
||||
font-size: 136px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.bars {
|
||||
.timeline-bars {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -179,65 +191,65 @@ h1 {
|
||||
height: 960px;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(32, 1fr);
|
||||
gap: 24px;
|
||||
align-items: end;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.bar {
|
||||
min-height: 100px;
|
||||
.timeline-bars i {
|
||||
min-height: 120px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
background: linear-gradient(180deg, #14b8a6, #f97316);
|
||||
transform-origin: bottom;
|
||||
}
|
||||
|
||||
.energyMap {
|
||||
.flow-map {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 780px;
|
||||
top: 790px;
|
||||
width: 8600px;
|
||||
height: 1760px;
|
||||
}
|
||||
|
||||
.flowLine {
|
||||
.flow-line {
|
||||
position: absolute;
|
||||
height: 28px;
|
||||
height: 30px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(90deg, #14b8a6, #facc15, #f97316);
|
||||
box-shadow: 0 0 80px rgba(20,184,166,0.42);
|
||||
box-shadow: 0 0 90px rgba(20, 184, 166, 0.46);
|
||||
}
|
||||
|
||||
.lineA {
|
||||
.line-a {
|
||||
left: 1100px;
|
||||
top: 690px;
|
||||
width: 5200px;
|
||||
transform: rotate(7deg);
|
||||
}
|
||||
|
||||
.lineB {
|
||||
.line-b {
|
||||
left: 2300px;
|
||||
top: 1050px;
|
||||
width: 4200px;
|
||||
transform: rotate(-10deg);
|
||||
}
|
||||
|
||||
.flowNode {
|
||||
.flow-node {
|
||||
position: absolute;
|
||||
width: 980px;
|
||||
height: 420px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 5px solid rgba(94,234,212,0.55);
|
||||
border: 5px solid rgba(94, 234, 212, 0.62);
|
||||
border-radius: 8px;
|
||||
background: rgba(8,20,28,0.92);
|
||||
font-size: 76px;
|
||||
font-weight: 760;
|
||||
background: rgba(8, 20, 28, 0.92);
|
||||
font-size: 80px;
|
||||
font-weight: 780;
|
||||
}
|
||||
|
||||
.nodeA { left: 220px; top: 520px; }
|
||||
.nodeB { left: 3600px; top: 220px; }
|
||||
.nodeC { left: 7020px; top: 900px; }
|
||||
.node-a { left: 220px; top: 520px; }
|
||||
.node-b { left: 3600px; top: 220px; }
|
||||
.node-c { left: 7020px; top: 900px; }
|
||||
|
||||
.sideStats {
|
||||
.side-stats {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 690px;
|
||||
@@ -247,12 +259,12 @@ h1 {
|
||||
gap: 64px;
|
||||
}
|
||||
|
||||
.sideStats article {
|
||||
min-height: 610px;
|
||||
.side-stats article {
|
||||
min-height: 620px;
|
||||
padding: 78px;
|
||||
}
|
||||
|
||||
.cameraGrid {
|
||||
.camera-grid {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 760px;
|
||||
@@ -262,26 +274,26 @@ h1 {
|
||||
gap: 52px;
|
||||
}
|
||||
|
||||
.camera {
|
||||
.camera-card {
|
||||
height: 700px;
|
||||
padding: 52px;
|
||||
padding: 58px;
|
||||
display: grid;
|
||||
align-content: space-between;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(20,184,166,0.22), rgba(249,115,22,0.14)),
|
||||
rgba(255,255,255,0.055);
|
||||
rgba(15,23,42,0.78);
|
||||
}
|
||||
|
||||
.camera strong {
|
||||
font-size: 72px;
|
||||
.camera-card strong {
|
||||
font-size: 78px;
|
||||
}
|
||||
|
||||
.camera span {
|
||||
color: #cbd5e1;
|
||||
font-size: 48px;
|
||||
.camera-card span {
|
||||
color: #dbeafe;
|
||||
font-size: 52px;
|
||||
}
|
||||
|
||||
.alertRail {
|
||||
.alert-rail {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 740px;
|
||||
@@ -290,21 +302,12 @@ h1 {
|
||||
gap: 44px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 54px 64px;
|
||||
border-left: 18px solid #f97316;
|
||||
.alert-card {
|
||||
padding: 58px 68px;
|
||||
border-left: 20px solid #f97316;
|
||||
border-radius: 8px;
|
||||
background: rgba(255,255,255,0.065);
|
||||
font-size: 60px;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: flash 650ms ease;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { outline: 16px solid rgba(250,204,21,0.78); }
|
||||
100% { outline: 0 solid rgba(250,204,21,0); }
|
||||
background: rgba(15, 23, 42, 0.78);
|
||||
font-size: 64px;
|
||||
}
|
||||
|
||||
.hud {
|
||||
@@ -312,11 +315,24 @@ h1 {
|
||||
right: 12px;
|
||||
bottom: 12px;
|
||||
z-index: 10;
|
||||
max-width: min(860px, calc(100vw - 24px));
|
||||
padding: 8px 10px;
|
||||
max-width: min(980px, calc(100vw - 24px));
|
||||
padding: 9px 11px;
|
||||
border-radius: 6px;
|
||||
background: rgba(0,0,0,0.68);
|
||||
color: rgba(255,255,255,0.78);
|
||||
background: rgba(0,0,0,0.72);
|
||||
color: rgba(255,255,255,0.82);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.preview-note {
|
||||
color: #facc15;
|
||||
}
|
||||
|
||||
.pulse {
|
||||
animation: flash 520ms ease;
|
||||
}
|
||||
|
||||
@keyframes flash {
|
||||
0% { outline: 18px solid rgba(94, 234, 212, 0.55); }
|
||||
100% { outline: 0 solid rgba(94, 234, 212, 0); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user