136 lines
18 KiB
HTML
136 lines
18 KiB
HTML
<style>
|
|
#eg-preview { width:100%; }
|
|
#eg-preview .eg-app { --eg-bg:light-dark(#ffffff,#202329); --eg-rail:light-dark(#f5f7fa,#191d23); --eg-text:light-dark(#202c3b,#eff3f8); --eg-sub:light-dark(#637084,#aeb9c9); --eg-line:light-dark(#e1e6ed,#39414d); --eg-accent:light-dark(#2455d6,#96b5ff); --eg-on:light-dark(#ffffff,#14254d); --eg-soft:light-dark(#eef3ff,#27344d); --eg-green:light-dark(#257055,#85d7b6); color:var(--eg-text); background:var(--eg-bg); border:1px solid var(--eg-line); border-radius:12px; font:14px/1.6 'Segoe UI','Malgun Gothic',sans-serif; overflow-wrap:anywhere; box-shadow:0 8px 26px light-dark(#1324450c,#00000022); }
|
|
#eg-preview .eg-app * { box-sizing:border-box; }
|
|
#eg-preview .eg-titlebar { display:flex; align-items:center; gap:10px; min-height:52px; padding:12px 20px; border-bottom:1px solid var(--eg-line); padding-right:100px; }
|
|
#eg-preview .eg-mark { display:inline-grid; place-items:center; background:var(--eg-accent); color:var(--eg-on); width:27px; height:27px; border-radius:7px; font-size:15px; font-weight:600; flex-shrink:0; }
|
|
#eg-preview .eg-name { font-weight:600; letter-spacing:-.3px; }
|
|
#eg-preview .eg-demo { color:var(--eg-sub); font-size:11px; margin-left:4px; }
|
|
#eg-preview .eg-layout { display:grid; grid-template-columns:174px minmax(0,1fr); min-height:508px; }
|
|
#eg-preview .eg-side { background:var(--eg-rail); border-right:1px solid var(--eg-line); padding:28px 22px; display:flex; flex-direction:column; }
|
|
#eg-preview .eg-eyebrow { color:var(--eg-sub); font-size:11px; letter-spacing:1.6px; font-weight:600; }
|
|
#eg-preview .eg-side h2 { font-size:20px; margin:7px 0 28px; font-weight:600; letter-spacing:-.7px; }
|
|
#eg-preview .eg-steps { list-style:none; padding:0; margin:0; display:grid; gap:25px; }
|
|
#eg-preview .eg-steps li { display:flex; gap:10px; align-items:center; color:var(--eg-sub); font-size:12px; }
|
|
#eg-preview .eg-dot { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; border:1px solid var(--eg-line); flex-shrink:0; font-size:11px; }
|
|
#eg-preview .eg-steps li[aria-current=step] { color:var(--eg-accent); font-weight:600; }
|
|
#eg-preview .eg-steps li[aria-current=step] .eg-dot { background:var(--eg-accent); color:var(--eg-on); border-color:transparent; }
|
|
#eg-preview .eg-steps li.eg-past .eg-dot { color:var(--eg-green); background:var(--eg-bg); }
|
|
#eg-preview .eg-side-note { margin-top:auto; padding-top:32px; font-size:11px; color:var(--eg-sub); }
|
|
#eg-preview .eg-main { display:flex; flex-direction:column; min-width:0; }
|
|
#eg-preview .eg-content { padding:24px 30px 20px; flex:1; }
|
|
#eg-preview .eg-mode { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:23px; }
|
|
#eg-preview .eg-mode button { background:var(--eg-rail); color:var(--eg-sub); border:0; padding:6px 12px; border-radius:5px; font:inherit; font-size:12px; }
|
|
#eg-preview .eg-mode button[aria-pressed=true] { background:var(--eg-soft); color:var(--eg-accent); font-weight:600; }
|
|
#eg-preview .eg-mode button:disabled { opacity:.6; }
|
|
#eg-preview .eg-heading { font-size:25px; line-height:1.4; font-weight:600; letter-spacing:-1px; margin:0 0 8px; }
|
|
#eg-preview .eg-description { color:var(--eg-sub); font-size:13px; margin:0 0 22px; }
|
|
#eg-preview .eg-box { border:1px solid var(--eg-line); border-radius:8px; padding:15px 17px; margin:14px 0; background:var(--eg-bg); }
|
|
#eg-preview .eg-box-top { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
|
|
#eg-preview .eg-box strong { font-weight:600; }
|
|
#eg-preview .eg-badge { font-size:11px; color:var(--eg-green); background:var(--eg-rail); padding:2px 8px; border-radius:4px; }
|
|
#eg-preview .eg-path { color:var(--eg-sub); font:12px/1.7 'Segoe UI','Malgun Gothic',sans-serif; overflow-wrap:anywhere; }
|
|
#eg-preview .eg-small { font-size:12px; color:var(--eg-sub); }
|
|
#eg-preview .eg-note { display:flex; gap:10px; padding:12px 14px; background:var(--eg-soft); color:var(--eg-accent); border-radius:7px; font-size:12px; margin-top:16px; }
|
|
#eg-preview .eg-note svg { flex-shrink:0; margin-top:2px; }
|
|
#eg-preview .eg-checks { list-style:none; padding:0; margin:12px 0 0; }
|
|
#eg-preview .eg-checks li { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid var(--eg-line); font-size:12px; }
|
|
#eg-preview .eg-checks li:last-child { border:0; }
|
|
#eg-preview .eg-status { color:var(--eg-green); font-size:11px; white-space:nowrap; }
|
|
#eg-preview .eg-footer { border-top:1px solid var(--eg-line); padding:15px 22px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
|
|
#eg-preview .eg-actions { display:flex; gap:8px; flex-wrap:wrap; margin-left:auto; }
|
|
#eg-preview .eg-button { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 17px; border:1px solid var(--eg-line); background:var(--eg-bg); color:var(--eg-text); border-radius:6px; font:500 13px/1.5 'Segoe UI','Malgun Gothic',sans-serif; }
|
|
#eg-preview .eg-primary { border-color:transparent; background:var(--eg-accent); color:var(--eg-on); }
|
|
#eg-preview .eg-quiet { border-color:transparent; color:var(--eg-sub); padding-left:0; }
|
|
#eg-preview .eg-field { display:block; font-size:12px; color:var(--eg-sub); }
|
|
#eg-preview .eg-field input { display:block; width:100%; padding:10px; margin-top:6px; border:1px solid var(--eg-line); border-radius:5px; font:inherit; color:var(--eg-text); background:var(--eg-bg); }
|
|
#eg-preview .eg-agree { display:flex; align-items:flex-start; gap:8px; font-size:12px; margin-top:18px; }
|
|
#eg-preview input[type=checkbox] { accent-color:var(--eg-accent); margin:4px 0 0; }
|
|
#eg-preview .eg-meter { height:7px; border-radius:4px; background:var(--eg-rail); margin:17px 0 7px; overflow:hidden; }
|
|
#eg-preview .eg-meter span { display:block; height:100%; background:var(--eg-accent); }
|
|
#eg-preview .eg-progress-label { display:flex; justify-content:space-between; gap:10px; font-size:12px; color:var(--eg-sub); }
|
|
#eg-preview .eg-success { width:42px; height:42px; display:grid; place-items:center; color:var(--eg-green); background:var(--eg-rail); border-radius:50%; margin-bottom:18px; font-size:23px; }
|
|
#eg-preview .eg-alert { color:light-dark(#a43c27,#ffad98); font-size:12px; }
|
|
#eg-preview .eg-log { font-size:11px; color:var(--eg-sub); margin-top:13px; }
|
|
#eg-preview .eg-log summary { width:fit-content; }
|
|
#eg-preview .eg-log p { margin:8px 0; }
|
|
#eg-preview .eg-compact .eg-layout { display:flex; min-height:508px; }
|
|
#eg-preview .eg-compact .eg-main { width:100%; }
|
|
#eg-preview .eg-compact .eg-side { display:none; }
|
|
#eg-preview .eg-compact .eg-content { width:100%; max-width:530px; margin:auto; padding-top:25px; }
|
|
#eg-preview .eg-compact .eg-heading { font-size:29px; }
|
|
#eg-preview .eg-compact .eg-mode { margin-bottom:19px; }
|
|
#eg-preview .eg-compact .eg-footer { padding-left:30px; padding-right:30px; }
|
|
#eg-preview .eg-compact .eg-box { background:var(--eg-rail); border-color:transparent; }
|
|
#eg-preview .eg-compact .eg-badge { background:var(--eg-bg); }
|
|
#eg-preview .eg-mini-step { display:none; font-size:11px; color:var(--eg-accent); margin:0 0 7px; letter-spacing:.8px; }
|
|
#eg-preview .eg-compact .eg-mini-step { display:block; }
|
|
@media(max-width:580px) { #eg-preview .eg-layout { grid-template-columns:1fr; } #eg-preview .eg-side { padding:14px 18px; border-right:0; border-bottom:1px solid var(--eg-line); } #eg-preview .eg-side h2,#eg-preview .eg-side .eg-eyebrow,#eg-preview .eg-side-note { display:none; } #eg-preview .eg-steps { display:flex; justify-content:space-between; gap:7px; } #eg-preview .eg-steps li { gap:5px; font-size:11px; flex-direction:column; } #eg-preview .eg-content,#eg-preview .eg-compact .eg-content { padding:22px 18px; } #eg-preview .eg-heading,#eg-preview .eg-compact .eg-heading { font-size:23px; } #eg-preview .eg-footer,#eg-preview .eg-compact .eg-footer { padding:14px 18px; } #eg-preview .eg-titlebar { padding-left:16px; } }
|
|
@media(pointer:coarse) { #eg-preview button { min-height:44px; } #eg-preview .eg-field input { font-size:16px; } #eg-preview .eg-agree { min-height:44px; align-items:center; } }
|
|
</style>
|
|
<div id="eg-preview" class="viz-carousel viz-dotted-background" aria-label="EG-BIM 설치 화면 디자인" data-previous-label="이전 시안" data-next-label="다음 시안">
|
|
<section data-variant="단계형" aria-label="단계형 설치 디자인"><div id="eg-guided" class="eg-app" aria-label="단계형 설치 화면"></div></section>
|
|
<section data-variant="집중형" aria-label="집중형 설치 디자인" hidden><div id="eg-focused" class="eg-app eg-compact" aria-label="집중형 설치 화면"></div></section>
|
|
</div>
|
|
<script>
|
|
(() => {
|
|
const root = document.getElementById('eg-preview');
|
|
const definitions = [{id:'eg-guided', label:'단계형'}, {id:'eg-focused', label:'집중형'}];
|
|
const states = {};
|
|
const defaultPath = 'C:\\Program Files\\Baron\\EG-BIM';
|
|
const existingPath = 'D:\\Baron\\EG-BIM';
|
|
const escape = value => String(value).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]));
|
|
const saved = window.openai?.widgetState?.privateContent?.installers || {};
|
|
const normalize = value => ({step:Number.isInteger(value?.step) && value.step>=0 && value.step<=3 ? value.step : 0, mode:value?.mode==='new'?'new':'upgrade', path:typeof value?.path==='string'?value.path:defaultPath, agreed:!!value?.agreed, launch:value?.launch!==false, error:false, finished:false});
|
|
definitions.forEach(d => states[d.id]=normalize(saved[d.id]));
|
|
function persist(id) {
|
|
const s=states[id];
|
|
window.openai?.setWidgetState?.({modelContent:{design:definitions.find(d=>d.id===id).label,mode:s.mode,screen:['설치 준비','설정 보호','설치 진행','완료'][s.step]},privateContent:{installers:states}})?.catch(()=>{});
|
|
}
|
|
function row(label,status='확인 완료') { return `<li><span>${label}</span><span class="eg-status">${status}</span></li>`; }
|
|
function content(s) {
|
|
const upgrade=s.mode==='upgrade';
|
|
if(s.step===0) return `<h1 class="eg-heading">${upgrade?'익숙한 작업 환경, 그대로.':'새로운 설계의 시작.'}</h1><p class="eg-description">${upgrade?'설정과 작업 환경을 보관한 뒤 EG-BIM을 업데이트합니다.':'EG-BIM을 설치하고 설계 작업을 시작하세요.'}</p>
|
|
${upgrade?`<div class="eg-box"><div class="eg-box-top"><strong>기존 EG-BIM을 찾았습니다</strong><span class="eg-badge">설치 경로 유지</span></div><div class="eg-path">${escape(existingPath)}</div><div class="eg-small">사용자 지정 설치 경로를 그대로 사용합니다.</div></div>`:`<div class="eg-box"><label class="eg-field">설치 위치<input data-path aria-label="설치 위치" value="${escape(s.path)}"></label><div class="eg-small">프로그램과 사용자 설정은 별도로 보관됩니다.</div></div>`}
|
|
<ul class="eg-checks">${row('Windows 환경 및 필수 구성요소')}${row('설치 파일 · 서명 · 무결성')}${row('저장 공간 및 실행 중인 프로그램')}</ul>
|
|
${upgrade?'<div class="eg-note"><i data-lucide="shield-check" aria-hidden="true"></i><span>다음 단계에서 사용자 설정과 추가 리소스를 백업합니다.</span></div>':'<label class="eg-agree"><input type="checkbox" data-agree '+(s.agreed?'checked':'')+'> <span>사용권 계약에 동의합니다. <span class="eg-small">(시안용 항목)</span></span></label><details class="eg-log"><summary class="cursor-interaction">사용권 계약 미리보기</summary><p>실제 설치 화면에는 승인된 사용권 계약 전문이 표시됩니다.</p></details>'}
|
|
${s.error?'<p class="eg-alert" role="alert">설치 위치를 입력하고 사용권 계약에 동의해 주세요.</p>':''}`;
|
|
if(s.step===1) return `<h1 class="eg-heading">${upgrade?'작업 환경을 안전하게 보관합니다.':'설치 준비가 끝났습니다.'}</h1><p class="eg-description">${upgrade?'백업 파일 확인이 끝난 후에만 기존 제품을 변경합니다.':'아래 구성을 확인하고 설치를 진행하세요.'}</p>
|
|
<div class="eg-box"><div class="eg-box-top"><strong>${upgrade?'사용자 설정 백업':'설치 구성 확인'}</strong><span class="eg-badge">${upgrade?'검증 완료':'준비 완료'}</span></div><ul class="eg-checks">${upgrade?row('환경설정 · 개인 도구 모음','보관됨')+row('CUI · 사용자 추가 리소스','보관됨')+row('백업 파일 읽기 및 무결성','정상'):row('EG-BIM 프로그램 파일','전체 설치')+row('필수 런타임','필요 시 설치')+row('설치 범위','이 PC의 모든 사용자')}</ul></div>
|
|
<div class="eg-small">${upgrade?'백업 위치 · 제거 대상과 분리':'설치 위치'}</div><div class="eg-path">${escape(upgrade?'D:\\EG-BIM-Backup\\migration-demo':s.path)}</div>
|
|
<div class="eg-note"><i data-lucide="shield-check" aria-hidden="true"></i><span>${upgrade?'설정 복원과 설치 후 확인이 끝날 때까지 백업을 유지합니다.':'설치에 필요한 경우 Windows에서 관리자 권한을 요청합니다.'}</span></div>`;
|
|
if(s.step===2) return `<h1 class="eg-heading">EG-BIM을 설치하고 있습니다.</h1><p class="eg-description">${upgrade?'프로그램을 업데이트한 뒤 호환되는 설정을 복원합니다.':'프로그램 파일과 필요한 구성요소를 설치합니다.'}</p><div class="eg-meter" role="progressbar" aria-label="설치 진행률 예시" aria-valuenow="64" aria-valuemin="0" aria-valuemax="100"><span style="width:64%"></span></div><div class="eg-progress-label"><span>프로그램 파일 설치 중</span><span>64%</span></div><ul class="eg-checks">${row('설치 환경 및 패키지 확인','완료')}${row(upgrade?'사용자 설정 백업':'필수 런타임 확인','완료')}${row('EG-BIM 프로그램 설치','진행 중')}${row(upgrade?'설정 복원 및 설치 상태 확인':'설치 상태 확인','대기')}</ul><details class="eg-log"><summary class="cursor-interaction">진행 내역</summary><p>환경 검사 완료 → 파일 검증 완료 → ${upgrade?'백업 검증 완료 → ':''}프로그램 설치 중<br>화면 검토를 위한 예시 상태입니다.</p></details><div class="eg-note"><i data-lucide="info" aria-hidden="true"></i><span>설치가 끝날 때까지 이 창을 유지해 주세요.</span></div>`;
|
|
return `<div class="eg-success" aria-hidden="true">✓</div><h1 class="eg-heading">설치가 완료되었습니다.</h1><p class="eg-description">${upgrade?'사용자 설정을 복원했습니다. 이어서 작업을 시작하세요.':'EG-BIM에서 첫 번째 프로젝트를 시작해 보세요.'}</p><div class="eg-box"><ul class="eg-checks">${row('프로그램 설치','완료')}${upgrade?row('호환되는 사용자 설정 복원','완료'):''}${row('설치 상태 확인','완료')}</ul><div class="eg-path">${escape(upgrade?existingPath:s.path)}</div></div>${upgrade?'<p class="eg-small">백업은 유지됩니다. 도면 열기·저장·출력과 인증·플러그인 동작을 확인한 후 정리할 수 있습니다.</p>':''}<label class="eg-agree"><input type="checkbox" data-launch ${s.launch?'checked':''}><span>완료 후 EG-BIM 실행</span></label>${s.finished?'<p class="eg-small" role="status">미리보기가 끝났습니다. 실제 프로그램은 실행하지 않습니다.</p>':''}`;
|
|
}
|
|
function render(id) {
|
|
const app=document.getElementById(id),s=states[id];
|
|
const names=['설치 준비',s.mode==='upgrade'?'설정 백업':'구성 확인','설치 진행','완료'];
|
|
app.innerHTML=`<header class="eg-titlebar"><span class="eg-mark">E</span><span class="eg-name">EG-BIM <span class="eg-demo">설치 시안</span></span></header><div class="eg-layout"><aside class="eg-side"><div class="eg-eyebrow">BARON SOFTWARE</div><h2>${s.mode==='upgrade'?'업데이트':'새로 설치'}</h2><ol class="eg-steps">${names.map((n,i)=>`<li ${i===s.step?'aria-current="step"':''} class="${i<s.step?'eg-past':''}"><span class="eg-dot">${i<s.step?'✓':i+1}</span>${n}</li>`).join('')}</ol><div class="eg-side-note">당신의 설계 환경을<br>다음 버전으로.</div></aside><main class="eg-main"><div class="eg-content"><div class="eg-mode" aria-label="설치 상황 미리보기"><button class="cursor-interaction" data-mode="upgrade" aria-pressed="${s.mode==='upgrade'}" ${s.step>0?'disabled':''}>기존 설치본 전환</button><button class="cursor-interaction" data-mode="new" aria-pressed="${s.mode==='new'}" ${s.step>0?'disabled':''}>신규 설치</button></div><p class="eg-mini-step">STEP ${s.step+1} / 4 · ${names[s.step]}</p><div aria-live="polite">${content(s)}</div></div><footer class="eg-footer"><span class="eg-small">미리보기 · 실제 변경 없음</span><div class="eg-actions">${s.step>0?'<button class="eg-button eg-quiet cursor-interaction" data-action="reset">처음으로</button>':''}<button class="eg-button eg-primary cursor-interaction" data-action="next">${['다음',s.mode==='upgrade'?'업데이트 시작':'설치 시작','완료 화면 보기',s.finished?'다시 살펴보기':'완료'][s.step]}<i data-lucide="arrow-right" aria-hidden="true"></i></button></div></footer></main></div>`;
|
|
app.querySelectorAll('[data-mode]').forEach(b=>b.addEventListener('click',()=>{s.mode=b.dataset.mode;s.error=false;render(id);persist(id);}));
|
|
app.querySelector('[data-path]')?.addEventListener('input',e=>{s.path=e.target.value;});
|
|
app.querySelector('[data-agree]')?.addEventListener('change',e=>{s.agreed=e.target.checked;persist(id);});
|
|
app.querySelector('[data-launch]')?.addEventListener('change',e=>{s.launch=e.target.checked;persist(id);});
|
|
app.querySelector('[data-action=reset]')?.addEventListener('click',()=>{s.step=0;s.finished=false;s.error=false;render(id);persist(id);});
|
|
app.querySelector('[data-action=next]').addEventListener('click',()=>{
|
|
if(s.step===0&&s.mode==='new'&&(!s.path.trim()||!s.agreed))s.error=true;
|
|
else if(s.step<3){s.step++;s.error=false;}
|
|
else if(s.finished){s.step=0;s.finished=false;}
|
|
else s.finished=true;
|
|
render(id);persist(id);
|
|
app.querySelector('[data-action=next]').focus({preventScroll:true});
|
|
});
|
|
if(globalThis.lucide)lucide.createIcons({attrs:{width:16,height:16}});
|
|
}
|
|
definitions.forEach(d=>render(d.id));
|
|
window.addEventListener('openai:set_globals',e=>{
|
|
const restored=e.detail?.globals?.widgetState?.privateContent?.installers;
|
|
if(restored)definitions.forEach(d=>{states[d.id]=normalize(restored[d.id]);render(d.id);});
|
|
});
|
|
if(globalThis.Tweak)definitions.forEach(d=>{
|
|
const app=document.getElementById(d.id),style={radius:12};
|
|
const tweak=new Tweak({container:app,onChange:()=>{app.style.borderRadius=style.radius+'px';}});
|
|
tweak.addSlider(style,'radius',{label:'창 모서리',min:0,max:24,unit:'px'});
|
|
});
|
|
})();
|
|
</script>
|