ypshimandClaude Haiku 5.5
fae8d7b9b8
- Header follows the mockup: dark bar, project line, stage chips (② shows the pending change count), save status, 저장 / 엑셀 불러오기 / 프로젝트 열기 and the primary 선택 교각 다시 생성 · 변경 n button. - Left column: pier list with header row, 선택 n기 bulk bar, 입력값 and the 2단계 input card. The bottom input panel is gone. - First save opens 시안 ⑤ (project name, bridge, client, author, 좌표계, memo); later Ctrl+S / 저장 write the same file, as the spec's B5 requires. - Project info (client, author, 좌표계, memo) is kept in the project file. - Style layer uses the mockup's tokens (#18212B header, #1F5FA8 primary, #D5DBE2 borders, #E3EDF8 selected row, JetBrains Mono for numbers). - Not reflected: ② and ③ screens (not built yet), and the mockup's static front preview (the app draws the model in 3D). Not verified in a browser. Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
252 lines
11 KiB
HTML
252 lines
11 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Pierzainer — 형상 생성</title>
|
|
</head>
|
|
<body>
|
|
<div class="app">
|
|
<header class="top">
|
|
<div class="brand">
|
|
<strong>Pierzainer</strong>
|
|
<span>교각 설계</span>
|
|
<span id="project-line" class="proj">프로젝트 미지정</span>
|
|
</div>
|
|
<nav class="steps" aria-label="단계">
|
|
<span class="step current" aria-current="step">① 형상 생성 <em id="step1-status">미생성</em></span>
|
|
<span class="step" aria-disabled="true">② 형상계획 <em id="step2-status">예정</em></span>
|
|
<span class="step" aria-disabled="true">③ 철근배근 <em>예정</em></span>
|
|
</nav>
|
|
<div class="actions">
|
|
<span id="save-status" class="savest">저장 전</span>
|
|
<button id="save-project" class="btn-s" type="button" disabled title="프로젝트 파일 저장 (Ctrl+S)">저장</button>
|
|
<button id="open-import" class="btn-s" type="button">엑셀 불러오기</button>
|
|
<button id="open-project" class="btn-s" type="button">프로젝트 열기</button>
|
|
<button id="regen" class="btn-p" type="button" disabled>선택 교각 형상 생성</button>
|
|
<input id="project-file" type="file" accept=".json" hidden />
|
|
</div>
|
|
</header>
|
|
|
|
<p id="status" class="status-line" role="status" aria-live="polite">엑셀을 불러오면 교각 형상을 생성합니다.</p>
|
|
<div id="backup-banner" class="status-line" hidden>
|
|
<span id="backup-text"></span>
|
|
<button id="restore-backup" class="btn small" type="button">복구</button>
|
|
<button id="discard-backup" class="btn small" type="button">버리기</button>
|
|
</div>
|
|
|
|
<main class="grid">
|
|
<aside class="panel piers" aria-labelledby="pier-title">
|
|
<p id="pier-title" class="lbl">교각 목록</p>
|
|
<div class="pier-tools">
|
|
<label>형식
|
|
<select id="type-filter"></select>
|
|
</label>
|
|
<button id="select-all" class="lnk" type="button">전체 선택</button>
|
|
</div>
|
|
<div class="phead" aria-hidden="true"><span></span><span>교각</span><span>상태</span></div>
|
|
<ul id="pier-items" class="pier-items"></ul>
|
|
<p id="pier-empty" class="muted">불러온 교각이 없습니다.</p>
|
|
<p class="pnote">시트 1장 = 교각 1기입니다. 오류가 난 교각만 건너뛰고 나머지는 생성합니다.</p>
|
|
<div class="bulk">
|
|
<b id="bulk-count">선택 0기</b>
|
|
<span class="grow"></span>
|
|
<button id="bulk-copy" class="btn-o" type="button" disabled title="2단계에서 구현">속성 복사…</button>
|
|
<button id="bulk-regen" class="btn-o" type="button" disabled>선택 교각 다시 생성</button>
|
|
</div>
|
|
|
|
<section class="pier-input" aria-labelledby="input-title">
|
|
<p id="input-title" class="lbl">입력값</p>
|
|
<dl id="inputs" class="kv wide"></dl>
|
|
<section class="edit-card" aria-labelledby="edit-title">
|
|
<h3 id="edit-title">코핑·말뚝 입력 수정</h3>
|
|
<div id="edit-fields"></div>
|
|
<p id="edit-summary" class="muted small"></p>
|
|
<button id="edit-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
|
|
</section>
|
|
</section>
|
|
</aside>
|
|
|
|
<section class="panel viewer" aria-labelledby="viewer-title">
|
|
<div class="viewer-head">
|
|
<h2 id="viewer-title">교각 3D 뷰</h2>
|
|
<div id="views" class="views" role="group" aria-label="시점"></div>
|
|
<span id="origin" class="muted"></span>
|
|
</div>
|
|
<div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
|
|
<fieldset class="parts">
|
|
<legend>부재 표시</legend>
|
|
<div id="parts"></div>
|
|
</fieldset>
|
|
</section>
|
|
|
|
<aside class="panel results" aria-labelledby="result-title">
|
|
<h2 id="result-title">계산 결과</h2>
|
|
<section aria-labelledby="sec-axis">
|
|
<h3 id="sec-axis">교각축 · 코핑</h3>
|
|
<dl id="res-axis" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-column">
|
|
<h3 id="sec-column">기둥</h3>
|
|
<dl id="res-column" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-found">
|
|
<h3 id="sec-found">기초</h3>
|
|
<dl id="res-found" class="kv"></dl>
|
|
</section>
|
|
<section aria-labelledby="sec-issues">
|
|
<h3 id="sec-issues">알림 · 정보 <span id="issue-count" class="muted"></span></h3>
|
|
<ul id="issues" class="issues"></ul>
|
|
<p class="muted small">오류(E)는 생성 중단, 경고(W)는 생성 후 표시, 정보(I)는 참고용입니다.</p>
|
|
</section>
|
|
<details>
|
|
<summary>기본값 · 미구현 규칙</summary>
|
|
<ul id="defaults" class="issues"></ul>
|
|
</details>
|
|
</aside>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<dialog id="import-dialog" aria-labelledby="dlg-title">
|
|
<header class="dlg-head">
|
|
<h2 id="dlg-title">엑셀 불러오기</h2>
|
|
<ol class="dlg-steps">
|
|
<li>1 파일 선택</li>
|
|
<li>2 인식 결과 · 미리보기</li>
|
|
<li>3 형상 생성</li>
|
|
</ol>
|
|
<button id="dlg-close" class="btn small" type="button">닫기</button>
|
|
</header>
|
|
|
|
<div class="dlg-body">
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트</h3>
|
|
<label class="field">프로젝트명 · 필수
|
|
<input id="project-name" type="text" required />
|
|
</label>
|
|
<label class="field">교량명
|
|
<input id="bridge-name" type="text" />
|
|
</label>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>파일</h3>
|
|
<div id="drop" class="drop">
|
|
<p>다른 .xlsx 파일을 끌어놓거나</p>
|
|
<div class="drop-actions">
|
|
<button id="pick-file" class="btn small" type="button">파일 선택</button>
|
|
<button id="pick-sample" class="btn small" type="button">샘플 P1 사용</button>
|
|
</div>
|
|
<input id="file" type="file" accept=".xlsx" hidden />
|
|
</div>
|
|
<p id="file-name" class="muted small"></p>
|
|
<button id="download-template" class="btn small" type="button">입력 템플릿 다운로드 (.xlsx)</button>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>시트별 인식 결과</h3>
|
|
<ul id="sheets" class="sheet-list"></ul>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>작성 규칙</h3>
|
|
<ul class="rules">
|
|
<li>교각 1기 = 시트 1장을 기본으로 하며, 한 시트에 여러 기를 넣어도 됩니다.</li>
|
|
<li>표는 머리글 문자열로 찾으므로 위치는 자유입니다.</li>
|
|
<li>수식 셀은 계산된 값을 읽습니다.</li>
|
|
<li>방위각은 75°56'55.9" 형식으로 적습니다.</li>
|
|
</ul>
|
|
<h4>엑셀 열 이름 → 화면 용어</h4>
|
|
<table class="terms">
|
|
<tbody>
|
|
<tr><th>두부보</th><td>코핑</td></tr>
|
|
<tr><th>대좌블럭</th><td>받침블럭</td></tr>
|
|
<tr><th>저판</th><td>확대기초</td></tr>
|
|
<tr><th>받침</th><td>교량받침</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>미리보기</h3>
|
|
<p id="preview-title" class="muted"></p>
|
|
<h4>교각 정보</h4>
|
|
<table id="pv-pier" class="grid-table"><tbody></tbody></table>
|
|
<h4>받침</h4>
|
|
<table id="pv-bearings" class="grid-table">
|
|
<thead><tr><th>번호</th><th>x (m)</th><th>y (m)</th><th>z (m)</th><th>방위각</th><th>위치</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
<h4>IP</h4>
|
|
<table id="pv-ips" class="grid-table">
|
|
<thead><tr><th>점</th><th>x (m)</th><th>y (m)</th><th>꺾임각</th></tr></thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="dlg-foot">
|
|
<span id="dlg-selected" class="muted"></span>
|
|
<button id="dlg-cancel" class="btn" type="button">취소</button>
|
|
<button id="dlg-apply" class="btn primary" type="button" disabled>선택한 교각 0기 형상 생성</button>
|
|
</footer>
|
|
</dialog>
|
|
|
|
<dialog id="save-dialog" aria-labelledby="sv-title">
|
|
<header class="dlg-head">
|
|
<h2 id="sv-title">프로젝트 정보 · 저장</h2>
|
|
<button id="sv-close" class="btn small" type="button">닫기</button>
|
|
</header>
|
|
<div class="dlg-body">
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트 정보</h3>
|
|
<label class="field">프로젝트명 · 필수
|
|
<input id="sv-name" type="text" required />
|
|
</label>
|
|
<label class="field">교량명
|
|
<input id="sv-bridge" type="text" />
|
|
</label>
|
|
<label class="field">발주처
|
|
<input id="sv-client" type="text" />
|
|
</label>
|
|
<label class="field">작성자
|
|
<input id="sv-author" type="text" />
|
|
</label>
|
|
<label class="field">좌표계
|
|
<input id="sv-crs" type="text" value="국토좌표계 (x = 동, y = 북)" readonly />
|
|
</label>
|
|
<label class="field">메모
|
|
<textarea id="sv-memo" rows="3"></textarea>
|
|
</label>
|
|
</section>
|
|
</div>
|
|
<div class="dlg-col">
|
|
<section>
|
|
<h3>프로젝트 파일로 저장</h3>
|
|
<p>파일 이름 <code id="sv-file"></code></p>
|
|
<h4>파일에 담기는 내용</h4>
|
|
<ul class="rules">
|
|
<li>프로젝트 정보와 엑셀 입력값 (교각·IP·받침)</li>
|
|
<li>교각별 기본값과 현재 입력 (기본값 대비 변경 내역)</li>
|
|
<li>3D 형상은 담지 않고, 파일을 열 때 입력값으로 다시 생성합니다</li>
|
|
</ul>
|
|
<p class="muted small">처음 저장할 때만 이 창이 열립니다. 이후에는 헤더의 저장(Ctrl+S)이 같은 파일에 바로 저장합니다.</p>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
<footer class="dlg-foot">
|
|
<button id="sv-cancel" class="btn" type="button">취소</button>
|
|
<button id="sv-save" class="btn primary" type="button">저장</button>
|
|
</footer>
|
|
</dialog>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|