139 lines
4.9 KiB
HTML
139 lines
4.9 KiB
HTML
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>MC Custom Installer</title>
|
|
<link rel="stylesheet" href="./styles.css" />
|
|
</head>
|
|
<body>
|
|
<div class="shell">
|
|
<aside class="steps">
|
|
<h1>MC Custom Installer</h1>
|
|
<ol>
|
|
<li data-step="1" class="active">서버팩 선택</li>
|
|
<li data-step="2">설치 경로 설정</li>
|
|
<li data-step="3">JDK 확인 / 설치</li>
|
|
<li data-step="4">다운로드 및 설치</li>
|
|
<li data-step="5">서버 설정</li>
|
|
<li data-step="6">포트포워딩 설정</li>
|
|
<li data-step="7">완료</li>
|
|
</ol>
|
|
</aside>
|
|
|
|
<main class="content">
|
|
<section class="panel active" data-panel="1">
|
|
<p class="eyebrow">STEP 1</p>
|
|
<h2>서버팩 선택</h2>
|
|
<label class="field">
|
|
<span>manifest.json URL</span>
|
|
<input id="manifestUrl" />
|
|
</label>
|
|
<div class="buttonRow">
|
|
<button id="loadPacksButton" class="primary">목록 불러오기</button>
|
|
</div>
|
|
<div id="packList" class="packList"></div>
|
|
<div class="buttonRow end">
|
|
<button id="toStep2" class="primary">다음</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="2">
|
|
<p class="eyebrow">STEP 2</p>
|
|
<h2>설치 경로 설정</h2>
|
|
<label class="field">
|
|
<span>설치 경로</span>
|
|
<div class="inputRow">
|
|
<input id="installPath" />
|
|
<button id="browseInstallPath">폴더 선택</button>
|
|
</div>
|
|
</label>
|
|
<p id="installPathWarning" class="warningText"></p>
|
|
<div class="buttonRow between">
|
|
<button data-back="1">이전</button>
|
|
<button id="toStep3" class="primary">다음</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="3">
|
|
<p class="eyebrow">STEP 3</p>
|
|
<h2>JDK 확인 / 설치</h2>
|
|
<label class="field">
|
|
<span>JDK 경로</span>
|
|
<div class="inputRow">
|
|
<input id="jdkPath" />
|
|
<button id="browseJdkPath">폴더 선택</button>
|
|
</div>
|
|
</label>
|
|
<div class="buttonRow">
|
|
<button id="detectJdkButton">자동 탐색</button>
|
|
</div>
|
|
<div id="jdkStatus" class="infoBox"></div>
|
|
<div class="buttonRow between">
|
|
<button data-back="2">이전</button>
|
|
<button id="toStep4" class="primary">다음</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="4">
|
|
<p class="eyebrow">STEP 4</p>
|
|
<h2>다운로드 및 설치</h2>
|
|
<div class="buttonRow">
|
|
<button id="startInstallButton" class="primary">설치 시작</button>
|
|
</div>
|
|
<div id="logView" class="logView"></div>
|
|
<div id="eulaBlock" class="eulaBlock hidden">
|
|
<p>Minecraft EULA에 동의해야 설치를 계속할 수 있습니다.</p>
|
|
<button id="acceptEulaButton" class="primary">EULA 동의 후 계속</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="5">
|
|
<p class="eyebrow">STEP 5</p>
|
|
<h2>서버 설정</h2>
|
|
<p>로컬 웹서버를 띄워 브라우저에서 설정 파일을 수정합니다.</p>
|
|
<div class="buttonRow">
|
|
<button id="openConfigEditorButton" class="primary">설정 편집기 열기</button>
|
|
</div>
|
|
<div id="configEditorStatus" class="infoBox"></div>
|
|
<div class="buttonRow between">
|
|
<button data-back="4">이전</button>
|
|
<button id="toStep6" class="primary">다음</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="6">
|
|
<p class="eyebrow">STEP 6</p>
|
|
<h2>포트포워딩 설정</h2>
|
|
<div class="buttonRow">
|
|
<button id="configurePortButton" class="primary">포트 개방 확인 / 시도</button>
|
|
</div>
|
|
<div id="portStatusBox" class="infoBox"></div>
|
|
<div class="buttonRow between">
|
|
<button data-back="5">이전</button>
|
|
<button id="toStep7" class="primary">다음</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="panel" data-panel="7">
|
|
<p class="eyebrow">STEP 7</p>
|
|
<h2>완료</h2>
|
|
<label class="toggleRow">
|
|
<input type="checkbox" id="createShortcutToggle" checked />
|
|
<span>바탕화면에 서버 실행 바로가기 만들기</span>
|
|
</label>
|
|
<label class="toggleRow">
|
|
<input type="checkbox" id="runServerToggle" checked />
|
|
<span>서버 바로 실행</span>
|
|
</label>
|
|
<div class="buttonRow">
|
|
<button id="openFolderButton">서버 폴더 열기</button>
|
|
<button id="finishButton" class="primary">적용 및 완료</button>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
<script src="./renderer.js"></script>
|
|
</body>
|
|
</html>
|