48 lines
1.9 KiB
HTML
48 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Headless Login Demo</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<main class="app-shell">
|
|
<article class="login-panel">
|
|
<div class="panel-heading">
|
|
<h1>PM 데모 로그인</h1>
|
|
<p>숫자만 입력하면 전화번호 인증, 그 외 입력은 ID/PW 로그인으로 전환됩니다.</p>
|
|
</div>
|
|
|
|
<form id="login-form" class="login-form">
|
|
<div class="field">
|
|
<label for="identifier">사번 또는 전화번호</label>
|
|
<input type="text" id="identifier" name="identifier" class="text-input" placeholder="예: b24051 또는 01012345678" autocomplete="off">
|
|
</div>
|
|
|
|
<div id="password-field" class="field hidden">
|
|
<label for="password">비밀번호</label>
|
|
<input type="password" id="password" name="password" class="text-input" placeholder="비밀번호를 입력하세요">
|
|
</div>
|
|
|
|
<p id="input-hint" class="input-hint">입력값에 따라 적절한 로그인 방식이 자동으로 선택됩니다.</p>
|
|
|
|
<button type="submit" id="submit-button" class="primary-button" disabled>로그인</button>
|
|
</form>
|
|
|
|
<div id="status-display" class="status-card">
|
|
<strong>현재 동작</strong>
|
|
<p id="status-text">입력값을 기다리는 초기 상태입니다.</p>
|
|
</div>
|
|
|
|
<div id="success-panel" class="success-panel hidden">
|
|
<div class="success-label">완료</div>
|
|
<h3 id="success-title">성공!</h3>
|
|
<p id="success-description"></p>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|