165 lines
7.2 KiB
HTML
165 lines
7.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Component Editor — sonic-diamond</title>
|
|
<style>
|
|
:root {
|
|
--bg: #f5f5f7;
|
|
--panel: #ffffff;
|
|
--line: #e5e5ea;
|
|
--text: #1c1c1e;
|
|
--muted: #8e8e93;
|
|
--accent: #0a84ff;
|
|
--invalid: #fafafa;
|
|
--checker: #c8c8c8;
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; font: 13px/1.4 -apple-system, system-ui, sans-serif;
|
|
background: var(--bg); color: var(--text); }
|
|
header { position: sticky; top: 0; z-index: 10;
|
|
background: var(--panel); border-bottom: 1px solid var(--line);
|
|
padding: 12px 20px; display: flex; align-items: center; gap: 16px; }
|
|
header h1 { margin: 0; font-size: 15px; font-weight: 600; }
|
|
header .meta { color: var(--muted); font-size: 12px; }
|
|
header button { font: inherit; padding: 6px 14px;
|
|
background: var(--accent); color: white;
|
|
border: none; border-radius: 6px; cursor: pointer; }
|
|
header button:hover { opacity: 0.9; }
|
|
header button.ghost { background: transparent; color: var(--text);
|
|
border: 1px solid var(--line); }
|
|
main { padding: 20px; }
|
|
|
|
/* ---- Matrix view ---- */
|
|
|
|
section { margin-bottom: 32px; }
|
|
section > h2 { margin: 0 0 12px; font-size: 13px; font-weight: 600;
|
|
color: var(--muted); text-transform: uppercase;
|
|
letter-spacing: 0.5px; }
|
|
.grid { display: grid; gap: 12px; background: var(--panel);
|
|
padding: 16px; border-radius: 10px; border: 1px solid var(--line); }
|
|
.cell { display: flex; flex-direction: column; align-items: center;
|
|
gap: 6px; padding: 12px; border: 1px solid var(--line);
|
|
border-radius: 8px; background: white; min-height: 110px;
|
|
justify-content: center; cursor: pointer; transition: transform 0.1s, border-color 0.1s; }
|
|
.cell:hover { border-color: var(--accent); transform: translateY(-1px); }
|
|
.cell .preview { position: relative; width: 24mm; height: 24mm;
|
|
display: flex; align-items: center; justify-content: center; }
|
|
.cell .label { font-size: 10px; color: var(--muted);
|
|
text-align: center; line-height: 1.3; }
|
|
.cell .key { font-family: ui-monospace, Menlo, monospace;
|
|
font-size: 9px; color: var(--text); }
|
|
|
|
/* ---- Single view ---- */
|
|
|
|
.single-toolbar { display: flex; align-items: center; gap: 16px;
|
|
padding: 12px 16px; background: var(--panel);
|
|
border: 1px solid var(--line); border-radius: 10px;
|
|
margin-bottom: 16px; }
|
|
.single-toolbar code { background: var(--bg); padding: 2px 6px;
|
|
border-radius: 4px; font-size: 12px; }
|
|
.single-body { display: grid; grid-template-columns: 280px 1fr; gap: 16px; }
|
|
.single-controls { background: var(--panel); border: 1px solid var(--line);
|
|
border-radius: 10px; padding: 16px;
|
|
display: flex; flex-direction: column; gap: 14px;
|
|
align-self: start; }
|
|
.ctrl-row { display: flex; flex-direction: column; gap: 4px; }
|
|
.ctrl-row > label { font-size: 11px; color: var(--muted);
|
|
text-transform: uppercase; letter-spacing: 0.5px; }
|
|
.ctrl-row select { font: inherit; padding: 6px 8px;
|
|
border: 1px solid var(--line); border-radius: 6px;
|
|
background: white; }
|
|
.ctrl-row.checkbox { flex-direction: row; align-items: center;
|
|
gap: 8px; padding-top: 4px; }
|
|
.ctrl-row.checkbox label { font-size: 13px; color: var(--text);
|
|
text-transform: none; letter-spacing: 0; }
|
|
.ctrl-row.checkbox input[disabled] + label { color: var(--muted); }
|
|
.ctrl-info { margin-top: 12px; padding-top: 12px;
|
|
border-top: 1px solid var(--line);
|
|
display: flex; flex-direction: column; gap: 8px;
|
|
font-size: 11px; color: var(--muted); }
|
|
.ctrl-info code { font-family: ui-monospace, Menlo, monospace;
|
|
font-size: 10px; color: var(--text);
|
|
word-break: break-all; }
|
|
.single-stage { background: var(--panel); border: 1px solid var(--line);
|
|
border-radius: 10px; padding: 24px;
|
|
display: flex; align-items: center; justify-content: center; }
|
|
.single-frame { position: relative;
|
|
width: 60mm; height: 60mm;
|
|
background-color: white;
|
|
background-image:
|
|
linear-gradient(45deg, var(--checker) 25%, transparent 25%),
|
|
linear-gradient(-45deg, var(--checker) 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, var(--checker) 75%),
|
|
linear-gradient(-45deg, transparent 75%, var(--checker) 75%);
|
|
background-size: 4mm 4mm;
|
|
background-position: 0 0, 0 2mm, 2mm -2mm, -2mm 0;
|
|
border: 1px solid var(--line); border-radius: 4px; }
|
|
|
|
/* ---- Component centering inside any preview frame ---- */
|
|
|
|
.cell .preview sonic-diamond,
|
|
.single-frame sonic-diamond {
|
|
position: absolute !important;
|
|
left: 50% !important;
|
|
top: 50% !important;
|
|
transform: translate(-50%, -50%) !important;
|
|
}
|
|
|
|
#toast { position: fixed; bottom: 20px; left: 50%;
|
|
transform: translateX(-50%); padding: 10px 20px;
|
|
background: var(--text); color: white; border-radius: 8px;
|
|
opacity: 0; pointer-events: none; transition: opacity 0.2s;
|
|
font-size: 12px; }
|
|
#toast.show { opacity: 1; }
|
|
</style>
|
|
<script type="module" src="./diamond.mjs"></script>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>sonic-diamond</h1>
|
|
<span class="meta" id="meta"></span>
|
|
<span style="flex: 1"></span>
|
|
<button id="btn-copy">Copy snapshot</button>
|
|
</header>
|
|
|
|
<main>
|
|
<div id="matrix-view"></div>
|
|
|
|
<div id="single-view" hidden>
|
|
<div class="single-toolbar">
|
|
<button class="ghost" id="btn-back">← Matrix</button>
|
|
<span>Variant: <code id="info-variant"></code></span>
|
|
</div>
|
|
<div class="single-body">
|
|
<aside class="single-controls">
|
|
<div class="ctrl-row">
|
|
<label for="ctrl-shape">Shape</label>
|
|
<select id="ctrl-shape"></select>
|
|
</div>
|
|
<div class="ctrl-row">
|
|
<label for="ctrl-color">Color</label>
|
|
<select id="ctrl-color"></select>
|
|
</div>
|
|
<div class="ctrl-row checkbox">
|
|
<input type="checkbox" id="ctrl-chipped">
|
|
<label for="ctrl-chipped" id="ctrl-chipped-label">Chipped</label>
|
|
</div>
|
|
<div class="ctrl-info">
|
|
<div>baseSize: <code id="info-basesize"></code></div>
|
|
<div>origin: <code id="info-origin"></code></div>
|
|
<div>image: <code id="info-img"></code></div>
|
|
</div>
|
|
</aside>
|
|
<main class="single-stage">
|
|
<div class="single-frame" id="single-frame"></div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="toast">Snapshot copied</div>
|
|
<script type="module" src="./diamond.editor.mjs"></script>
|
|
</body>
|
|
</html>
|