150 lines
7.9 KiB
HTML
150 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>AIGen — Display mock (Classic | Studio)</title>
|
|
<link rel="stylesheet" href="./tokens/display.css" />
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font-family: ui-sans-serif, system-ui, Inter, sans-serif; background: #0e0e10; color: #f3f1ea; }
|
|
.app { min-height: 100vh; display: flex; flex-direction: column; gap: var(--chrome-gap); padding: var(--chrome-gap); }
|
|
header.top {
|
|
height: var(--header-h); display: flex; align-items: center; gap: 12px;
|
|
border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; background: var(--bg-raise);
|
|
}
|
|
.brand { font-weight: 650; letter-spacing: .02em; }
|
|
.grow { flex: 1; }
|
|
.pill { font-size: var(--type-sm); color: #b8e0a8; border: 1px solid #2d4a2a; background: #142016; border-radius: 999px; padding: 4px 10px; }
|
|
.nav { color: var(--muted); font-size: var(--type-sm); display: flex; gap: 14px; }
|
|
.nav b { color: var(--text); font-weight: 600; }
|
|
.identity-header, .classic-hide { display: flex; gap: 10px; align-items: center; font-size: var(--type-sm); color: var(--muted); }
|
|
.rail { display: flex; gap: 6px; flex-wrap: wrap; }
|
|
.seg {
|
|
height: var(--rail-h); padding: 0 12px; border-radius: var(--radius);
|
|
border: 1px solid var(--line); background: var(--bg-slot); color: var(--muted); cursor: pointer;
|
|
}
|
|
.seg[aria-pressed="true"] { background: #2a1f0c; border-color: var(--amber); color: var(--amber); }
|
|
.seg:disabled { opacity: .45; cursor: not-allowed; }
|
|
.classic-selects { display: flex; gap: 8px; }
|
|
.classic-selects select {
|
|
background: var(--bg-slot); color: var(--text); border: 1px solid var(--line);
|
|
border-radius: var(--radius); height: var(--rail-h); padding: 0 8px;
|
|
}
|
|
.grid { display: grid; grid-template-columns: 240px 1fr 260px; gap: var(--chrome-gap); flex: 1; }
|
|
.col { background: var(--bg-raise); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
|
|
.slot { background: var(--bg-slot); border: 1px dashed var(--line); border-radius: var(--radius); min-height: 72px; margin-bottom: 8px; padding: 8px; font-size: var(--type-sm); color: var(--muted); }
|
|
.slot strong { display: block; color: var(--text); margin-bottom: 4px; }
|
|
.viewer { position: relative; background: #111; border-radius: var(--radius); min-height: 320px; display: grid; place-items: center; color: var(--muted); border: 1px solid var(--line); }
|
|
.eye-viewer { position: absolute; top: 8px; right: 8px; background: #000a; border: 1px solid var(--line); border-radius: 6px; padding: 4px; }
|
|
.strip { display: flex; gap: 8px; margin-top: 10px; }
|
|
.tile { width: 72px; height: 48px; background: #222; border-radius: 6px; border: 1px solid var(--line); position: relative; }
|
|
.eye-tile { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; }
|
|
textarea, input {
|
|
width: 100%; background: var(--bg-slot); color: var(--text); border: 1px solid var(--line);
|
|
border-radius: var(--radius); padding: 8px; font: inherit;
|
|
}
|
|
.cta { width: 100%; height: 44px; border: 0; border-radius: var(--radius); background: var(--amber); color: #1a1204; font-weight: 700; cursor: pointer; margin-top: 10px; }
|
|
.hint { font-size: 11px; color: var(--muted); margin: 6px 0 10px; }
|
|
.settings {
|
|
position: fixed; right: 16px; bottom: 16px; width: 360px; background: var(--bg-raise);
|
|
border: 1px solid var(--line); border-radius: 10px; padding: 14px; box-shadow: 0 12px 40px #0008;
|
|
}
|
|
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
|
.card {
|
|
border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: var(--bg-slot); cursor: pointer; text-align: left; color: inherit;
|
|
}
|
|
.card[aria-pressed="true"] { border-color: var(--amber); background: #2a1f0c; }
|
|
.card small { display: block; color: var(--muted); margin-top: 4px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app" data-display="studio" id="root">
|
|
<header class="top">
|
|
<span class="brand">AIGen</span>
|
|
<span class="muted" style="color:var(--muted);font-size:12px">/ Inbox</span>
|
|
<div class="grow"></div>
|
|
<div class="identity-header">
|
|
<label><input type="checkbox" checked /> Lock face</label>
|
|
<label><input type="checkbox" checked /> Lock outfit</label>
|
|
</div>
|
|
<div class="classic-hide">
|
|
<label><input type="checkbox" /> Hide input</label>
|
|
<label><input type="checkbox" /> Hide output</label>
|
|
</div>
|
|
<nav class="nav"><span>Library</span><b>Queue</b><span>Settings</span></nav>
|
|
<span class="pill">5080 Ready</span>
|
|
</header>
|
|
|
|
<div class="rail rail-task" role="tablist">
|
|
<button class="seg" aria-pressed="false">Image</button>
|
|
<button class="seg" aria-pressed="false">Edit</button>
|
|
<button class="seg" aria-pressed="false">Refine</button>
|
|
<button class="seg" aria-pressed="true">Video</button>
|
|
<button class="seg" aria-pressed="false">Extend</button>
|
|
<button class="seg" aria-pressed="false">Music</button>
|
|
</div>
|
|
<div class="rail rail-model">
|
|
<button class="seg" aria-pressed="true">MiniMax H3</button>
|
|
<button class="seg" disabled title="xAIGen only">LTX</button>
|
|
</div>
|
|
<div class="classic-selects">
|
|
<select><option>Video</option><option>Image</option><option>Extend</option><option>Music</option></select>
|
|
<select><option>MiniMax H3</option><option disabled>LTX (xAIGen only)</option></select>
|
|
</div>
|
|
|
|
<div class="grid">
|
|
<aside class="col">
|
|
<div class="slot"><strong>Hero</strong>car_bee still</div>
|
|
<div class="slot"><strong>Start</strong>Select still or clip</div>
|
|
<div class="slot"><strong>End</strong>Optional</div>
|
|
<div class="identity-slots">
|
|
<label><input type="checkbox" checked /> Lock face</label><br />
|
|
<label><input type="checkbox" checked /> Lock outfit</label>
|
|
<p class="hint">hero encode + lock text — not a MiniMax face/clothes split on stills</p>
|
|
</div>
|
|
</aside>
|
|
<main class="col">
|
|
<div class="viewer">
|
|
<button class="eye-viewer" title="Toggle viewer">eye</button>
|
|
viewer · last frame / waveform
|
|
</div>
|
|
<div class="strip">
|
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
|
<div class="tile"><span class="eye-tile">👁</span></div>
|
|
</div>
|
|
</main>
|
|
<aside class="col">
|
|
<textarea rows="5">car_bee walks the Great Hall, cinematic</textarea>
|
|
<p class="hint">YuE2 target length is a plan hint, not a trim.</p>
|
|
<input value="seed unlocked" />
|
|
<button class="cta">Generate</button>
|
|
</aside>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="settings">
|
|
<strong>Settings → Display</strong>
|
|
<p class="hint">Layout only. Jobs, engines, and library IDs stay the same.</p>
|
|
<div class="cards">
|
|
<button class="card" id="btnClassic" aria-pressed="false">Classic<small>packed header, dropdowns</small></button>
|
|
<button class="card" id="btnStudio" aria-pressed="true">Studio<small>task rail, model rail, slots + eyes</small></button>
|
|
</div>
|
|
</aside>
|
|
<script>
|
|
const root = document.getElementById("root");
|
|
const classic = document.getElementById("btnClassic");
|
|
const studio = document.getElementById("btnStudio");
|
|
function setMode(mode) {
|
|
root.setAttribute("data-display", mode);
|
|
classic.setAttribute("aria-pressed", mode === "classic" ? "true" : "false");
|
|
studio.setAttribute("aria-pressed", mode === "studio" ? "true" : "false");
|
|
}
|
|
classic.onclick = () => setMode("classic");
|
|
studio.onclick = () => setMode("studio");
|
|
</script>
|
|
</body>
|
|
</html>
|