93 lines
2.5 KiB
HTML
93 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>{{ chapter.title }}</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<section class="cover" data-title="CH {{ chapter.number }} · {{ chapter.title }}">
|
|
<div class="brand">WING-OPS USER MANUAL</div>
|
|
<div class="ch-num">CHAPTER {{ chapter.number }}</div>
|
|
<h1 class="title">{{ chapter.title }}</h1>
|
|
<div class="subtitle">{{ chapter.subtitle }}</div>
|
|
<div class="meta">
|
|
<span class="screens-count">{{ chapter.screens | length }}</span> 개 화면 ·
|
|
총 {{ chapter.screens | length }} 섹션
|
|
</div>
|
|
</section>
|
|
|
|
{% for screen in chapter.screens %}
|
|
<section class="screen" data-chapter="CH {{ chapter.number }} · {{ chapter.title }}">
|
|
<div class="screen-header">
|
|
<div>
|
|
<span class="screen-index">{{ screen.id }}</span>
|
|
<span class="screen-name">{{ screen.name }}</span>
|
|
</div>
|
|
<div class="menu-path">📍 {{ screen.menuPath }}</div>
|
|
</div>
|
|
|
|
<div class="screenshot">
|
|
<img src="manual/image{{ screen.imageIndex }}.png" alt="{{ screen.name }}">
|
|
</div>
|
|
|
|
<h3 class="section-label">개요</h3>
|
|
<p class="overview">{{ screen.overview }}</p>
|
|
|
|
{% if screen.description %}
|
|
<h3 class="section-label">화면 설명</h3>
|
|
<p class="description">{{ screen.description }}</p>
|
|
{% endif %}
|
|
|
|
{% if screen.procedure %}
|
|
<h3 class="section-label">사용 절차</h3>
|
|
<ol class="procedure">
|
|
{% for step in screen.procedure %}
|
|
<li>{{ step }}</li>
|
|
{% endfor %}
|
|
</ol>
|
|
{% endif %}
|
|
|
|
{% if screen.inputs %}
|
|
<h3 class="section-label">입력 항목</h3>
|
|
<table class="inputs">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 22%;">항목</th>
|
|
<th style="width: 18%;">유형</th>
|
|
<th style="width: 10%;">필수</th>
|
|
<th>설명</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for inp in screen.inputs %}
|
|
<tr>
|
|
<td><strong>{{ inp.label }}</strong></td>
|
|
<td>{{ inp.type }}</td>
|
|
<td class="{% if inp.required %}required-yes{% else %}required-no{% endif %}">
|
|
{% if inp.required %}●{% else %}○{% endif %}
|
|
</td>
|
|
<td>{{ inp.desc }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
{% endif %}
|
|
|
|
{% if screen.notes %}
|
|
<div class="notes-box">
|
|
<h3 class="section-label">주의사항</h3>
|
|
<ul class="notes">
|
|
{% for note in screen.notes %}
|
|
<li>{{ note }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
</section>
|
|
{% endfor %}
|
|
|
|
</body>
|
|
</html>
|