fix: [rd] 방화셔터 3D 탭 컨트롤 패널 압축
- 부품 표시 2열 grid로 변경 (7항목이 4행으로 압축) - 배경색 선택 인라인 소형 버튼 (20px)으로 변경 - 조명 프리셋 한 줄 인라인 배치 - 토글 스위치 크기 축소 (2.5rem→2rem) - 슬라이더 라벨 인라인화, 전체 여백 축소
This commit is contained in:
김보곤
@@ -18,10 +18,10 @@
|
||||
.fs-label { display: block; color: #94a3b8; font-size: 0.75rem; font-weight: 700; margin-bottom: 0.25rem; }
|
||||
.fs-section { background: rgba(15,23,42,0.5); border-radius: 1.5rem; padding: 1.5rem; border: 1px solid #1e293b; }
|
||||
.fs-badge { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 0.75rem; font-size: 0.625rem; font-weight: 900; color: white; }
|
||||
.fs-toggle { position: relative; width: 2.5rem; height: 1.25rem; background: #334155; border-radius: 9999px; cursor: pointer; transition: background 0.2s; }
|
||||
.fs-toggle { position: relative; width: 2rem; height: 1rem; background: #334155; border-radius: 9999px; cursor: pointer; transition: background 0.2s; flex-shrink: 0; }
|
||||
.fs-toggle.active { background: #3b82f6; }
|
||||
.fs-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 1rem; height: 1rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
|
||||
.fs-toggle.active::after { transform: translateX(1.25rem); }
|
||||
.fs-toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 0.75rem; height: 0.75rem; background: white; border-radius: 9999px; transition: transform 0.2s; }
|
||||
.fs-toggle.active::after { transform: translateX(1rem); }
|
||||
.fs-select { width: 100%; background: rgba(2,6,23,0.8); border: 1px solid #334155; border-radius: 0.75rem; padding: 0.5rem 0.75rem; color: #f8fafc; font-size: 0.875rem; font-weight: 700; outline: none; }
|
||||
.fs-btn { padding: 0.5rem 1rem; border-radius: 0.75rem; font-size: 0.75rem; font-weight: 900; cursor: pointer; transition: all 0.2s; border: none; }
|
||||
.fs-btn-primary { background: #3b82f6; color: white; }
|
||||
@@ -267,50 +267,63 @@
|
||||
|
||||
<!-- ========== 3D TAB CONTROLS ========== -->
|
||||
<div id="ctrl3D" class="hidden">
|
||||
<section class="fs-section space-y-5">
|
||||
<h2 class="text-lg font-black text-white flex items-center gap-3">
|
||||
<span class="fs-badge bg-cyan-600">3D</span>
|
||||
3D 렌더링 설정
|
||||
<section class="fs-section space-y-3">
|
||||
<h2 class="text-sm font-black text-white flex items-center gap-2">
|
||||
<span class="fs-badge bg-cyan-600" style="width:1.25rem;height:1.25rem;font-size:0.5rem;">3D</span>
|
||||
3D 설정
|
||||
</h2>
|
||||
|
||||
<div>
|
||||
<label class="fs-label">셔터 개폐율 (<span id="shutterPosLabel">100</span>%)</label>
|
||||
<input type="range" id="shutterPos" min="0" max="100" value="100" class="w-full accent-blue-500" oninput="fs3dShutterPos(this.value)">
|
||||
<div class="flex justify-between text-[10px] text-slate-500 mt-1"><span>전개 0%</span><span>전폐 100%</span></div>
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="text-[11px] text-slate-400 font-bold">개폐율</label>
|
||||
<span id="shutterPosLabel" class="text-[11px] text-blue-400 font-black">100%</span>
|
||||
</div>
|
||||
<input type="range" id="shutterPos" min="0" max="100" value="100" class="w-full accent-blue-500" style="height:4px;" oninput="fs3dShutterPos(this.value)">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="fs-label">케이스 투명도 (<span id="opacityLabel">30</span>%)</label>
|
||||
<input type="range" id="caseOpacity" min="0" max="100" value="30" class="w-full accent-blue-500" oninput="fs3dOpacity(this.value)">
|
||||
<div class="flex items-center justify-between mb-1">
|
||||
<label class="text-[11px] text-slate-400 font-bold">투명도</label>
|
||||
<span id="opacityLabel" class="text-[11px] text-blue-400 font-black">30%</span>
|
||||
</div>
|
||||
<input type="range" id="caseOpacity" min="0" max="100" value="30" class="w-full accent-blue-500" style="height:4px;" oninput="fs3dOpacity(this.value)">
|
||||
</div>
|
||||
|
||||
<h2 class="text-sm font-black text-slate-400 mt-2">부품 표시</h2>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">셔터박스</span><div class="fs-toggle active" onclick="fsToggle3d(this,'case')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">샤프트</span><div class="fs-toggle active" onclick="fsToggle3d(this,'shaft')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">모터</span><div class="fs-toggle active" onclick="fsToggle3d(this,'motor')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">가이드레일</span><div class="fs-toggle active" onclick="fsToggle3d(this,'rails')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">슬랫 커튼</span><div class="fs-toggle active" onclick="fsToggle3d(this,'slats')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">하장바</span><div class="fs-toggle active" onclick="fsToggle3d(this,'bottomBar')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-xs text-slate-400">방화벽</span><div class="fs-toggle active" onclick="fsToggle3d(this,'wall')"></div></div>
|
||||
<div class="border-t border-slate-800 pt-2">
|
||||
<label class="text-[11px] text-slate-500 font-bold mb-1.5 block">부품</label>
|
||||
<div class="grid grid-cols-2 gap-x-3 gap-y-1">
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">박스</span><div class="fs-toggle active" onclick="fsToggle3d(this,'case')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">샤프트</span><div class="fs-toggle active" onclick="fsToggle3d(this,'shaft')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">모터</span><div class="fs-toggle active" onclick="fsToggle3d(this,'motor')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">레일</span><div class="fs-toggle active" onclick="fsToggle3d(this,'rails')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">슬랫</span><div class="fs-toggle active" onclick="fsToggle3d(this,'slats')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">하장바</span><div class="fs-toggle active" onclick="fsToggle3d(this,'bottomBar')"></div></div>
|
||||
<div class="flex items-center justify-between"><span class="text-[11px] text-slate-400">벽</span><div class="fs-toggle active" onclick="fsToggle3d(this,'wall')"></div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2 class="text-sm font-black text-slate-400 mt-2">조명 프리셋</h2>
|
||||
<div class="grid grid-cols-3 gap-2">
|
||||
<button class="fs-btn fs-btn-ghost active" data-light="default" onclick="fs3dLight('default')">기본</button>
|
||||
<button class="fs-btn fs-btn-ghost" data-light="studio" onclick="fs3dLight('studio')">스튜디오</button>
|
||||
<button class="fs-btn fs-btn-ghost" data-light="outdoor" onclick="fs3dLight('outdoor')">야외</button>
|
||||
<div class="border-t border-slate-800 pt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-[11px] text-slate-500 font-bold shrink-0">조명</label>
|
||||
<div class="flex gap-1 flex-1">
|
||||
<button class="fs-btn fs-btn-ghost active flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="default" onclick="fs3dLight('default')">기본</button>
|
||||
<button class="fs-btn fs-btn-ghost flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="studio" onclick="fs3dLight('studio')">스튜디오</button>
|
||||
<button class="fs-btn fs-btn-ghost flex-1" style="padding:0.25rem 0.5rem;font-size:0.625rem;" data-light="outdoor" onclick="fs3dLight('outdoor')">야외</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="fs-label">배경색</label>
|
||||
<div class="grid grid-cols-6 gap-1.5 mt-1">
|
||||
<button onclick="fs3dBg('#ffffff')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#ffffff"></button>
|
||||
<button onclick="fs3dBg('#f0f0f0')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#f0f0f0"></button>
|
||||
<button onclick="fs3dBg('#808080')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#808080"></button>
|
||||
<button onclick="fs3dBg('#303030')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#303030"></button>
|
||||
<button onclick="fs3dBg('#1a1a2e')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#1a1a2e"></button>
|
||||
<button onclick="fs3dBg('#000000')" class="w-full aspect-square rounded border-2 border-slate-600 hover:border-blue-400" style="background:#000000"></button>
|
||||
<div class="border-t border-slate-800 pt-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<label class="text-[11px] text-slate-500 font-bold shrink-0">배경</label>
|
||||
<div class="flex gap-1 flex-1">
|
||||
<button onclick="fs3dBg('#ffffff')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#fff"></button>
|
||||
<button onclick="fs3dBg('#f0f0f0')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#f0f0f0"></button>
|
||||
<button onclick="fs3dBg('#808080')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#808080"></button>
|
||||
<button onclick="fs3dBg('#303030')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#303030"></button>
|
||||
<button onclick="fs3dBg('#1a1a2e')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#1a1a2e"></button>
|
||||
<button onclick="fs3dBg('#000000')" class="w-5 h-5 rounded border border-slate-600 hover:border-blue-400 shrink-0" style="background:#000"></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@@ -1126,12 +1139,12 @@ function fs3dBuild() {
|
||||
// 3D Controls
|
||||
window.fs3dShutterPos = function(v) {
|
||||
S.td.shutterPos = Number(v);
|
||||
$('shutterPosLabel').textContent = v;
|
||||
$('shutterPosLabel').textContent = v + '%';
|
||||
fs3dBuild();
|
||||
};
|
||||
window.fs3dOpacity = function(v) {
|
||||
S.td.caseOpacity = Number(v) / 100;
|
||||
$('opacityLabel').textContent = v;
|
||||
$('opacityLabel').textContent = v + '%';
|
||||
if (meshes.case) meshes.case.material.opacity = S.td.caseOpacity;
|
||||
};
|
||||
window.fsToggle3d = function(el, key) {
|
||||
|
||||
Reference in New Issue
Block a user