ypshimandClaude Haiku 5.5
69922cfa35
- main screen follows 시안 ①: header steps, pier list with type filter and multi-select, viewer with 아이소/정면/측면/평면, part toggles in mockup order, input panel and result sections - import moved to a modal dialog following 시안 ④: project name (required), file drop and pick, per-sheet recognition with selectable piers, preview of pier and bearing tables, glossary of Excel column names - Esc closes the dialog and focus stays inside it (native dialog) - 44px touch targets and 2px focus rings; colours from the mockup tokens Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
177 lines
7.0 KiB
HTML
177 lines
7.0 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>교각 설계</strong>
|
|
<span id="project-line" class="muted">프로젝트 미지정</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>예정</em></span>
|
|
<span class="step" aria-disabled="true">③ 철근배근 <em>예정</em></span>
|
|
</nav>
|
|
<div class="actions">
|
|
<button id="open-import" class="btn" type="button">엑셀 불러오기</button>
|
|
<button id="regen" class="btn primary" type="button" disabled>선택 교각 형상 생성</button>
|
|
</div>
|
|
</header>
|
|
|
|
<p id="status" class="status-line" role="status" aria-live="polite">엑셀을 불러오면 교각 형상을 생성합니다.</p>
|
|
|
|
<main class="grid">
|
|
<aside class="panel piers" aria-labelledby="pier-title">
|
|
<h2 id="pier-title">교각 목록</h2>
|
|
<div class="pier-tools">
|
|
<label>형식
|
|
<select id="type-filter"></select>
|
|
</label>
|
|
<button id="select-all" class="btn small" type="button">전체 선택</button>
|
|
</div>
|
|
<ul id="pier-items" class="pier-items"></ul>
|
|
<p id="pier-empty" class="muted">불러온 교각이 없습니다.</p>
|
|
</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>
|
|
|
|
<section class="panel inputs" aria-labelledby="input-title">
|
|
<h2 id="input-title">입력값</h2>
|
|
<dl id="inputs" class="kv wide"></dl>
|
|
</section>
|
|
</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>
|
|
</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>
|
|
|
|
<script type="module" src="/src/main.ts"></script>
|
|
</body>
|
|
</html>
|