우측 패널 재설계 - 명확한 정보 구성
개선사항: - 패널 너비 축소 (450→350px) - 명확한 섹션 구분 - 부재 구성 상세 정보 추가 - 조작 가이드 명시화 - 색상 범례 개선 역할: • 📈 부재 수량: 전체 통계 • 🏗️ 부재 구성: 각 타입별 상세 정보 • 🎨 범례: 색상 의미 • ⌨️ 조작: 마우스/화면 사용 방법 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
Claude Haiku committed
1 parent
625b8585aa
commit
4e7c4e2972
1 file changed
+95
-41
+95
-41
@@ -31,32 +31,43 @@
|
||||
}
|
||||
|
||||
.panel {
|
||||
width: 450px;
|
||||
width: 350px;
|
||||
background: #1a1f2e;
|
||||
padding: 25px;
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
border-left: 1px solid #2d3748;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.panel h2 {
|
||||
color: #4caf50;
|
||||
font-size: 18px;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 2px solid #4caf50;
|
||||
color: #10b981;
|
||||
font-size: 14px;
|
||||
margin-bottom: 15px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 2px solid #10b981;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.panel h3 {
|
||||
color: #cbd5e0;
|
||||
font-size: 11px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
background: #10b981;
|
||||
color: #fff;
|
||||
padding: 6px 14px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
color: #1a1f2e;
|
||||
padding: 4px 10px;
|
||||
border-radius: 16px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 15px;
|
||||
margin-bottom: 12px;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.loading {
|
||||
@@ -190,47 +201,90 @@
|
||||
<div class="container">
|
||||
<canvas id="canvas"></canvas>
|
||||
<div class="panel">
|
||||
<h2>🏗️ 가시설 3D</h2>
|
||||
<h2>📊 모델 정보</h2>
|
||||
|
||||
<span class="badge">가시설 계획도 3D</span>
|
||||
|
||||
<div id="loadingMsg" class="loading">
|
||||
⏳ 로드 중...
|
||||
⏳ 모델 로드 중...
|
||||
</div>
|
||||
|
||||
<!-- 통계 섹션 -->
|
||||
<div class="section" style="margin-top: 10px;">
|
||||
<h3>📈 부재 수량</h3>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">총 부재:</span>
|
||||
<span class="stat-value" id="totalParts">-</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">총 부피:</span>
|
||||
<span class="stat-value" id="totalVolume">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 부재 구성 섹션 -->
|
||||
<div class="section">
|
||||
<h3>통계</h3>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">부재:</span>
|
||||
<span class="stat-value" id="totalParts">562개</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<span class="stat-label">부피:</span>
|
||||
<span class="stat-value" id="totalVolume">214,872 m³</span>
|
||||
<h3>🏗️ 부재 구성</h3>
|
||||
<div style="font-size: 11px; line-height: 1.6; color: #cbd5e0;">
|
||||
<div style="margin-bottom: 8px;">
|
||||
<strong style="color: #ff6b6b;">가시설4</strong> (H-빔)<br>
|
||||
<span style="color: #a0aec0;">52개</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 8px;">
|
||||
<strong style="color: #7ed321;">h-pile2</strong> (기초파일)<br>
|
||||
<span style="color: #a0aec0;">244개, H-400×400×8000mm</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 8px;">
|
||||
<strong style="color: #4a90e2;">토류판</strong> (흙막이판)<br>
|
||||
<span style="color: #a0aec0;">240개, PL-700×360×14mm</span>
|
||||
</div>
|
||||
<div style="margin-bottom: 8px;">
|
||||
<strong style="color: #7ed321;">H-PILE</strong> (파일)<br>
|
||||
<span style="color: #a0aec0;">26개</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong style="color: #f5a623;">스터럿</strong> (버팀목)<br>
|
||||
<span style="color: #a0aec0;">26개</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="legend">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #ff6b6b;"></div>
|
||||
<span>H-빔</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #7ed321;"></div>
|
||||
<span>파일</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #4a90e2;"></div>
|
||||
<span>판재</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #f5a623;"></div>
|
||||
<span>버팀목</span>
|
||||
<!-- 범례 섹션 -->
|
||||
<div class="section">
|
||||
<h3>🎨 범례</h3>
|
||||
<div class="legend" style="grid-template-columns: 1fr 1fr; gap: 8px;">
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #ff6b6b;"></div>
|
||||
<span>H-빔</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #7ed321;"></div>
|
||||
<span>파일</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #4a90e2;"></div>
|
||||
<span>판재</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<div class="legend-color" style="background: #f5a623;"></div>
|
||||
<span>버팀목</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 조작 가이드 -->
|
||||
<div class="controls">
|
||||
<strong>조작</strong><br>
|
||||
드래그: 회전<br>
|
||||
휠: 확대/축소
|
||||
<h3>⌨️ 조작</h3>
|
||||
<div style="font-size: 11px; color: #cbd5e0; line-height: 1.8;">
|
||||
<strong>마우스:</strong><br>
|
||||
• 좌클릭 드래그 = 회전<br>
|
||||
• 휠 스크롤 = 확대/축소<br>
|
||||
<br>
|
||||
<strong>화면:</strong><br>
|
||||
• 3D 배치 확인<br>
|
||||
• 부재 형상 검증<br>
|
||||
• 구조 파악
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user