92 lines
3.7 KiB
Plaintext
92 lines
3.7 KiB
Plaintext
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<%- include('partials/favicon') %>
|
|
<title><%= lecture.title %> - PPT 뷰어</title>
|
|
<link rel="stylesheet" href="/public/styles.css" />
|
|
</head>
|
|
<body>
|
|
<% if (typeof slideImageUrls === 'undefined') { slideImageUrls = []; } %>
|
|
<div class="app-shell">
|
|
<%- include('partials/nav', { activeMenu: 'learning' }) %>
|
|
<div class="content-area">
|
|
<main class="viewer-wrap">
|
|
<a href="/learning" class="back-link">← 학습센터로 돌아가기</a>
|
|
<h1><%= lecture.title %></h1>
|
|
<p class="description"><%= lecture.description || "설명이 없습니다." %></p>
|
|
|
|
<div class="ppt-tools ppt-tools-row">
|
|
<span>총 <b><%= slides.length %></b>장</span>
|
|
<div class="slide-layout-toggle" role="group" aria-label="슬라이드 한 화면 열 개수">
|
|
<span class="slide-layout-toggle-label">보기</span>
|
|
<button type="button" class="slide-layout-btn" data-cols="1" aria-pressed="true">1단</button>
|
|
<button type="button" class="slide-layout-btn" data-cols="2" aria-pressed="false">2단</button>
|
|
<button type="button" class="slide-layout-btn" data-cols="3" aria-pressed="false">3단</button>
|
|
</div>
|
|
</div>
|
|
|
|
<% if (typeof slidesError !== 'undefined' && slidesError && (!slideImageUrls || slideImageUrls.length === 0)) { %>
|
|
<p class="admin-warn">슬라이드 이미지 생성에 실패했습니다. LibreOffice가 설치되어 있는지 확인하세요. (macOS: <code>brew install --cask libreoffice</code>)</p>
|
|
<% } %>
|
|
|
|
<% if (!slides.length) { %>
|
|
<p class="empty">슬라이드 내용을 불러올 수 없습니다.</p>
|
|
<% } %>
|
|
|
|
<section class="slide-list slide-list--cols-1" id="slide-list">
|
|
<% slides.forEach((slide, index) => { %>
|
|
<article class="slide-card">
|
|
<header>
|
|
<h2>슬라이드 <%= index + 1 %></h2>
|
|
</header>
|
|
<% if (slideImageUrls[index]) { %>
|
|
<div class="slide-image-wrap">
|
|
<img src="<%= slideImageUrls[index] %>" alt="슬라이드 <%= index + 1 %>" class="slide-image" />
|
|
</div>
|
|
<% } %>
|
|
</article>
|
|
<% }) %>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
(function () {
|
|
var KEY = "learningCenterSlideColumns";
|
|
var list = document.getElementById("slide-list");
|
|
var buttons = document.querySelectorAll(".slide-layout-btn");
|
|
if (!list || !buttons.length) return;
|
|
|
|
function applyCols(n) {
|
|
list.classList.remove("slide-list--cols-1", "slide-list--cols-2", "slide-list--cols-3");
|
|
list.classList.add("slide-list--cols-" + n);
|
|
buttons.forEach(function (btn) {
|
|
var on = btn.getAttribute("data-cols") === String(n);
|
|
btn.setAttribute("aria-pressed", on ? "true" : "false");
|
|
btn.classList.toggle("is-active", on);
|
|
});
|
|
try {
|
|
localStorage.setItem(KEY, String(n));
|
|
} catch (e) {}
|
|
}
|
|
|
|
var saved = null;
|
|
try {
|
|
saved = localStorage.getItem(KEY);
|
|
} catch (e) {}
|
|
var initial = saved === "2" || saved === "3" ? saved : "1";
|
|
applyCols(initial);
|
|
|
|
buttons.forEach(function (btn) {
|
|
btn.addEventListener("click", function () {
|
|
var n = btn.getAttribute("data-cols");
|
|
if (n === "1" || n === "2" || n === "3") applyCols(n);
|
|
});
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|