diff --git a/apps/acoustic-camera/index.html b/apps/acoustic-camera/index.html index bd42ab8..77b0b81 100644 --- a/apps/acoustic-camera/index.html +++ b/apps/acoustic-camera/index.html @@ -13,146 +13,117 @@
micarrsimAcoustic Camera
+ 기본 입력 준비 중… 런타임 확인 중… - 기본 fixture 준비 중…
-
+ +
-
-
-
-

Ground truth + acoustic overlay

-

음향 장면

-

장면을 불러오고 있습니다.

+
diff --git a/apps/acoustic-camera/styles.css b/apps/acoustic-camera/styles.css index 397a55e..d01435a 100644 --- a/apps/acoustic-camera/styles.css +++ b/apps/acoustic-camera/styles.css @@ -1,148 +1,427 @@ .camera-shell { min-width: 320px; } -.camera-header { position: sticky; z-index: 30; top: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; } -.header-status, .header-actions, .workspace-tools, .overlay-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; min-width: 0; } -.header-status { justify-content: center; } -.run-status { overflow: hidden; max-width: 420px; color: var(--muted); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } -.button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 11px; color: var(--text); background: var(--surface-raised); cursor: pointer; font-size: .8rem; font-weight: 720; transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; } -.button:hover, .button:focus-visible, .mini-button:hover, .mini-button:focus-visible { border-color: var(--mint); outline: none; transform: translateY(-1px); } -.button:disabled { cursor: wait; opacity: .48; transform: none; } -.button--primary { border-color: rgb(101 242 191 / 55%); color: #06130f; background: var(--mint); } + +.camera-header { + position: sticky; + z-index: 50; + top: 0; + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + min-height: 54px; + padding: 8px clamp(14px, 2vw, 26px); + gap: 14px; +} + +.header-status, +.header-actions, +.live-actions, +.overlay-toolbar, +.history-actions { + display: flex; + min-width: 0; + flex-wrap: wrap; + align-items: center; + gap: 8px; +} + +.header-status { justify-content: flex-end; } +.header-actions { justify-content: flex-end; } +.run-status { + overflow: hidden; + max-width: min(42vw, 520px); + color: var(--muted); + font-size: .7rem; + text-overflow: ellipsis; + white-space: nowrap; +} +.camera-header .status-chip { min-height: 28px; padding: 4px 9px; font-size: .68rem; } + +.button { + display: inline-flex; + min-height: 34px; + align-items: center; + justify-content: center; + padding: 7px 11px; + border: 1px solid var(--line); + border-radius: 9px; + color: var(--text); + background: var(--surface-raised); + cursor: pointer; + font-size: .74rem; + font-weight: 720; + transition: border-color 140ms ease, background 140ms ease, transform 140ms ease; +} +.button:hover, +.button:focus-visible, +.mini-button:hover, +.mini-button:focus-visible, +.file-choice:hover, +.file-choice:focus-within { border-color: var(--mint); outline: none; } +.button:hover:not(:disabled), .mini-button:hover:not(:disabled) { transform: translateY(-1px); } +.button:disabled { cursor: not-allowed; opacity: .45; transform: none; } +.button--primary { border-color: rgb(101 242 191 / 52%); color: #06130f; background: var(--mint); } .button--ghost { background: rgb(255 255 255 / 3%); } .button--full { width: 100%; } -.file-button input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } -.camera-layout { display: grid; grid-template-columns: minmax(600px, 1fr) minmax(350px, 410px); min-height: calc(100vh - 65px); } -.scene-workspace { min-width: 0; padding: clamp(22px, 3vw, 42px); } -.workspace-heading, .section-heading, .array-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; } -.workspace-heading { margin-bottom: 20px; } -.workspace-heading .eyebrow, .section-heading .eyebrow, .array-heading .eyebrow { margin-bottom: 7px; } -.workspace-heading h1 { margin-bottom: 4px; font-size: clamp(1.9rem, 4vw, 3.2rem); letter-spacing: -.055em; } -.workspace-meta, .section-copy { margin: 0; color: var(--muted); font-size: .76rem; line-height: 1.55; } -.workspace-import { display: grid; gap: 7px; justify-items: end; } -.workspace-tools { justify-content: flex-end; } -.import-order { margin: 0; color: var(--muted); font-size: .64rem; } -.scene-canvas-card { position: relative; overflow: hidden; min-height: 520px; border: 1px solid var(--line); border-radius: 22px; background: #07110f; box-shadow: var(--shadow); } -#scene-canvas { display: block; width: 100%; height: clamp(520px, 64vh, 760px); } -.canvas-message { position: absolute; top: 32px; left: 50%; display: grid; width: min(440px, calc(100% - 48px)); gap: 6px; color: var(--muted); text-align: center; pointer-events: none; transform: translateX(-50%); } -.canvas-message strong { color: #cfe2db; font-size: .9rem; } -.canvas-message span { font-size: .74rem; } -.canvas-message.is-hidden { display: none; } -.canvas-badge { position: absolute; right: 14px; bottom: 14px; max-width: calc(100% - 28px); overflow: hidden; padding: 7px 10px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; color: #d7e8e2; background: rgb(8 17 15 / 80%); backdrop-filter: blur(10px); font: 650 .7rem ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } -.overlay-toolbar { justify-content: space-between; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 2%); } -.band-legend { display: flex; flex: 1 1 360px; flex-wrap: wrap; gap: 7px; } -.legend-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #0b1714; cursor: pointer; font-size: .68rem; } -.legend-toggle input { accent-color: var(--band-color, var(--mint)); } -.legend-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--band-color, var(--mint)); } -.range-field, .check-field { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .7rem; font-weight: 650; } -.range-field input { width: 110px; accent-color: var(--mint); } -.check-field input { width: 17px; height: 17px; accent-color: var(--mint); } -.live-panel { margin-top: 12px; padding: 15px 16px; border: 1px solid rgb(88 199 255 / 24%); border-radius: 16px; background: linear-gradient(135deg, rgb(88 199 255 / 7%), rgb(101 242 191 / 3%)); } -.live-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; } -.live-heading h2 { margin: 0; font-size: .98rem; } -.live-heading p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: .7rem; } -.live-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } -.live-controls { display: grid; grid-template-columns: minmax(220px, 1fr) auto auto; gap: 12px; align-items: end; margin-top: 14px; } -.live-scrubber, .compact-select { display: grid; gap: 6px; color: var(--muted); font-size: .66rem; font-weight: 650; } -.live-scrubber input { width: 100%; accent-color: var(--cyan); } -.compact-select select { min-height: 34px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #0b1714; } -.live-note { margin: 10px 0 0; color: var(--muted); font-size: .64rem; line-height: 1.55; } -.live-panel.is-ready { border-color: rgb(101 242 191 / 42%); } -.live-panel.is-playing { box-shadow: inset 3px 0 0 var(--cyan); } -.result-section, .history-section { margin-top: 28px; padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: rgb(255 255 255 / 2%); } -.section-heading h2 { margin: 0; font-size: 1.05rem; } -.result-chip { padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .68rem; } -.empty-result { margin-top: 14px; padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: .78rem; line-height: 1.6; text-align: center; } -.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-top: 14px; } -.metric-card { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #0b1714; } -.metric-card span { display: block; margin-bottom: 7px; color: var(--muted); font-size: .66rem; } -.metric-card strong { display: block; overflow: hidden; font-size: 1.15rem; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; } -.metric-card small { display: block; margin-top: 5px; color: var(--muted); font-size: .62rem; } -.text-button, .mini-button { padding: 5px 7px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .68rem; } -.history-list { display: grid; gap: 8px; margin-top: 14px; } -.history-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; } -.history-empty { padding: 12px; color: var(--muted); font-size: .72rem; text-align: center; } -.history-card { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(85px, .75fr)); gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #0b1714; } -.history-card strong, .history-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.history-card strong { font-size: .78rem; } -.history-card span { color: var(--muted); font-size: .67rem; } -.control-panel { position: sticky; top: 65px; align-self: start; overflow-y: auto; max-height: calc(100vh - 65px); padding: 16px; border-left: 1px solid var(--line); background: rgb(12 24 21 / 90%); backdrop-filter: blur(18px); } -.array-card, .asset-card, .control-section, .output-card, .validation-card { padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: rgb(255 255 255 / 2%); } -.array-card + section, .control-panel section + section { margin-top: 11px; } -.array-heading { align-items: flex-start; } -.array-heading h2 { margin: 0; font-size: .95rem; } -.array-heading > strong { color: var(--mint); font: 750 .78rem ui-monospace, SFMono-Regular, Consolas, monospace; } -.array-preset-field { display: grid; gap: 6px; margin-top: 12px; } -.array-preset-field span { color: var(--muted); font-size: .66rem; font-weight: 650; } -.array-preset-field select { width: 100%; min-height: 37px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #0b1714; } -.array-preset-field select:focus { border-color: var(--mint); outline: 2px solid rgb(101 242 191 / 11%); } -#array-canvas { display: block; width: 100%; height: 265px; margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #07110f; } -#array-meta { margin: 9px 0 0; color: var(--muted); font: 600 .66rem ui-monospace, SFMono-Regular, Consolas, monospace; } -.section-title { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; } -.section-title > span, .section-title > div > span { color: var(--mint); font: 750 .66rem ui-monospace, SFMono-Regular, Consolas, monospace; } -.section-title h2 { margin: 0; font-size: .88rem; } -.section-title--spread { justify-content: space-between; } -.section-title--spread > div { display: flex; align-items: center; gap: 9px; } -.source-summary { display: grid; gap: 7px; } -.source-line { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .69rem; } + +.workflow-strip { + position: sticky; + z-index: 40; + top: 54px; + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + padding: 0 clamp(14px, 2vw, 26px); + border-bottom: 1px solid var(--line); + background: rgb(8 17 15 / 94%); + backdrop-filter: blur(18px); +} +.workflow-strip a { + display: grid; + grid-template-columns: 24px auto; + grid-template-rows: auto auto; + min-width: 0; + padding: 9px 12px; + border-right: 1px solid rgb(145 170 162 / 10%); + color: var(--text); + text-decoration: none; +} +.workflow-strip a:first-child { border-left: 1px solid rgb(145 170 162 / 10%); } +.workflow-strip a:hover, .workflow-strip a:focus-visible { background: rgb(101 242 191 / 5%); outline: none; } +.workflow-strip a > span { + grid-row: 1 / 3; + align-self: center; + width: 20px; + height: 20px; + border: 1px solid rgb(101 242 191 / 35%); + border-radius: 50%; + color: var(--mint); + font: 750 .62rem/18px ui-monospace, SFMono-Regular, Consolas, monospace; + text-align: center; +} +.workflow-strip strong { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } +.workflow-strip small { overflow: hidden; color: var(--muted); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; } + +.camera-layout { + display: grid; + grid-template-columns: minmax(320px, 360px) minmax(620px, 1fr); + width: min(1880px, 100%); + min-height: calc(100vh - 103px); + margin: 0 auto; +} +.control-panel { + position: sticky; + top: 103px; + align-self: start; + overflow-y: auto; + max-height: calc(100vh - 103px); + padding: 12px; + border-right: 1px solid var(--line); + background: rgb(12 24 21 / 88%); + backdrop-filter: blur(18px); + scrollbar-width: thin; +} +.control-panel .workflow-card { + margin: 0; + padding: 14px; + border: 1px solid var(--line); + border-radius: 14px; + background: rgb(255 255 255 / 2%); +} +.control-panel .workflow-card + .workflow-card, +.control-panel .workflow-card + .validation-card { margin-top: 10px; } + +.step-heading { display: flex; align-items: flex-start; gap: 10px; } +.step-heading--horizontal { align-items: center; } +.step-number { + display: inline-grid; + width: 24px; + height: 24px; + flex: 0 0 auto; + place-items: center; + border-radius: 7px; + color: #06130f; + background: var(--mint); + font: 800 .67rem ui-monospace, SFMono-Regular, Consolas, monospace; +} +.step-heading h2 { margin: 0; font-size: .9rem; letter-spacing: -.02em; } +.step-heading p { margin: 3px 0 0; color: var(--muted); font-size: .65rem; line-height: 1.45; } + +.workspace-tools { display: grid; } +.input-file-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 12px; } +.file-choice { + position: relative; + display: grid; + grid-template-columns: 19px minmax(0, 1fr); + align-items: center; + min-height: 48px; + padding: 7px 8px; + border: 1px solid var(--line); + border-radius: 10px; + background: #0b1714; + cursor: pointer; +} +.file-choice input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); } +.file-sequence { color: var(--mint); font: 700 .58rem ui-monospace, SFMono-Regular, Consolas, monospace; } +.file-choice strong, .file-choice small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.file-choice strong { font-size: .68rem; } +.file-choice small { margin-top: 2px; color: var(--muted); font-size: .56rem; } + +.input-summary, .array-card, .band-config { margin-top: 12px; padding-top: 11px; border-top: 1px solid rgb(145 170 162 / 13%); } +.compact-section-heading, .array-heading, .inspect-heading, .mode-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 12px; +} +.compact-section-heading h3, .array-heading h3 { margin: 0; font-size: .75rem; } +.compact-section-heading > span { color: var(--muted); font-size: .61rem; } +.compact-label, .mode-kicker { color: var(--mint); font: 750 .56rem ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; } +.builder-link { color: var(--cyan); font-size: .6rem; text-decoration: none; } +.source-summary, .asset-list { display: grid; gap: 6px; margin-top: 8px; } +.source-line { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: .63rem; } .source-line strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } -.asset-list { display: grid; gap: 7px; margin-top: 10px; } -.asset-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .66rem; } +.asset-status { + display: flex; + align-items: center; + justify-content: space-between; + gap: 8px; + padding: 7px 8px; + border: 1px solid var(--line); + border-radius: 8px; + color: var(--muted); + font-size: .61rem; +} .asset-status strong { overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .asset-status.is-ready span { color: var(--mint); } .asset-status.is-error span { color: var(--danger); } -.asset-empty { color: var(--muted); font-size: .68rem; } -.builder-link { display: block; margin-top: 11px; color: var(--cyan); font-size: .68rem; text-decoration: none; } -.output-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } -.output-save-state { margin: 9px 0 0; color: var(--muted); font-size: .65rem; text-align: center; } -.output-save-state.is-dirty { color: var(--amber); } -.field { display: grid; min-width: 0; gap: 6px; } -.field > span { color: var(--muted); font-size: .67rem; font-weight: 650; } -.field input, .field select, .band-editor input { width: 100%; min-height: 37px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 9px; color: var(--text); background: #0b1714; } -.field input:focus, .field select:focus, .band-editor input:focus { border-color: var(--mint); outline: 2px solid rgb(101 242 191 / 11%); } -.field--wide + .field--wide, .field--wide + .field-grid { margin-top: 9px; } -.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 9px; } -.workload-summary { margin: 11px 0 0; padding: 10px; border-radius: 9px; color: var(--muted); background: #0b1714; font: 600 .66rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; } -.workload-summary.is-warning { color: var(--amber); } -.band-editor-list { display: grid; gap: 9px; } -.band-editor { display: grid; grid-template-columns: minmax(70px, 1fr) minmax(62px, .8fr) minmax(62px, .8fr) 34px; gap: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: #0b1714; } -.band-editor input { min-width: 0; font-size: .68rem; } -.band-editor input[type="color"] { padding: 3px; } -.band-editor__remove { border: 0; border-radius: 8px; color: var(--danger); background: rgb(255 123 115 / 8%); cursor: pointer; } -.mini-button { border-color: var(--line); } -.validation-card { display: flex; align-items: flex-start; gap: 11px; } -.validation-dot { width: 10px; height: 10px; flex: 0 0 auto; margin-top: 4px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 5px rgb(145 170 162 / 8%); } -.validation-card strong { font-size: .8rem; } -.validation-card p { margin: 4px 0 0; color: var(--muted); font-size: .69rem; line-height: 1.5; } -.validation-card.is-valid .validation-dot { background: var(--mint); box-shadow: 0 0 0 5px rgb(101 242 191 / 10%); } -.validation-card.is-invalid .validation-dot { background: var(--danger); box-shadow: 0 0 0 5px rgb(255 123 115 / 10%); } -.validation-card.is-warning .validation-dot { background: var(--amber); box-shadow: 0 0 0 5px rgb(255 197 110 / 10%); } -.is-hidden { display: none !important; } -@media (max-width: 1120px) { - .camera-header { grid-template-columns: auto 1fr; } - .header-status { justify-content: flex-end; } - .header-actions { grid-column: 1 / -1; justify-content: flex-end; } - .camera-layout { grid-template-columns: 1fr; } - .control-panel { position: static; max-height: none; border-top: 1px solid var(--line); border-left: 0; } +.asset-empty { color: var(--muted); font-size: .62rem; } +.array-heading > strong { color: var(--mint); font: 750 .68rem ui-monospace, SFMono-Regular, Consolas, monospace; } + +.field { display: grid; min-width: 0; gap: 5px; } +.field > span { color: var(--muted); font-size: .61rem; font-weight: 650; } +.field input, .field select, .band-editor input, .compact-select select { + width: 100%; + min-height: 34px; + padding: 7px 8px; + border: 1px solid var(--line); + border-radius: 8px; + color: var(--text); + background: #0b1714; + font-size: .68rem; } -@media (max-width: 760px) { - .camera-header, .workspace-heading { align-items: stretch; } - .camera-header { position: static; display: flex; flex-direction: column; } - .header-status, .header-actions, .workspace-tools { justify-content: flex-start; width: 100%; } - .workspace-import { justify-items: start; } - .header-actions .button, .workspace-tools .button { flex: 1 1 calc(50% - 5px); } - .scene-workspace { padding: 18px; } - .workspace-heading { flex-direction: column; } - .live-heading { align-items: stretch; flex-direction: column; } - .live-actions { justify-content: flex-start; } +.field input:focus, .field select:focus, .band-editor input:focus, .compact-select select:focus { + border-color: var(--mint); + outline: 2px solid rgb(101 242 191 / 10%); +} +.array-card > .field { margin-top: 9px; } +.quick-field-grid, .advanced-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } +.quick-field-grid { margin-top: 12px; } +.field--wide { grid-column: 1 / -1; } +.workload-summary { + margin: 9px 0 0; + padding: 8px; + border-radius: 8px; + color: var(--muted); + background: #0b1714; + font: 600 .6rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; +} +.workload-summary.is-warning { color: var(--amber); } + +.mini-button, .text-button { + padding: 5px 7px; + border: 1px solid transparent; + border-radius: 7px; + color: var(--muted); + background: transparent; + cursor: pointer; + font-size: .62rem; +} +.mini-button { border-color: var(--line); } +.band-editor-list { display: grid; gap: 7px; margin-top: 8px; } +.band-editor { + display: grid; + grid-template-columns: minmax(66px, 1fr) minmax(55px, .72fr) minmax(55px, .72fr) 30px; + gap: 5px; + padding: 7px; + border: 1px solid var(--line); + border-radius: 9px; + background: #0b1714; +} +.band-editor input { min-width: 0; } +.band-editor input[type="color"] { padding: 3px; } +.band-editor__remove { border: 0; border-radius: 7px; color: var(--danger); background: rgb(255 123 115 / 8%); cursor: pointer; } + +details > summary { list-style: none; } +details > summary::-webkit-details-marker { display: none; } +.inline-details, .advanced-settings, .utility-details, .mode-help { + margin-top: 10px; + border: 1px solid var(--line); + border-radius: 9px; + background: rgb(255 255 255 / 1.5%); +} +.inline-details > summary, .advanced-settings > summary, .utility-details > summary, .mode-help > summary { + position: relative; + padding: 9px 30px 9px 10px; + color: var(--muted); + cursor: pointer; + font-size: .64rem; + font-weight: 680; +} +.inline-details > summary::after, .advanced-settings > summary::after, .utility-details > summary::after, .mode-help > summary::after { + position: absolute; + top: 50%; + right: 10px; + color: var(--mint); + content: "+"; + transform: translateY(-50%); +} +details[open] > summary::after { content: "−"; } +.advanced-settings > summary { display: flex; justify-content: space-between; gap: 10px; } +.advanced-settings > summary small, .utility-details > summary small { color: var(--muted); font-size: .57rem; font-weight: 500; } +.advanced-settings__body { display: grid; gap: 14px; padding: 11px; border-top: 1px solid var(--line); } +.advanced-group h3 { margin: 0 0 8px; color: #cfe2db; font-size: .66rem; } +#array-canvas { display: block; width: 100%; height: 180px; border-top: 1px solid var(--line); background: #07110f; } +#array-meta { margin: 0; padding: 8px; color: var(--muted); font: 600 .58rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; } +.output-card { padding: 0; } +.output-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 10px 10px 0; border-top: 1px solid var(--line); } +.output-save-state { margin: 7px 0 0; padding: 0 10px 10px; color: var(--muted); font-size: .6rem; text-align: center; } +.output-save-state.is-dirty { color: var(--amber); } + +.validation-card { + display: flex; + align-items: flex-start; + gap: 10px; + margin-top: 10px; + padding: 11px 12px; + border: 1px solid var(--line); + border-radius: 12px; + background: #0b1714; +} +.validation-dot { width: 9px; height: 9px; flex: 0 0 auto; margin-top: 3px; border-radius: 50%; background: var(--muted); box-shadow: 0 0 0 4px rgb(145 170 162 / 8%); } +.validation-card strong { font-size: .7rem; } +.validation-card p { margin: 3px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.45; } +.validation-card.is-valid .validation-dot { background: var(--mint); box-shadow: 0 0 0 4px rgb(101 242 191 / 10%); } +.validation-card.is-invalid .validation-dot { background: var(--danger); box-shadow: 0 0 0 4px rgb(255 123 115 / 10%); } +.validation-card.is-warning .validation-dot { background: var(--amber); box-shadow: 0 0 0 4px rgb(255 197 110 / 10%); } + +.scene-workspace { min-width: 0; padding: 16px clamp(16px, 2vw, 28px) 36px; } +.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 12px; } +.workspace-heading h1 { margin: 2px 0 0; font-size: clamp(1.25rem, 2vw, 1.65rem); letter-spacing: -.035em; } +.workspace-meta { max-width: 64%; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; text-align: right; } + +.run-stage { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: rgb(255 255 255 / 2%); } +.mode-grid { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(430px, 1.28fr); gap: 9px; margin-top: 11px; } +.mode-card { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #0b1714; } +.mode-card--snapshot { display: flex; flex-direction: column; border-color: rgb(101 242 191 / 22%); } +.mode-card--moving { border-color: rgb(88 199 232 / 24%); } +.mode-heading { align-items: flex-start; } +.mode-heading h3 { margin: 2px 0 0; font-size: .88rem; } +.mode-card > p { margin: 7px 0 10px; color: var(--muted); font-size: .64rem; line-height: 1.45; } +.mode-format { padding: 4px 7px; border-radius: 999px; color: var(--muted); background: rgb(255 255 255 / 4%); font-size: .57rem; } +.mode-actions { margin-top: auto; } +.mode-card--snapshot .mode-actions { padding-top: 8px; } +.live-actions { justify-content: flex-start; } +.live-controls { display: grid; grid-template-columns: minmax(150px, 1fr) 74px 64px; align-items: end; gap: 8px; margin-top: 9px; } +.live-scrubber, .compact-select { display: grid; gap: 5px; color: var(--muted); font-size: .59rem; font-weight: 650; } +.live-scrubber input { width: 100%; accent-color: var(--cyan); } +.mode-help { margin-top: 8px; border-color: rgb(88 199 232 / 15%); } +.mode-help > summary { padding-top: 7px; padding-bottom: 7px; font-size: .58rem; } +.live-note { margin: 0; padding: 0 9px 9px; color: var(--muted); font-size: .59rem; line-height: 1.5; } +.live-panel.is-ready { border-color: rgb(101 242 191 / 48%); } +.live-panel.is-playing { border-color: var(--cyan); box-shadow: inset 3px 0 0 var(--cyan); } +html[data-run-state="running"] #snapshot-mode { border-color: var(--mint); box-shadow: inset 3px 0 0 var(--mint); } + +.inspect-stage { margin-top: 14px; } +.inspect-heading { align-items: center; margin-bottom: 10px; } +.result-chip { max-width: 46%; overflow: hidden; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; } +.scene-canvas-card { position: relative; overflow: hidden; min-height: 500px; border: 1px solid var(--line); border-radius: 16px; background: #07110f; box-shadow: var(--shadow); } +#scene-canvas { display: block; width: 100%; height: clamp(500px, 66vh, 820px); } +.canvas-message { position: absolute; top: 26px; left: 50%; display: grid; width: min(390px, calc(100% - 40px)); gap: 5px; color: var(--muted); text-align: center; pointer-events: none; transform: translateX(-50%); } +.canvas-message strong { color: #cfe2db; font-size: .8rem; } +.canvas-message span { font-size: .65rem; } +.canvas-message.is-hidden { display: none; } +.canvas-badge { position: absolute; right: 12px; bottom: 12px; max-width: calc(100% - 24px); overflow: hidden; padding: 6px 9px; border: 1px solid rgb(255 255 255 / 10%); border-radius: 999px; color: #d7e8e2; background: rgb(8 17 15 / 82%); backdrop-filter: blur(10px); font: 650 .64rem ui-monospace, SFMono-Regular, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } +.overlay-toolbar { justify-content: flex-end; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: rgb(255 255 255 / 2%); } +.band-legend { display: flex; flex: 1 1 300px; flex-wrap: wrap; gap: 6px; } +.legend-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: #0b1714; cursor: pointer; font-size: .62rem; } +.legend-toggle input { accent-color: var(--band-color, var(--mint)); } +.legend-swatch { width: 8px; height: 8px; border-radius: 50%; background: var(--band-color, var(--mint)); } +.range-field, .check-field { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .63rem; font-weight: 650; } +.range-field input { width: 92px; accent-color: var(--mint); } +.check-field input { width: 15px; height: 15px; accent-color: var(--mint); } + +.result-section { margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: rgb(255 255 255 / 2%); } +.empty-result { margin-top: 9px; padding: 12px; border: 1px dashed var(--line); border-radius: 9px; color: var(--muted); font-size: .68rem; line-height: 1.5; text-align: center; } +.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; margin-top: 9px; } +.metric-card { min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 10px; background: #0b1714; } +.metric-card span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .6rem; } +.metric-card strong { display: block; overflow: hidden; font-size: 1rem; letter-spacing: -.03em; text-overflow: ellipsis; white-space: nowrap; } +.metric-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .57rem; } +.history-section, .help-panel { margin-top: 9px; border-radius: 11px; } +.history-section > summary, .help-panel > summary { display: flex; justify-content: space-between; gap: 12px; padding: 10px 34px 10px 11px; } +.history-body { padding: 0 11px 11px; border-top: 1px solid var(--line); } +.history-actions { justify-content: flex-end; padding-top: 8px; } +.section-copy { margin: 5px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.45; } +.history-list { display: grid; gap: 7px; margin-top: 9px; } +.history-empty { padding: 10px; color: var(--muted); font-size: .65rem; text-align: center; } +.history-card { display: grid; grid-template-columns: minmax(140px, 1.5fr) repeat(4, minmax(72px, .72fr)); gap: 8px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #0b1714; } +.history-card strong, .history-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.history-card strong { font-size: .69rem; } +.history-card span { color: var(--muted); font-size: .6rem; } +.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 10px; border-top: 1px solid var(--line); } +.help-grid p { margin: 0; padding: 9px; border-radius: 8px; color: var(--muted); background: #0b1714; font-size: .61rem; line-height: 1.45; } +.help-grid strong { display: block; margin-bottom: 3px; color: var(--text); font-size: .63rem; } + +.is-hidden { display: none !important; } + +@media (max-width: 1240px) { + .camera-layout { grid-template-columns: minmax(300px, 330px) minmax(560px, 1fr); } + .mode-grid { grid-template-columns: 1fr; } + .mode-card--snapshot { display: grid; grid-template-columns: 1fr auto; gap: 0 12px; } + .mode-card--snapshot > p { grid-column: 1; } + .mode-card--snapshot .mode-actions { grid-column: 2; grid-row: 1 / 3; align-self: center; min-width: 160px; padding: 0; } +} + +@media (max-width: 980px) { + .camera-layout { grid-template-columns: minmax(0, 1fr); } + .control-panel, .scene-workspace { width: 100%; min-width: 0; } + .control-panel { position: static; overflow: visible; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); } + .scene-workspace { padding-top: 14px; } + .control-panel .workflow-card { max-width: none; } + .input-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } + .input-card > .step-heading, .input-card > .input-file-grid { grid-column: 1 / -1; } + .input-summary, .array-card { margin-top: 12px; } +} + +@media (max-width: 700px) { + .camera-header { grid-template-columns: 1fr auto; } + .header-status { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; } + .run-status { max-width: calc(100vw - 150px); } + .workflow-strip { top: 92px; padding: 0; } + .workflow-strip a { min-width: 0; padding: 8px; } + .workflow-strip small { display: none; } + .camera-layout { min-height: calc(100vh - 137px); } + .input-card { display: block; } + .workspace-heading, .inspect-heading { align-items: flex-start; flex-direction: column; } + .workspace-meta { max-width: none; text-align: left; } + .result-chip { max-width: 100%; } + .mode-card--snapshot { display: flex; } .live-controls { grid-template-columns: 1fr 1fr; } .live-scrubber { grid-column: 1 / -1; } - .scene-canvas-card { min-height: 380px; } - #scene-canvas { height: 420px; } + .scene-canvas-card { min-height: 400px; } + #scene-canvas { height: 460px; } + .help-grid { grid-template-columns: 1fr; } .history-card { grid-template-columns: 1fr 1fr; } .history-card strong { grid-column: 1 / -1; } } -@media (max-width: 430px) { - .field-grid, .band-editor, .output-actions, .live-controls { grid-template-columns: 1fr; } - .live-scrubber { grid-column: auto; } - .band-editor__remove { min-height: 34px; } + +@media (max-width: 440px) { + .camera-header .app-brand span, .camera-header .status-chip { display: none; } + .header-status { grid-column: 1 / -1; } + .run-status { max-width: 100%; } + .workflow-strip { top: 88px; } + .input-file-grid, .quick-field-grid, .advanced-field-grid, .output-actions, .band-editor, .live-controls { grid-template-columns: 1fr; } + .field--wide, .live-scrubber { grid-column: auto; } + .band-editor__remove { min-height: 32px; } + .live-actions .button { flex: 1 1 calc(50% - 4px); } .metric-grid { grid-template-columns: 1fr 1fr; } + .overlay-toolbar { justify-content: flex-start; } } diff --git a/tests/integration/camera-ui.test.js b/tests/integration/camera-ui.test.js index 36a8c48..1f7fd84 100644 --- a/tests/integration/camera-ui.test.js +++ b/tests/integration/camera-ui.test.js @@ -60,9 +60,27 @@ test("Acoustic Camera가 8×8 CPU 실행·결과 저장·stale·재실행 흐름 "기본 Camera 입력 검증", ); + const workflowSteps = [...documentObject.querySelectorAll("#camera-workflow [data-workflow-step]")]; + assertEqual(workflowSteps.length, 4, "four-step workflow is discoverable"); + assertEqual( + workflowSteps.map((step) => step.dataset.workflowStep).join(","), + "1,2,3,4", + "workflow order", + ); + assert(documentObject.querySelector("#input-step").textContent.includes("입력 준비"), "input step label"); + assert(documentObject.querySelector("#configure-step").textContent.includes("분석 설정"), "configure step label"); + assert(documentObject.querySelector("#run-step").textContent.includes("실행 방식"), "run step label"); + assert(documentObject.querySelector("#inspect-step").textContent.includes("결과 확인"), "inspect step label"); + assert(documentObject.querySelector("#snapshot-mode").contains(documentObject.querySelector("#run-button")), "snapshot action is grouped with snapshot mode"); + assert(documentObject.querySelector("#moving-mode").contains(documentObject.querySelector("#prepare-live-button")), "live action is grouped with moving mode"); + assert(!documentObject.querySelector("#advanced-settings").open, "advanced settings start collapsed"); + assert(!documentObject.querySelector("#array-details").open, "array developer detail starts collapsed"); + assert(!documentObject.querySelector("#camera-help").open, "limitations help starts collapsed"); + const canvas = documentObject.querySelector("#scene-canvas"); await waitFor(() => canvas.width > 0 && canvas.height > 0, "scene canvas 초기 렌더"); await nextPaint(windowObject); + assert(canvas.getBoundingClientRect().height >= 500, "scene canvas remains the dominant workspace"); const initialCanvas = canvas.toDataURL(); dispatchValue(windowObject, documentObject.querySelector("#scan-columns"), 8); @@ -208,6 +226,18 @@ test("Acoustic Camera가 8×8 CPU 실행·결과 저장·stale·재실행 흐름 "final Camera documents saved", ); assertEqual(documentObject.documentElement.dataset.unsavedWork, "", "all Camera work is saved"); + + frame.style.width = "390px"; + await nextPaint(windowObject); + assert( + documentObject.documentElement.scrollWidth <= documentObject.documentElement.clientWidth + 1, + "compact Camera layout has no horizontal overflow", + ); + const finalWorkflowStep = workflowSteps.at(-1).getBoundingClientRect(); + assert( + finalWorkflowStep.right <= documentObject.documentElement.clientWidth + 1, + "all workflow steps remain visible on a compact viewport", + ); } finally { windowObject.confirm = originalConfirm; windowObject.HTMLAnchorElement.prototype.click = originalAnchorClick;