65 lines
9.6 KiB
HTML
65 lines
9.6 KiB
HTML
<!doctype html>
|
||
<html lang="ko">
|
||
<head>
|
||
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="theme-color" content="#f5f7f3">
|
||
<meta name="description" content="로컬 SWMM 입력 제원으로 살펴보는 화천군 맨홀 및 우수관로 3D 뷰어">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' blob: data:; connect-src 'self'; object-src 'none'; base-uri 'none'">
|
||
<title>화천군 맨홀 및 우수관로 3D 뷰어</title>
|
||
<link rel="icon" href="data:,">
|
||
<link rel="stylesheet" href="styles.css"><link rel="stylesheet" href="studio-nav.css">
|
||
<script type="module" src="app.js"></script>
|
||
<link rel="stylesheet" href="viewer-readability.css">
|
||
</head>
|
||
<body class="network-page">
|
||
<header class="topbar"><a class="brand" href="./"><span class="brand-icon" aria-hidden="true">⌘</span><span>HWACHEON<small>STORMWATER NETWORK</small></span></a><div class="title-block"><h1>화천군 관망도</h1><span>SWMM 입력 제원 · 3D 검토</span></div><span class="local-badge"><i></i> 입력 자료 기반</span><nav class="panel-actions" aria-label="화면 패널"><button id="toggle-controls" aria-controls="controls-panel" aria-expanded="true">시설·점검</button><button id="toggle-inspector" aria-controls="inspector-panel" aria-expanded="true">시설 제원</button></nav></header>
|
||
<button id="panel-backdrop" class="panel-backdrop" aria-label="열린 패널 닫기" hidden></button>
|
||
<main class="app-grid">
|
||
<aside class="controls" id="controls-panel" aria-label="관망 제어" tabindex="-1">
|
||
<div class="section-kicker">NETWORK EXPLORER <span>01</span></div>
|
||
<h2>시설 탐색과 점검</h2>
|
||
<p class="subtle">ID로 찾고, 연결과 제원을 확인하세요.</p>
|
||
<div class="summary-cards"><div><span>접합부</span><strong id="node-count">—</strong></div><div><span>관로</span><strong id="pipe-count">—</strong></div></div>
|
||
<section><div class="section-heading"><h3>시설 찾기</h3><span class="small">ID 검색</span></div><label class="search-wrap"><span aria-hidden="true">⌕</span><input id="search" type="search" placeholder="MH3, UHR1-0249…" autocomplete="off" aria-label="시설 ID 검색"></label><div id="search-status" class="small" aria-live="polite"></div><div id="search-results" class="search-results" aria-label="검색 결과"></div></section>
|
||
<section><div class="section-heading"><h3>시설 표시</h3><button id="show-all" class="text-button">모두 표시</button></div><div class="layer-list">
|
||
<label><span><i class="legend-dot junction"></i>맨홀 <small id="layer-junction-count"></small></span><input id="show-junction" data-layer="junction" type="checkbox" checked></label>
|
||
<label><span><i class="legend-dot conduit"></i>관로 <small id="layer-conduit-count"></small></span><input id="show-conduit" data-layer="conduit" type="checkbox" checked></label>
|
||
<label><span><i class="legend-dot outfall"></i>방류구 <small id="layer-outfall-count"></small></span><input id="show-outfall" data-layer="outfall" type="checkbox" checked></label>
|
||
<label><span><i class="legend-dot other"></i>저류·펌프·위어 <small id="layer-other-count"></small></span><input id="show-other" data-layer="other" type="checkbox" checked></label>
|
||
</div></section>
|
||
<section class="audit-highlight-controls" aria-label="점검 대상 강조">
|
||
<label class="toggle-label"><span>점검 대상 강조<small id="audit-highlight-count">점검 목록 확인 중</small></span><input id="audit-highlight" type="checkbox"></label>
|
||
<label class="audit-steady-label"><input id="audit-steady" type="checkbox"> 고정 강조 (깜빡임 없이)</label>
|
||
<p class="fine-print" id="audit-highlight-note">빨간색 1초 · 원래 색 1초 반복<br>오류 확정이 아닌 점검 필요 표시입니다.</p>
|
||
<button id="audit-unplaced" class="text-button">위치 표시 불가 시설 확인</button>
|
||
</section>
|
||
<section><div class="section-heading"><h3>높이와 형상</h3><button id="actual-scale" class="text-button">실제 제원 비율</button></div>
|
||
<label class="range-heading" for="height-scale">표고·높이 배율 <output id="height-output">×3</output></label><input id="height-scale" type="range" min="1" max="10" step="0.5" value="3"><div class="range-ends"><span>×1</span><span>×10</span></div>
|
||
<label class="range-heading" for="size-scale">관로 단면·맨홀 폭 배율 <output id="size-output">×3</output></label><input id="size-scale" type="range" min="1" max="8" step="0.5" value="3"><div class="range-ends"><span>×1</span><span>×8</span></div>
|
||
<label class="toggle-label"><span>연결부 내부 보기<small>맨홀 앞쪽과 관로 상부 열기</small></span><input id="section-mode" type="checkbox"></label>
|
||
<p class="fine-print">맨홀 내경 1.2m는 표현용 가정입니다.<br>관로 수직 단면에는 두 배율을 곱해 적용합니다.<br>제원 패널에는 입력 원값을 표시합니다.</p>
|
||
</section>
|
||
<button id="open-audit" class="audit-button"><span><span class="audit-icon">!</span> 데이터 점검</span><strong id="audit-count">—</strong><span>↗</span></button>
|
||
<p class="source-label">SOURCE · <span id="source-name">HC_A.inp</span><br>수리 해석 없이 입력 제원만 표시합니다.</p>
|
||
</aside>
|
||
<section class="viewer" aria-label="인터랙티브 3D 관망">
|
||
<canvas id="scene" tabindex="0" aria-label="관망 3D 화면. 드래그 회전, 휠 확대, Shift 또는 우클릭 드래그 이동. 시설을 클릭하면 제원을 표시합니다."></canvas>
|
||
<div class="viewport-heading"><div><span class="section-kicker">HWACHEON / DRAINAGE SYSTEM</span><h2 id="view-name">전체 관망</h2><p id="visible-count">데이터를 불러오는 중…</p></div><span id="view-badge" class="view-badge">입체 보기</span></div>
|
||
<div class="scale-badges" aria-live="polite"><span id="height-badge">높이 ×3</span><span id="size-badge">단면·맨홀 폭 ×3</span><span id="section-badge" hidden>내부 보기</span></div>
|
||
<div class="coordinate-note">좌표계 미확인 <span>·</span> XY 1단위 = 1m 가정</div>
|
||
<div id="loading" class="scene-message" role="status">관망을 준비하고 있습니다…</div>
|
||
<div id="fatal-error" class="scene-message error" role="alert" hidden></div>
|
||
<div class="legend-panel"><span class="legend-title">단면과 제원</span><div><i class="line-key circular"></i>원형 <span id="circle-count"></span></div><div><i class="line-key rectangular"></i>사각 폐합 <span id="rect-count"></span></div><small>관이 클수록 실제 입력 단면이 큽니다.<br>전체 보기에서는 중심선·최소 5px 위치기호 병기.</small></div>
|
||
<div class="axes" aria-label="원본 좌표의 X, Y와 표고 Z"><canvas id="axes" width="110" height="100"></canvas><span>INPUT COORDINATES</span></div>
|
||
<div class="view-toolbar" aria-label="시점 제어"><button id="fit" title="표시 중인 전체 관망 맞추기 (F)">⛶ <span>전체 보기</span></button><i></i><button data-view="iso" aria-pressed="true">입체</button><button data-view="plan" aria-pressed="false">평면</button><button data-view="side" aria-pressed="false">측면</button><i></i><button id="reset" title="배율·레이어·시점 초기화 (R)">↺ <span>초기화</span></button></div>
|
||
<div class="viewer-footer"><span>드래그 회전 <i>·</i> 휠 확대 <i>·</i> Shift / 우클릭 드래그 이동</span><button id="open-help" class="text-button">조작 안내 ⓘ</button></div>
|
||
<div class="datum-note">기준 그리드 · 지형 아님</div>
|
||
</section>
|
||
<aside class="inspector" id="inspector-panel" aria-label="시설 제원" tabindex="-1"><div class="section-kicker">시설 제원 <span>INSPECTOR</span></div><div id="details"></div></aside>
|
||
</main>
|
||
<footer class="statusbar"><span><i class="status-light"></i> <span id="render-status">준비 중</span></span><span id="model-status">단위 · m / XY 단위는 가정</span><span>수위·유량·실제 흐름 미해석</span></footer>
|
||
<div id="toast" role="status" aria-live="polite"></div>
|
||
<dialog id="audit-dialog"><div class="dialog-heading"><div><span class="section-kicker">DATA AUDIT</span><h2>입력 자료를 먼저 확인하세요.</h2></div><button class="close-dialog" aria-label="데이터 점검 닫기">✕</button></div><div id="audit-summary"></div><label class="audit-filter-label">점검 항목 <select id="audit-filter"><option value="placement">배치 누락·좌표 겹침</option><option value="length_mismatch">입력 길이와 좌표 거리 차이</option><option value="adverse_slope">입력 방향 기준 역경사</option><option value="all">전체 점검</option></select></label><div id="audit-list" class="audit-list"></div><p class="fine-print">거리 차이는 XY 1단위=1m 가정에 의존합니다. 5%는 검토용 분류 기준이며 오류 확정 기준이 아닙니다.</p></dialog>
|
||
<dialog id="help-dialog"><div class="dialog-heading"><h2>관망 둘러보기</h2><button class="close-dialog" aria-label="조작 안내 닫기">✕</button></div><dl class="help-grid"><dt>회전</dt><dd>왼쪽 버튼 드래그 / 방향키</dd><dt>확대·축소</dt><dd>마우스 휠 / +, − / 두 손가락</dd><dt>이동</dt><dd>Shift + 드래그 / 우클릭 드래그 / 두 손가락 이동</dd><dt>전체 맞추기</dt><dd>전체 보기 / F</dd><dt>시점</dt><dd>입체·평면·측면 버튼 / 1·2·3</dd><dt>초기화</dt><dd>배율·표시·선택·시점 모두 초기화 / R</dd><dt>선택·연결 확인</dt><dd>시설 클릭 또는 ID 검색 → 시설로 이동 → 내부 보기</dd></dl><p class="notice">관로 상부와 맨홀 앞쪽을 열어 연결 높이를 확인할 수 있습니다. 연결부는 입력 제원에 따른 배치이며 실제 시공 상세가 아닙니다.</p></dialog>
|
||
</body></html>
|