370 lines
9.0 KiB
HTML
370 lines
9.0 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh-CN">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<title>Jarvis Star Office Stage</title>
|
||
|
|
<style>
|
||
|
|
@font-face {
|
||
|
|
font-family: 'ArkPixel';
|
||
|
|
src: url('./fonts/ark-pixel-12px-proportional-zh_cn.ttf.woff2') format('woff2');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: 'ArkPixelLatin';
|
||
|
|
src: url('./fonts/ark-pixel-12px-proportional-latin.ttf.woff2') format('woff2');
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root {
|
||
|
|
color-scheme: dark;
|
||
|
|
--bg: #050810;
|
||
|
|
--panel: rgba(8, 16, 29, 0.86);
|
||
|
|
--panel-border: rgba(97, 211, 255, 0.18);
|
||
|
|
--text: #e9fbff;
|
||
|
|
--muted: #86cbe2;
|
||
|
|
--accent: #6fe0ff;
|
||
|
|
--warn: #ffd36b;
|
||
|
|
}
|
||
|
|
|
||
|
|
* {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html, body {
|
||
|
|
width: 100%;
|
||
|
|
min-height: 100%;
|
||
|
|
background:
|
||
|
|
radial-gradient(circle at top left, rgba(64, 176, 255, 0.12), transparent 28%),
|
||
|
|
radial-gradient(circle at top right, rgba(255, 196, 94, 0.08), transparent 20%),
|
||
|
|
linear-gradient(180deg, #07111d 0%, #03070e 100%);
|
||
|
|
color: var(--text);
|
||
|
|
font-family: 'ArkPixel', 'ArkPixelLatin', 'Courier New', monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 14px;
|
||
|
|
padding: 14px;
|
||
|
|
overflow-y: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 12px;
|
||
|
|
padding: 12px 14px;
|
||
|
|
border: 1px solid var(--panel-border);
|
||
|
|
background: var(--panel);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-copy {
|
||
|
|
display: grid;
|
||
|
|
gap: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-kicker,
|
||
|
|
.meta-chip,
|
||
|
|
.panel-kicker,
|
||
|
|
.license-note {
|
||
|
|
font-size: 11px;
|
||
|
|
letter-spacing: 0.14em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
color: var(--muted);
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-title {
|
||
|
|
font-size: 24px;
|
||
|
|
color: var(--text);
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-subtitle {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.5;
|
||
|
|
color: rgba(233, 251, 255, 0.74);
|
||
|
|
max-width: 760px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-meta {
|
||
|
|
display: flex;
|
||
|
|
gap: 8px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
justify-content: flex-end;
|
||
|
|
}
|
||
|
|
|
||
|
|
.meta-chip {
|
||
|
|
padding: 8px 10px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.18);
|
||
|
|
background: rgba(7, 18, 30, 0.92);
|
||
|
|
color: var(--text);
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.stage {
|
||
|
|
display: grid;
|
||
|
|
gap: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.game-shell {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
aspect-ratio: 16 / 9;
|
||
|
|
border: 1px solid rgba(107, 214, 255, 0.16);
|
||
|
|
background: rgba(6, 13, 22, 0.88);
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
#game-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
#game-container canvas {
|
||
|
|
width: 100% !important;
|
||
|
|
height: 100% !important;
|
||
|
|
image-rendering: pixelated;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.overlay-status {
|
||
|
|
position: absolute;
|
||
|
|
left: 14px;
|
||
|
|
bottom: 14px;
|
||
|
|
max-width: calc(100% - 28px);
|
||
|
|
padding: 10px 12px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.16);
|
||
|
|
background: rgba(2, 8, 16, 0.82);
|
||
|
|
color: var(--text);
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.45;
|
||
|
|
z-index: 5;
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
#coords-overlay,
|
||
|
|
#coords-toggle {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panels {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: minmax(0, 1fr) 330px;
|
||
|
|
gap: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel {
|
||
|
|
border: 1px solid var(--panel-border);
|
||
|
|
background: var(--panel);
|
||
|
|
backdrop-filter: blur(12px);
|
||
|
|
padding: 12px 14px;
|
||
|
|
min-height: 168px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-head {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 8px;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-title {
|
||
|
|
font-size: 16px;
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
color: var(--text);
|
||
|
|
}
|
||
|
|
|
||
|
|
.memo-card {
|
||
|
|
height: calc(100% - 30px);
|
||
|
|
display: grid;
|
||
|
|
grid-template-rows: auto 1fr;
|
||
|
|
gap: 8px;
|
||
|
|
padding: 12px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.12);
|
||
|
|
background:
|
||
|
|
linear-gradient(rgba(255,255,255,0.03), rgba(255,255,255,0.03)),
|
||
|
|
url('./assets/memo-bg.webp') center/cover no-repeat;
|
||
|
|
color: #09131d;
|
||
|
|
}
|
||
|
|
|
||
|
|
#memo-date {
|
||
|
|
font-size: 11px;
|
||
|
|
color: #2c4456;
|
||
|
|
letter-spacing: 0.1em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
#memo-content {
|
||
|
|
white-space: pre-wrap;
|
||
|
|
font-size: 13px;
|
||
|
|
line-height: 1.55;
|
||
|
|
color: #081019;
|
||
|
|
overflow: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-list {
|
||
|
|
display: grid;
|
||
|
|
gap: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-item {
|
||
|
|
display: grid;
|
||
|
|
gap: 4px;
|
||
|
|
padding: 10px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.1);
|
||
|
|
background: rgba(7, 18, 30, 0.74);
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-name {
|
||
|
|
font-size: 12px;
|
||
|
|
color: var(--text);
|
||
|
|
letter-spacing: 0.08em;
|
||
|
|
text-transform: uppercase;
|
||
|
|
}
|
||
|
|
|
||
|
|
.legend-detail {
|
||
|
|
font-size: 12px;
|
||
|
|
line-height: 1.45;
|
||
|
|
color: rgba(233, 251, 255, 0.72);
|
||
|
|
}
|
||
|
|
|
||
|
|
.license-note {
|
||
|
|
color: rgba(255, 211, 107, 0.86);
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-overlay {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
z-index: 9;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
background: rgba(3, 8, 14, 0.94);
|
||
|
|
}
|
||
|
|
|
||
|
|
.loading-box {
|
||
|
|
width: min(420px, calc(100% - 40px));
|
||
|
|
display: grid;
|
||
|
|
gap: 12px;
|
||
|
|
padding: 18px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.16);
|
||
|
|
background: rgba(7, 18, 30, 0.94);
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-text {
|
||
|
|
font-size: 14px;
|
||
|
|
color: var(--text);
|
||
|
|
line-height: 1.45;
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-progress-container {
|
||
|
|
width: 100%;
|
||
|
|
height: 12px;
|
||
|
|
border: 1px solid rgba(111, 224, 255, 0.16);
|
||
|
|
background: rgba(2, 8, 16, 0.82);
|
||
|
|
}
|
||
|
|
|
||
|
|
#loading-progress-bar {
|
||
|
|
width: 0%;
|
||
|
|
height: 100%;
|
||
|
|
background: linear-gradient(90deg, #4ad4ff, #ffd36b);
|
||
|
|
transition: width .2s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 900px) {
|
||
|
|
.hud {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
display: grid;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hud-meta {
|
||
|
|
justify-content: flex-start;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panels {
|
||
|
|
grid-template-columns: 1fr;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header class="hud">
|
||
|
|
<div class="hud-copy">
|
||
|
|
<div class="hud-kicker">Jarvis War Room / Star Office Stage</div>
|
||
|
|
<div class="hud-title">STAR OFFICE</div>
|
||
|
|
<div class="hud-subtitle">
|
||
|
|
Pixel office stage adapted from the upstream Star Office UI project and wired into Jarvis office state endpoints.
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="hud-meta">
|
||
|
|
<div class="meta-chip">READ ONLY STAGE</div>
|
||
|
|
<div class="meta-chip" id="live-state-chip">STATE / IDLE</div>
|
||
|
|
<div class="meta-chip">API / <span id="agents-count">1</span> AGENTS</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<main class="stage">
|
||
|
|
<section class="game-shell">
|
||
|
|
<div id="game-container"></div>
|
||
|
|
<div id="loading-overlay">
|
||
|
|
<div class="loading-box">
|
||
|
|
<div id="loading-text">Loading Jarvis Star Office...</div>
|
||
|
|
<div id="loading-progress-container">
|
||
|
|
<div id="loading-progress-bar"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="overlay-status" id="status-text">[IDLE] Awaiting commands...</div>
|
||
|
|
<div id="coords-overlay"></div>
|
||
|
|
<button id="coords-toggle" type="button">coords</button>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section class="panels">
|
||
|
|
<article class="panel">
|
||
|
|
<div class="panel-head">
|
||
|
|
<div class="panel-title">YESTERDAY MEMO</div>
|
||
|
|
<div class="panel-kicker" id="memo-date">memo</div>
|
||
|
|
</div>
|
||
|
|
<div class="memo-card">
|
||
|
|
<div class="panel-kicker">OPERATIONS NOTEBOOK</div>
|
||
|
|
<div id="memo-content">Loading memo...</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
|
||
|
|
<article class="panel">
|
||
|
|
<div class="panel-head">
|
||
|
|
<div class="panel-title">INTEGRATION NOTE</div>
|
||
|
|
<div class="panel-kicker">WAR ROOM</div>
|
||
|
|
</div>
|
||
|
|
<div class="legend-list">
|
||
|
|
<div class="legend-item">
|
||
|
|
<div class="legend-name">State Mapping</div>
|
||
|
|
<div class="legend-detail">Idle stays in lounge. Writing, researching and executing move to the desk. Syncing lights the server room. Error wakes the bug bay.</div>
|
||
|
|
</div>
|
||
|
|
<div class="legend-item">
|
||
|
|
<div class="legend-name">Agent Layer</div>
|
||
|
|
<div class="legend-detail">The main agent uses Jarvis office state. Visitor sprites fall back to local demo agents when no extra office agents are available.</div>
|
||
|
|
</div>
|
||
|
|
<div class="legend-item">
|
||
|
|
<div class="legend-name">License Note</div>
|
||
|
|
<div class="legend-detail license-note">Upstream code is MIT. Upstream art assets are marked non-commercial by the project README. Keep that constraint in mind before external distribution.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</article>
|
||
|
|
</section>
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<script src="./vendor/phaser-3.80.1.min.js"></script>
|
||
|
|
<script src="./office-runtime.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|