346 lines
10 KiB
HTML
346 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="ko" class="app-booting">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Arena Picker</title>
|
|
|
|
<!-- OpenGraph Meta Tags -->
|
|
<meta property="og:type" content="website" />
|
|
<meta property="og:title" content="Arena Picker" />
|
|
<meta
|
|
property="og:description"
|
|
content="친구들의 닉네임을 입력하고 최후의 승자를 가려보세요! 화려한 픽셀 아트 기반 자동 전투 시뮬레이션."
|
|
/>
|
|
<meta property="og:image" content="/assets/og-image.png" />
|
|
|
|
<!-- Twitter Meta Tags -->
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
<meta name="twitter:title" content="Arena Picker" />
|
|
<meta
|
|
name="twitter:description"
|
|
content="친구들의 닉네임을 입력하고 최후의 승자를 가려보세요! 화려한 픽셀 아트 기반 자동 전투 시뮬레이션."
|
|
/>
|
|
<meta name="twitter:image" content="/assets/og-image.png" />
|
|
|
|
<link
|
|
rel="icon"
|
|
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>⚔️</text></svg>"
|
|
/>
|
|
<style>
|
|
html.app-booting,
|
|
html.app-booting body {
|
|
margin: 0;
|
|
min-width: 320px;
|
|
min-height: 100%;
|
|
background: #080a07;
|
|
}
|
|
|
|
html.app-booting #app {
|
|
visibility: hidden;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/src/styles.css" data-app-styles />
|
|
</head>
|
|
<body>
|
|
<main id="app" class="intro-mode">
|
|
<section class="arena-shell" aria-label="전투 경기장">
|
|
<div id="scoreboard" class="scoreboard">
|
|
<div id="score-left" class="score-side left"></div>
|
|
<div id="score-right" class="score-side right"></div>
|
|
</div>
|
|
<div
|
|
id="battle-notice"
|
|
class="battle-notice"
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-hidden="true"
|
|
></div>
|
|
<div id="game"></div>
|
|
<div class="battle-preview" aria-hidden="true">
|
|
<span class="preview-fighter preview-knight"></span>
|
|
<span class="preview-fighter preview-orc"></span>
|
|
<span class="preview-fighter preview-wizard"></span>
|
|
<span class="preview-strike preview-strike-a"></span>
|
|
<span class="preview-strike preview-strike-b"></span>
|
|
</div>
|
|
<section
|
|
id="kill-log"
|
|
class="kill-log"
|
|
aria-label="킬로그"
|
|
aria-live="polite"
|
|
aria-relevant="additions"
|
|
aria-hidden="true"
|
|
>
|
|
<ol id="kill-log-list" class="kill-log-list"></ol>
|
|
</section>
|
|
<div
|
|
id="match-status"
|
|
class="match-status"
|
|
role="status"
|
|
aria-live="polite"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="status-track">
|
|
<span data-status-text>옵션 대기 중</span>
|
|
<span data-status-text>옵션 대기 중</span>
|
|
</div>
|
|
</div>
|
|
<div class="arena-meta">
|
|
<p id="visitor-count" class="visitor-count" aria-live="polite">
|
|
방문자 확인 중
|
|
</p>
|
|
<button
|
|
id="about-button"
|
|
class="about-button"
|
|
type="button"
|
|
aria-haspopup="dialog"
|
|
aria-controls="about-dialog"
|
|
aria-expanded="false"
|
|
>
|
|
About
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="intro-stage" aria-label="Arena Picker 시작 화면">
|
|
<div class="intro-content">
|
|
<h1 class="arena-logo" aria-label="Arena Picker">
|
|
<span>ARENA</span>
|
|
<span class="small-text">PICKER</span>
|
|
</h1>
|
|
<button
|
|
id="start-button"
|
|
class="start-button"
|
|
type="button"
|
|
aria-controls="fighter-entry"
|
|
aria-expanded="false"
|
|
>
|
|
Start
|
|
</button>
|
|
</div>
|
|
</section>
|
|
|
|
<button
|
|
id="drawer-scrim"
|
|
class="drawer-scrim"
|
|
type="button"
|
|
aria-label="옵션 닫기"
|
|
></button>
|
|
|
|
<aside
|
|
id="fighter-entry"
|
|
class="fighter-entry"
|
|
aria-label="전투 옵션 입력"
|
|
aria-hidden="true"
|
|
>
|
|
<div class="drawer-header">
|
|
<div class="entry-copy">
|
|
<p class="eyebrow">Match Options</p>
|
|
<h2>전투 설정</h2>
|
|
</div>
|
|
<div class="drawer-header-controls">
|
|
<button
|
|
id="drawer-toggle"
|
|
class="drawer-toggle"
|
|
type="button"
|
|
aria-controls="fighter-entry"
|
|
aria-expanded="true"
|
|
>
|
|
옵션 접기
|
|
</button>
|
|
<button
|
|
id="drawer-close"
|
|
class="drawer-close"
|
|
type="button"
|
|
aria-label="옵션 닫기"
|
|
>
|
|
X
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<form id="fighter-form" autocomplete="off">
|
|
<fieldset>
|
|
<legend>Players</legend>
|
|
<label for="player-names">참가자 닉네임</label>
|
|
<textarea id="player-names" name="playerNames" rows="10">
|
|
Player 1
|
|
Player 2
|
|
Player 3
|
|
Player 4
|
|
Player 5
|
|
Player 6
|
|
Player 7
|
|
Player 8
|
|
Player 9
|
|
Player 10</textarea
|
|
>
|
|
</fieldset>
|
|
<fieldset>
|
|
<legend>Match</legend>
|
|
<div class="team-size-row">
|
|
<label for="team-size">팀당 인원</label>
|
|
<input
|
|
id="team-size-value"
|
|
class="team-size-number"
|
|
type="number"
|
|
min="1"
|
|
max="100"
|
|
step="1"
|
|
value="5"
|
|
inputmode="numeric"
|
|
aria-label="팀당 인원 직접 입력"
|
|
/>
|
|
</div>
|
|
<input
|
|
id="team-size"
|
|
name="teamSize"
|
|
type="range"
|
|
min="1"
|
|
max="100"
|
|
value="5"
|
|
/>
|
|
<div class="spawn-placement-field">
|
|
<span id="spawn-placement-label" class="spawn-placement-label"
|
|
>리스폰 설정</span
|
|
>
|
|
<div
|
|
class="spawn-placement-options"
|
|
role="radiogroup"
|
|
aria-labelledby="spawn-placement-label"
|
|
>
|
|
<label class="spawn-placement-option">
|
|
<input
|
|
type="radio"
|
|
name="spawnPlacement"
|
|
value="starting-zones"
|
|
/>
|
|
<span>집결 배치</span>
|
|
</label>
|
|
<label class="spawn-placement-option">
|
|
<input
|
|
type="radio"
|
|
name="spawnPlacement"
|
|
value="random"
|
|
checked
|
|
/>
|
|
<span>완전 랜덤 배치</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
<div class="match-actions">
|
|
<button type="submit">전투 시작</button>
|
|
<button id="restart-button" class="restart-button" type="button">
|
|
재시작
|
|
</button>
|
|
<button
|
|
id="pause-button"
|
|
class="pause-button"
|
|
type="button"
|
|
aria-pressed="false"
|
|
>
|
|
일시정지
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</aside>
|
|
|
|
<div id="about-dialog" class="about-backdrop" hidden>
|
|
<section
|
|
class="about-dialog"
|
|
data-about-dialog
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="about-dialog-title"
|
|
tabindex="-1"
|
|
>
|
|
<header class="about-header">
|
|
<div>
|
|
<p class="eyebrow">About</p>
|
|
<h2 id="about-dialog-title">개발자정보</h2>
|
|
</div>
|
|
<button
|
|
class="about-close"
|
|
data-about-close
|
|
type="button"
|
|
aria-label="About 닫기"
|
|
>
|
|
X
|
|
</button>
|
|
</header>
|
|
|
|
<div class="about-tabs" role="tablist" aria-label="About 메뉴">
|
|
<button
|
|
id="about-tab-developer"
|
|
class="about-tab"
|
|
data-about-tab="developer"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="true"
|
|
aria-controls="about-panel-developer"
|
|
>
|
|
개발자정보
|
|
</button>
|
|
<button
|
|
id="about-tab-privacy"
|
|
class="about-tab"
|
|
data-about-tab="privacy"
|
|
type="button"
|
|
role="tab"
|
|
aria-selected="false"
|
|
aria-controls="about-panel-privacy"
|
|
tabindex="-1"
|
|
>
|
|
개인정보처리방침
|
|
</button>
|
|
</div>
|
|
|
|
<section
|
|
id="about-panel-developer"
|
|
class="about-panel"
|
|
data-about-panel="developer"
|
|
role="tabpanel"
|
|
aria-labelledby="about-tab-developer"
|
|
>
|
|
<dl class="about-fields">
|
|
<div class="about-field-row">
|
|
<dt>alias</dt>
|
|
<dd data-about-field="alias">horoli</dd>
|
|
</div>
|
|
<div class="about-field-row">
|
|
<dt>email</dt>
|
|
<dd data-about-field="email">sunha321@gmail.com</dd>
|
|
</div>
|
|
<div class="about-field-row">
|
|
<dt>github</dt>
|
|
<dd data-about-field="github">
|
|
<a
|
|
href="https://github.com/Horoli"
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
>
|
|
https://github.com/Horoli
|
|
</a>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</section>
|
|
|
|
<section
|
|
id="about-panel-privacy"
|
|
class="about-panel"
|
|
data-about-panel="privacy"
|
|
role="tabpanel"
|
|
aria-labelledby="about-tab-privacy"
|
|
hidden
|
|
>
|
|
<div id="privacy-policy-content" class="about-markdown"></div>
|
|
</section>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
<script type="module" src="/src/main.js"></script>
|
|
</body>
|
|
</html>
|