Spaces:

nayohan
/

Sudoku

Running

App Files Files Community

Sudoku / index.html

nayohan

Update space

ed7c9b4 2 months ago

raw

history blame contribute delete

3.46 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="왜 그 숫자가 들어가는지 설명해 주는 학습형 수도쿠 게임">
	<title>배우면서 푸는 수도쿠</title>
	<link rel="stylesheet" href="style.css">
	<script src="script.js" defer></script>
	</head>
	<body>
	<header class="site-header">
	<div class="header-copy">
	<p class="eyebrow">Explainable Sudoku MVP</p>
	<h1>배우면서 푸는 수도쿠</h1>
	<p class="intro">정답만 맞히는 대신, 다음 한 수가 왜 성립하는지 바로 설명해 주는 학습형 수도쿠입니다.</p>
	</div>
	<nav class="top-actions" aria-label="게임 조작">
	<button id="new-game-btn" type="button">새 퍼즐</button>
	<button id="hint-btn" type="button">힌트 보기</button>
	<button id="apply-hint-btn" type="button">힌트 적용</button>
	<button id="check-btn" type="button">오답 확인</button>
	<button id="reset-btn" type="button">초기화</button>
	</nav>
	</header>

	<main class="layout">
	<section class="board-panel" aria-labelledby="board-title">
	<div class="panel-head">
	<div>
	<h2 id="board-title">현재 퍼즐</h2>
	<p id="puzzle-meta" class="muted">랜덤 변형 퍼즐을 준비하는 중입니다.</p>
	</div>
	<div class="status-wrap">
	<span id="difficulty-badge" class="badge">입문</span>
	<p id="game-status" class="status" role="status" aria-live="polite" aria-atomic="true">퍼즐을 준비하는 중입니다.</p>
	</div>
	</div>

	<article class="sudoku-shell" aria-label="수도쿠 보드 영역">
	<p id="sudoku-help" class="sr-only">방향키로 칸을 이동하고 숫자 1부터 9까지 입력할 수 있습니다.</p>
	<div id="sudoku-board" class="sudoku-board" role="grid" aria-describedby="sudoku-help"></div>
	</article>
	</section>

	<aside class="side-panel">
	<section class="info-card" aria-labelledby="hint-title">
	<h2 id="hint-title">학습 힌트</h2>
	<p id="hint-message" class="hint-message" role="status" aria-live="polite" aria-atomic="true">힌트 보기를 누르면 다음 논리 단계를 설명합니다.</p>
	</section>

	<section class="info-card" aria-labelledby="analysis-title">
	<h2 id="analysis-title">분석 요약</h2>
	<dl class="stats-grid">
	<div>
	<dt>채워진 칸</dt>
	<dd id="filled-count">0</dd>
	</div>
	<div>
	<dt>남은 칸</dt>
	<dd id="remaining-count">81</dd>
	</div>
	<div>
	<dt>다음 기술</dt>
	<dd id="next-technique">대기 중</dd>
	</div>
	<div>
	<dt>퍼즐 분석</dt>
	<dd id="analysis-summary">초기 분석을 준비하는 중입니다.</dd>
	</div>
	</dl>
	</section>

	<section class="info-card" aria-labelledby="log-title">
	<h2 id="log-title">풀이 로그</h2>
	<ol id="log-list" class="log-list" role="log" aria-live="polite" aria-relevant="additions text"></ol>
	</section>
	</aside>
	</main>

	<footer class="site-footer">
	<p>현재 MVP는 단일 후보와 숨은 싱글 규칙을 중심으로 설명합니다.</p>
	</footer>
	</body>
	</html>