ypshimandClaude Haiku 5.5
d2ebce026d
- 전체 보기 버튼 제거. ① 형상 생성은 항상 전체 보기로 열림 - 다른 단계에서 ①로 돌아오면 전체 보기로 다시 설정 - 교각을 눌러 단일 보기로 바꾼 뒤에는 ①로 다시 들어와야 전체 보기로 돌아감 Co-Authored-By: Claude Haiku 5.5 <noreply@anthropic.com>
434 lines
22 KiB
HTML
434 lines
22 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="단계">
|
||
<button id="nav-shape" class="step current" type="button" aria-current="step">① 형상 생성 <em id="step1-status">미생성</em></button>
|
||
<button id="nav-plan" class="step" type="button">② 형상계획 <em id="step2-status">예정</em></button>
|
||
<button id="nav-rebar" class="step" type="button">③ 철근배근 <em id="step3-status">예정</em></button>
|
||
<button id="nav-quantity" class="step" type="button">④ 재료표 <em id="step4-status">예정</em></button>
|
||
</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>
|
||
|
||
<div class="status-row">
|
||
<p id="status" class="status-line"></p>
|
||
<div id="backup-banner" class="backup-inline" 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>
|
||
</div>
|
||
<div id="toast-host" class="toast-host" role="status" aria-live="polite"></div>
|
||
|
||
<main class="grid" id="view-shape">
|
||
<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>
|
||
<div class="pier-table-wrap">
|
||
<table id="inputs-all" class="grid-table compact">
|
||
<thead><tr><th>교각</th><th>코핑 상면</th><th>기초 하단</th><th>지반고</th><th>말뚝 (mm)</th><th>코핑 폭×길이</th><th>받침</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<p class="lbl small" id="inputs-active"></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" id="viewer-block" aria-labelledby="viewer-title">
|
||
<div class="viewer-head">
|
||
<h2 id="viewer-title">교각 3D 뷰</h2>
|
||
</div>
|
||
<div id="canvas" class="canvas" aria-label="교각 3D 뷰"></div>
|
||
<div class="viewer-stack viewer-stack-right">
|
||
<details class="info-panel parts-info" id="parts-info">
|
||
<summary>부재 표시 <span id="parts-count" class="panel-state"></span></summary>
|
||
<div id="parts"></div>
|
||
</details>
|
||
<div class="views-menu" id="views-menu">
|
||
<button id="views-toggle" class="btn views-toggle" type="button" aria-haspopup="true" aria-expanded="false" aria-controls="views">시점</button>
|
||
<div id="views" class="views views-list" role="group" aria-label="시점" hidden></div>
|
||
</div>
|
||
<details class="info-panel color-info" id="color-info" hidden>
|
||
<summary>색 기준 <span id="color-state" class="panel-state"></span></summary>
|
||
<div class="rebar-color" id="rebar-color" role="group" aria-label="철근 색 기준">
|
||
<button type="button" data-color="role" aria-pressed="true">역할</button>
|
||
<button type="button" data-color="diameter" aria-pressed="false">직경</button>
|
||
<button type="button" data-color="member" aria-pressed="false">부재</button>
|
||
<ul id="rebar-legend" class="rebar-legend"></ul>
|
||
</div>
|
||
</details>
|
||
<div class="origin-wrap">
|
||
<button id="origin-toggle" class="info-btn" type="button" aria-label="원점 표기" aria-expanded="false" aria-controls="origin">ⓘ</button>
|
||
<span id="origin" class="origin-pop muted" hidden></span>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<main class="grid plan" id="view-plan" hidden>
|
||
<aside class="panel piers" aria-labelledby="plan-pier-title">
|
||
<p id="plan-pier-title" class="lbl">교각 목록</p>
|
||
<div class="phead" aria-hidden="true"><span></span><span>교각</span><span>변경</span></div>
|
||
<ul id="plan-pier-items" class="pier-items"></ul>
|
||
<p class="lbl members-title">부재 · 5개</p>
|
||
<ul id="members" class="members"></ul>
|
||
</aside>
|
||
|
||
<div class="center-col">
|
||
<div class="viewer-slot" id="slot-plan"></div>
|
||
<section class="panel viewer" aria-labelledby="member-title">
|
||
<div class="viewer-head">
|
||
<h2 id="member-title">코핑</h2>
|
||
</div>
|
||
<p id="member-summary" class="num"></p>
|
||
<div id="member-options" class="shape-options"></div>
|
||
<div id="member-fields"></div>
|
||
<p id="member-note" class="muted small"></p>
|
||
<button id="member-regen" class="btn primary" type="button" disabled>다시 생성 · 변경 0</button>
|
||
</section>
|
||
</div>
|
||
|
||
<aside class="panel results" aria-labelledby="changes-title">
|
||
<h2 id="changes-title">기본값 대비 변경</h2>
|
||
<ul id="changes" class="issues"></ul>
|
||
<h2>알림</h2>
|
||
<ul id="plan-issues" class="issues"></ul>
|
||
</aside>
|
||
</main>
|
||
|
||
<main class="grid quantity" id="view-quantity" hidden>
|
||
<aside class="panel piers" aria-labelledby="quantity-pier-title">
|
||
<p id="quantity-pier-title" class="lbl">교각 목록</p>
|
||
<ul id="quantity-pier-items" class="pier-items"></ul>
|
||
<p class="pnote" id="quantity-note"></p>
|
||
</aside>
|
||
<section class="panel viewer" aria-labelledby="quantity-title">
|
||
<div class="viewer-head">
|
||
<h2 id="quantity-title">철근재료표</h2>
|
||
<button id="quantity-export" class="btn-o" type="button">엑셀로 내보내기</button>
|
||
<button id="quantity-print" class="btn-o" type="button">인쇄</button>
|
||
</div>
|
||
<div id="quantity-body"></div>
|
||
</section>
|
||
</main>
|
||
<main class="grid rebar" id="view-rebar" hidden>
|
||
<aside class="panel piers" aria-labelledby="rebar-pier-title">
|
||
<p id="rebar-pier-title" class="lbl">교각 목록</p>
|
||
<div class="phead" aria-hidden="true"><span></span><span>교각</span><span>배근</span></div>
|
||
<ul id="rebar-pier-items" class="pier-items"></ul>
|
||
<div class="bulk">
|
||
<b id="rebar-bulk-count">선택 0기</b>
|
||
<span class="grow"></span>
|
||
<button id="rebar-bulk-copy" class="btn-o" type="button" disabled>속성 복사…</button>
|
||
</div>
|
||
<p id="rebar-member-title" class="lbl members-title">부재 · 배근 타입</p>
|
||
<ul id="rebar-tabs" class="members"></ul>
|
||
<p class="pnote">형상은 ② 형상계획 기준입니다. 형상이 바뀌면 "형상 바뀜"으로 표시합니다.</p>
|
||
</aside>
|
||
<div class="center-col">
|
||
<div class="viewer-slot" id="slot-rebar"></div>
|
||
<section class="panel viewer" aria-labelledby="rebar-title">
|
||
<div class="viewer-head"><h2 id="rebar-title">철근표</h2></div>
|
||
<p id="rebar-note" class="num"></p>
|
||
<div id="rebar-table"></div>
|
||
</section>
|
||
</div>
|
||
<aside class="panel results" aria-labelledby="rebar-issues-title">
|
||
<h2 id="rebar-issues-title">알림</h2>
|
||
<ul id="rebar-issues" class="issues"></ul>
|
||
<h2>검토 필요 (결정 대기)</h2>
|
||
<ul class="issues">
|
||
<li>Q-B5 B1·B3·B5·B7 다리 길이 (제안값 사용)</li>
|
||
<li>Q-B6 B2·B6 이음 위치와 길이</li>
|
||
<li>Q-C9 P4–B11 간섭: 무시로 결정, 문서 반영 필요</li>
|
||
</ul>
|
||
<section class="common" aria-labelledby="common-title">
|
||
<p id="common-title" class="lbl">공통 설정</p>
|
||
<label class="mat">fck (MPa) <input id="mat-fck" type="number" step="any" /></label>
|
||
<label class="mat">D 규격 강도 <select id="mat-grade-d"><option value="300" selected>SD300</option><option value="400">SD400</option><option value="500">SD500</option></select></label>
|
||
<label class="mat">H 규격 강도 <select id="mat-grade-h"><option value="300">SD300</option><option value="400" selected>SD400</option><option value="500">SD500</option></select></label>
|
||
<label class="mat">S 규격 강도 <select id="mat-grade-s"><option value="300">SD300</option><option value="400">SD400</option><option value="500" selected>SD500</option></select></label>
|
||
<label class="mat">재료표 할증 (%) · 기본 0 가정 <input id="mat-waste" type="number" step="0.5" min="0" /></label>
|
||
<p class="lbl">굽힘 내면반경 (× 철근 지름)</p>
|
||
<label class="mat">D16 이하 <input id="bend-small16" type="number" step="0.5" min="0.5" /></label>
|
||
<label class="mat">D19–D25 <input id="bend-main25" type="number" step="0.5" min="0.5" /></label>
|
||
<label class="mat">D29–D35 <input id="bend-main35" type="number" step="0.5" min="0.5" /></label>
|
||
<label class="mat">D38 이상 <input id="bend-main51" type="number" step="0.5" min="0.5" /></label>
|
||
<p id="mat-note" class="muted small"></p>
|
||
</section>
|
||
</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>
|
||
<div class="pv-scroll"><table id="pv-pier" class="grid-table"></table></div>
|
||
<h4>받침</h4>
|
||
<div class="pv-scroll">
|
||
<table id="pv-bearings" class="grid-table">
|
||
<thead><tr><th>교각</th><th>번호</th><th>x (m)</th><th>y (m)</th><th>z (m)</th><th>방위각</th><th>위치</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
<h4>IP</h4>
|
||
<div class="pv-scroll">
|
||
<table id="pv-ips" class="grid-table">
|
||
<thead><tr><th>교각</th><th>점</th><th>x (m)</th><th>y (m)</th><th>꺾임각</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
</div>
|
||
</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>
|
||
|
||
<dialog id="copy-dialog" aria-labelledby="cp-title">
|
||
<header class="dlg-head">
|
||
<h2 id="cp-title">속성 복사</h2>
|
||
<p class="muted small">한 교각의 설정을 여러 교각에 한 번에 적용합니다</p>
|
||
<button id="cp-close" class="btn small" type="button">닫기</button>
|
||
</header>
|
||
<div class="dlg-body">
|
||
<div class="dlg-col">
|
||
<section>
|
||
<h3>1 · 원본 교각</h3>
|
||
<p id="cp-source" class="num"></p>
|
||
<p class="muted small">현재 입력값 기준 (미반영 변경 포함)</p>
|
||
</section>
|
||
<section>
|
||
<h3>2 · 복사할 항목</h3>
|
||
<ul class="cp-items">
|
||
<li><span class="cp-group">코핑</span>
|
||
<label class="chk"><input type="checkbox" data-item="coping-width" />폭 B</label>
|
||
<label class="chk"><input type="checkbox" data-item="coping-length" />길이 L <span class="muted small">교각마다 다름 · 기본 해제</span></label>
|
||
</li>
|
||
<li><span class="cp-group">확대기초 · 말뚝</span>
|
||
<label class="chk"><input type="checkbox" data-item="pile-length" />말뚝 길이 <span class="muted small">지반마다 다름 · 기본 해제</span></label>
|
||
<label class="chk"><input type="checkbox" data-item="pile-rows" />열별 본수 <span class="muted small">기초 크기마다 다름 · 기본 해제</span></label>
|
||
<label class="chk disabled"><input type="checkbox" disabled />기초 형상 · 치수 · 버림 <span class="muted small">예정</span></label>
|
||
</li>
|
||
<li><span class="cp-group">기둥 · 받침 · 철근배근</span>
|
||
<label class="chk disabled"><input type="checkbox" disabled />기둥 단면 · 지름 D, 받침·받침블럭, 배근 <span class="muted small">예정</span></label>
|
||
</li>
|
||
</ul>
|
||
<p class="muted small">복사하지 않는 값: 좌표 · IP · 받침 EL · 코핑 상면 EL · 기초 하단 EL · 지반고 · 기둥 높이 · 말뚝 선단 EL · 계단 구간</p>
|
||
</section>
|
||
<section>
|
||
<h3>3 · 대상 교각</h3>
|
||
<label class="chk"><input id="cp-same-type" type="checkbox" checked />원본과 같은 형식만 보기</label>
|
||
<ul id="cp-targets" class="cp-targets"></ul>
|
||
</section>
|
||
</div>
|
||
<div class="dlg-col">
|
||
<section>
|
||
<h3>4 · 적용 미리보기</h3>
|
||
<table id="cp-preview" class="grid-table">
|
||
<thead><tr><th>대상</th><th>형식</th><th>바뀌는 값</th><th>건너뜀</th><th>내용</th></tr></thead>
|
||
<tbody></tbody>
|
||
</table>
|
||
<label class="chk"><input id="cp-regen" type="checkbox" checked />적용 후 대상 교각 형상까지 바로 다시 생성</label>
|
||
<p class="muted small">적용하면 대상 교각마다 "변경 n건"이 표시되고, 입력 수정 카드에서 항목별로 되돌릴 수 있습니다.</p>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
<footer class="dlg-foot">
|
||
<span id="cp-summary" class="muted"></span>
|
||
<button id="cp-cancel" class="btn" type="button">취소</button>
|
||
<button id="cp-apply" class="btn-p" type="button" disabled>대상 0기에 적용</button>
|
||
</footer>
|
||
</dialog>
|
||
|
||
<script type="module" src="/src/main.ts"></script>
|
||
</body>
|
||
</html>
|