Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
@@ -0,0 +1,132 @@
|
||||
<!-- 목표 상세 팝업 레이어 (myclass, myclass_04 공용) -->
|
||||
<div class="goal-layer hidden" id="goalLayer" aria-hidden="true" role="dialog" aria-modal="true" aria-label="학습목표 상세">
|
||||
|
||||
<div class="goal-layer-content">
|
||||
<div class="goal-layer-header">
|
||||
<button class="btn-close-layer" type="button" id="btnCloseLayer" aria-label="닫기">
|
||||
<span class="blind">닫기</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="goal-layer-main">
|
||||
<div class="goal-popup" role="document">
|
||||
<div class="goal-main-slider">
|
||||
<div class="swiper goal-popup-swiper">
|
||||
<div class="swiper-wrapper" id="goalSlideWrapper">
|
||||
<!-- 슬라이드 1 (템플릿, JS에서 2~8번 복제) -->
|
||||
<div class="swiper-slide goal-slide" data-goal-id="1">
|
||||
<!-- 미니 카드: 비활성일 때만 표시 -->
|
||||
<div class="slide-mini-card">
|
||||
<div class="goal-slide-icon-mini" aria-hidden="true"></div>
|
||||
<strong class="goal-slide-title-mini"></strong>
|
||||
<div class="slide-mini-divider" aria-hidden="true"></div>
|
||||
<p class="goal-slide-desc-mini"></p>
|
||||
</div>
|
||||
<!-- 풀 콘텐츠: 활성일 때만 표시 -->
|
||||
<div class="popup-scroll">
|
||||
<div class="popup-body">
|
||||
<div class="popup-top">
|
||||
<div class="title-box">
|
||||
<div class="title-icon goal-slide-icon" aria-hidden="true"></div>
|
||||
<div class="title-area">
|
||||
<p class="popup-quarter" aria-hidden="true"><?php echo htmlspecialchars($modalQuarterLabel ?? '26년 3분기)', ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
<strong class="popup-title goal-slide-title"></strong>
|
||||
<p class="popup-desc goal-slide-desc"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="recs-list goal-slide-recs">
|
||||
<div class="rec-item">
|
||||
<span class="rec-label">추천.01</span>
|
||||
<div class="rec-content">
|
||||
<strong class="rec-target"><?php echo htmlspecialchars($modalRecItems[0]['title'] ?? '', ENT_QUOTES, 'UTF-8'); ?></strong>
|
||||
<p class="rec-text"><?php echo htmlspecialchars($modalRecItems[0]['description'] ?? '', ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-item">
|
||||
<span class="rec-label">추천.02</span>
|
||||
<div class="rec-content">
|
||||
<strong class="rec-target"><?php echo htmlspecialchars($modalRecItems[1]['title'] ?? '', ENT_QUOTES, 'UTF-8'); ?></strong>
|
||||
<p class="rec-text"><?php echo htmlspecialchars($modalRecItems[1]['description'] ?? '', ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rec-item">
|
||||
<span class="rec-label">추천.03</span>
|
||||
<div class="rec-content">
|
||||
<strong class="rec-target"><?php echo htmlspecialchars($modalRecItems[2]['title'] ?? '', ENT_QUOTES, 'UTF-8'); ?></strong>
|
||||
<p class="rec-text"><?php echo htmlspecialchars($modalRecItems[2]['description'] ?? '', ENT_QUOTES, 'UTF-8'); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section class="bookshelf-section goal-slide-bookshelf" aria-label="추천 도서 책장">
|
||||
<div class="bookshelf">
|
||||
<div class="books-list books-list--same-height">
|
||||
<?php foreach (($modalBooks ?? []) as $book) : ?>
|
||||
<?php
|
||||
$subText = str_replace('\\n', "\n", (string)($book['sub'] ?? ''));
|
||||
$mainText = str_replace('\\n', "\n", (string)($book['main'] ?? ''));
|
||||
$bookId = (int)($book['id'] ?? 0);
|
||||
$bookTitle = (string)($book['title'] ?? '');
|
||||
$bookImg = (string)($book['img'] ?? 'img_book_01');
|
||||
$bookYoutube = (string)($book['youtube'] ?? '');
|
||||
?>
|
||||
<div class="books-item" data-video-id="<?php echo $bookId; ?>">
|
||||
<div class="book-img-wrap" style="--book-img: url('/img/myclass/<?php echo htmlspecialchars($bookImg, ENT_QUOTES, 'UTF-8'); ?>.png'); --book-img-m: url('/img/myclass/<?php echo htmlspecialchars($bookImg, ENT_QUOTES, 'UTF-8'); ?>_m.png')">
|
||||
<picture class="book-img-picture">
|
||||
<source media="(max-width: 767px)" srcset="/img/myclass/<?php echo htmlspecialchars($bookImg, ENT_QUOTES, 'UTF-8'); ?>_m.png">
|
||||
<img src="/img/myclass/<?php echo htmlspecialchars($bookImg, ENT_QUOTES, 'UTF-8'); ?>.png" alt="추천 도서 이미지" class="book-img">
|
||||
</picture>
|
||||
</div>
|
||||
<button type="button" class="book-info-btn" data-video-id="<?php echo $bookId; ?>" aria-label="영상 상세 보기 - <?php echo htmlspecialchars($bookTitle, ENT_QUOTES, 'UTF-8'); ?>">
|
||||
<span class="book-info-wrap">
|
||||
<div class="book-video-area">
|
||||
<span class="book-video-thumb-wrap">
|
||||
<img src="https://img.youtube.com/vi/<?php echo htmlspecialchars($bookYoutube, ENT_QUOTES, 'UTF-8'); ?>/sddefault.jpg" alt="" class="book-video-thumb">
|
||||
</span>
|
||||
<label class="bookmark" for="like_book_goal_<?php echo $bookId; ?>" onclick="event.stopPropagation();"><input type="checkbox" id="like_book_goal_<?php echo $bookId; ?>" title="저장"></label>
|
||||
</div>
|
||||
<strong class="book-title"><?php echo htmlspecialchars($bookTitle, ENT_QUOTES, 'UTF-8'); ?></strong>
|
||||
<div class="book-desc">
|
||||
<p class="book-desc-sub"><?php echo nl2br(htmlspecialchars($subText, ENT_QUOTES, 'UTF-8')); ?></p>
|
||||
<p class="book-desc-main"><?php echo nl2br(htmlspecialchars($mainText, ENT_QUOTES, 'UTF-8')); ?></p>
|
||||
</div>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<div class="shelf-plank">
|
||||
<div class="shelf-tags">
|
||||
<span>1Q</span>
|
||||
<ul>
|
||||
<li>IT 테크</li>
|
||||
<li>웰니스</li>
|
||||
<li>마인드셋</li>
|
||||
<li>리더십</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 슬라이드 1 -->
|
||||
</div>
|
||||
<!-- 하단: 목표 페이지네이션 (동그라미) -->
|
||||
<div class="popup-pagination swiper-pagination" id="popupPagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- // goal-layer-main -->
|
||||
|
||||
<!-- 팝업 외부 하단 버튼 -->
|
||||
<div class="goal-layer-foot">
|
||||
<a href="/skin/myclass_list.php" class="btn-set-goal" id="btnSetGoal">이 목표로 설정하기</a>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // goal-layer-content -->
|
||||
|
||||
</div>
|
||||
<!-- // 목표 상세 팝업 레이어 -->
|
||||
@@ -0,0 +1,50 @@
|
||||
<!-- keyword modal -->
|
||||
<!--
|
||||
이 파일은 skin/index.php 에서 include 된다.
|
||||
bbs/index.php 가 설정한 $allKeywords, $myKeywords, $adminKeywords 변수를 사용한다.
|
||||
-->
|
||||
<div class="modal keyword" id="keywordModal" aria-hidden="true" aria-modal="true" role="dialog" aria-label="나의 키워드 설정">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button class="btn-close">
|
||||
나의 키워드 수정<i class="ico-check"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body" id="modalBody">
|
||||
<ul class="keyword-tag">
|
||||
<?php
|
||||
// 현재 사용자가 선택한 키워드명 배열 (checked 상태 결정에 사용)
|
||||
$myKwNames = array_column($myKeywords ?? [], 'keyword_name');
|
||||
// 회사 추천 키워드명 배열 (disabled 처리용)
|
||||
$adminKwNames = array_column($adminKeywords ?? [], 'keyword_name');
|
||||
|
||||
foreach ($allKeywords as $idx => $kw):
|
||||
$kwName = $kw['keyword_name'];
|
||||
$isAdmin = in_array($kwName, $adminKwNames, true);
|
||||
$isChecked = !$isAdmin && in_array($kwName, $myKwNames, true);
|
||||
$itemId = 'kwtag_' . ($idx + 1);
|
||||
?>
|
||||
<li class="kw-box">
|
||||
<label
|
||||
for="<?= htmlspecialchars($itemId) ?>"
|
||||
<?= $isAdmin ? 'style="opacity:0.45;cursor:not-allowed;" title="회사 추천 키워드는 나의 키워드로 선택할 수 없습니다."' : '' ?>
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="<?= htmlspecialchars($itemId) ?>"
|
||||
<?= $isChecked ? 'checked' : '' ?>
|
||||
<?= $isAdmin ? 'disabled' : '' ?>
|
||||
/>
|
||||
#<?= htmlspecialchars($kwName) ?>
|
||||
</label>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<p class="keyword-limit-txt">
|
||||
<span class="pc-txt"><strong>최대 3개</strong> 선택 가능</span>
|
||||
<span class="mo-txt">키워드는 <strong>최대 3개</strong>까지 선택 가능합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // keyword modal -->
|
||||
@@ -0,0 +1,184 @@
|
||||
<!-- 학습 가이드 PDF 팝업 (전 페이지 공통) -->
|
||||
<?php
|
||||
$learningGuideDefaultTab = $learningGuideDefaultTab ?? 'player';
|
||||
$allowedLearningGuideKeys = [
|
||||
'player',
|
||||
'main',
|
||||
'myclass',
|
||||
'onboarding',
|
||||
'legal',
|
||||
'leadership',
|
||||
'insight',
|
||||
'biztrend',
|
||||
'mypage',
|
||||
];
|
||||
|
||||
if (!in_array($learningGuideDefaultTab, $allowedLearningGuideKeys, true)) {
|
||||
$learningGuideDefaultTab = 'player';
|
||||
}
|
||||
|
||||
$learningGuideTabAttr = static function (string $tabKey) use ($learningGuideDefaultTab): array {
|
||||
$isActive = $tabKey === $learningGuideDefaultTab;
|
||||
|
||||
return [
|
||||
'class' => $isActive ? 'learning-guide-tab is-active' : 'learning-guide-tab',
|
||||
'selected' => $isActive ? 'true' : 'false',
|
||||
];
|
||||
};
|
||||
?>
|
||||
<div
|
||||
class="learning-guide-layer hidden"
|
||||
id="learningGuideLayer"
|
||||
data-default-guide-key="<?= htmlspecialchars($learningGuideDefaultTab, ENT_QUOTES, 'UTF-8') ?>"
|
||||
aria-hidden="true"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label="학습 가이드"
|
||||
>
|
||||
<div class="learning-guide-content">
|
||||
<div class="learning-guide-header">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-close-layer"
|
||||
id="btnCloseLearningGuide"
|
||||
aria-label="닫기"
|
||||
>
|
||||
<span class="blind">닫기</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="learning-guide-body">
|
||||
<div class="learning-guide-tabs">
|
||||
<div class="swiper learning-guide-tab-swiper">
|
||||
<div class="swiper-wrapper" role="tablist" aria-label="학습 가이드 메뉴">
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('player')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="player"
|
||||
data-pdf="/guide/배움터 학습가이드_학습 플레이어.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('player')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
학습 플레이어
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('main')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="main"
|
||||
data-pdf="/guide/배움터 학습가이드_메인페이지.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('main')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
메인
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('myclass')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="myclass"
|
||||
data-pdf="/guide/배움터 학습가이드_마이클래스.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('myclass')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
마이클래스
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('onboarding')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="onboarding"
|
||||
data-pdf="/guide/배움터 학습가이드_온보딩.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('onboarding')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
온보딩
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('legal')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="legal"
|
||||
data-pdf="/guide/배움터 학습가이드_법정교육.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('legal')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
법정교육
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('leadership')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="leadership"
|
||||
data-pdf="/guide/배움터 학습가이드_리더십.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('leadership')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
리더십
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('insight')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="insight"
|
||||
data-pdf="/guide/배움터 학습가이드_인사이트.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('insight')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
인사이트
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('biztrend')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="biztrend"
|
||||
data-pdf="/guide/배움터 학습가이드_비즈트렌드.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('biztrend')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
비즈트렌드
|
||||
</button>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<button
|
||||
type="button"
|
||||
class="<?= $learningGuideTabAttr('mypage')['class'] ?>"
|
||||
role="tab"
|
||||
data-guide-key="mypage"
|
||||
data-pdf="/guide/배움터 학습가이드_마이페이지.pdf"
|
||||
aria-selected="<?= $learningGuideTabAttr('mypage')['selected'] ?>"
|
||||
aria-disabled="false"
|
||||
>
|
||||
마이페이지
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="learning-guide-viewer">
|
||||
<iframe
|
||||
id="learningGuideViewer"
|
||||
title="학습 가이드 PDF"
|
||||
src=""
|
||||
></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!-- 비디오 모달 템플릿 -->
|
||||
<div class="modal video">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="video-contents">
|
||||
<div class="video-box">
|
||||
<iframe
|
||||
id="videoFrame"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src=""
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="tit-box">
|
||||
<div class="meta">
|
||||
<span>인사이트</span>
|
||||
<em>경제와사회</em>
|
||||
</div>
|
||||
<h3>회계를 조금이라도 이해하면 인생이 달라지는 이유</h3>
|
||||
</div>
|
||||
<div class="desc">
|
||||
메타버스 시대가 열리며 우리의 삶과 정체성이 디지털 중심으로 재편되고
|
||||
있습니다.<br />
|
||||
이 변화는 새로운 기회와 동시에 사회적·윤리적 과제도 함께 가져옵니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-list">
|
||||
<div class="list-header">
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="comment-wrap">
|
||||
<div class="comment-box">
|
||||
<textarea placeholder="댓글을 작성해주세요"></textarea>
|
||||
<div class="btn-area">
|
||||
<button class="btn-cancel">취소</button>
|
||||
<button class="btn-save">작성</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
// 학습완료/학습중/미진행 상태를 legal_learning_data.php에서 가져와서 표시하는 헬퍼
|
||||
require_once __DIR__ . '/../../bbs/legal_learning_data.php';
|
||||
|
||||
// content_id => 상태 매핑
|
||||
$lessonStatusMap = [];
|
||||
foreach ($chapters as $chapter) {
|
||||
foreach ($chapter['lessons'] as $lesson) {
|
||||
$lessonStatusMap[$lesson['content_id']] = [
|
||||
'status' => $lesson['status'],
|
||||
'completed' => $lesson['completed'],
|
||||
];
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
<?php
|
||||
require __DIR__ . '/video.php';
|
||||
@@ -0,0 +1,169 @@
|
||||
<!-- 비디오 모달 템플릿 -->
|
||||
<div class="modal video">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="video-contents">
|
||||
<div class="video-area">
|
||||
<div class="video-box">
|
||||
<iframe
|
||||
id="videoFrame"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src=""
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="tit-box">
|
||||
<div class="meta no-arrow">
|
||||
<span>법정교육</span>
|
||||
<em></em>
|
||||
</div>
|
||||
<h3>개인정보보호</h3>
|
||||
</div>
|
||||
<div class="desc"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-side step">
|
||||
<!-- 제목 -->
|
||||
<div class="video-header">
|
||||
<div class="tit-box">
|
||||
<h5 class="tit">현재강의</h5>
|
||||
<p class="sub-txt">
|
||||
아동학대 신고의무자 및 공공부문 종사자 아동학대 예방교육(공통편)
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="gaugeFill" style="width: 50%"></div>
|
||||
<img
|
||||
class="gauge-ticks"
|
||||
src="/img/video/img_gauge_ticks.svg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gauge-labels">
|
||||
<span class="label"> <em>3</em> /6 강</span>
|
||||
<span class="label current" id="currentValue"
|
||||
>진도율 <em>50</em>%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<!-- // 제목 -->
|
||||
<div class="video-list">
|
||||
<h5 class="tit">학습목차</h5>
|
||||
<ul class="learning-list">
|
||||
<li class="complet">
|
||||
<a href="#" class="list" data-video-id="">
|
||||
<span class="seq">1차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_01.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">직무스트레스의 예방과 관리</div>
|
||||
<spna class="state">학습완료</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="complet">
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">2차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_02.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">직무스트레스의 예방과 관리</div>
|
||||
<spna class="state">학습완료</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="active">
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">3차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_03.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">직무스트레스의 예방과 관리</div>
|
||||
<spna class="state">학습중</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">4차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_04.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">하절기 질병예방 및 안전</div>
|
||||
<spna class="state">미진행</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">5차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_05.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">직무스트레스의 예방과 관리</div>
|
||||
<spna class="state">미진행</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">6차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_learning_thumb_06.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">온도습도 및 미세먼지 안정</div>
|
||||
<spna class="state">미진행</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,169 @@
|
||||
<!-- 비디오 모달 템플릿 -->
|
||||
<div class="modal video">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="video-contents">
|
||||
<div class="video-area">
|
||||
<div class="video-box">
|
||||
<iframe
|
||||
id="videoFrame"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src=""
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="tit-box">
|
||||
<div class="meta no-arrow">
|
||||
<span>온보딩</span>
|
||||
<em></em>
|
||||
</div>
|
||||
<h3>회계를 조금이라도 이해하면 인생이 달라지는 이유</h3>
|
||||
<div class="tit-right">
|
||||
<button class="btn-comment"><i class="ico-comment"></i>0</button>
|
||||
<label class="bookmark" for="chk">
|
||||
<input id="chk" type="checkbox" value="" />
|
||||
<span>북마크</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc">
|
||||
메타버스 시대가 열리며 우리의 삶과 정체성이 디지털 중심으로 재편되고
|
||||
있습니다.<br />
|
||||
이 변화는 새로운 기회와 동시에 사회적·윤리적 과제도 함께 가져옵니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-side step">
|
||||
<!-- 제목 -->
|
||||
<div class="video-header">
|
||||
<div class="tit-box">
|
||||
<h5 class="tit">현재강의</h5>
|
||||
<p class="sub-txt">
|
||||
아동학대 신고의무자 및 공공부문 종사자 아동학대 예방교육(공통편)
|
||||
</p>
|
||||
</div>
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-bar">
|
||||
<div class="gauge-fill" id="gaugeFill" style="width: 20%"></div>
|
||||
<img
|
||||
class="gauge-ticks"
|
||||
src="/img/video/img_gauge_ticks.svg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="gauge-labels">
|
||||
<span class="label"> <em>1</em> /4 강</span>
|
||||
<span class="label current" id="currentValue"
|
||||
>진도율 <em>20</em>%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<!-- // 제목 -->
|
||||
<div class="video-list">
|
||||
<h5 class="tit">학습목차</h5>
|
||||
<ul class="learning-list">
|
||||
<li class="active">
|
||||
<a href="#" class="list" data-video-id="">
|
||||
<span class="seq">1차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_essential_thumb_01.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">산업재해예방 안전수칙</div>
|
||||
<spna class="state">학습중</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">2차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_essential_thumb_02.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">축적에서 길을 찾다</div>
|
||||
<spna class="state">미진행</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="">
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">3차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_essential_thumb_03.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">천재는 잊어라</div>
|
||||
<spna class="state">학습중</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" class="list" data-video-id="${video.id}">
|
||||
<span class="seq">4차시</span>
|
||||
<div class="learning-box">
|
||||
<div class="thumb">
|
||||
<img
|
||||
src="/img/video/img_essential_thumb_03.png"
|
||||
/>
|
||||
</div>
|
||||
<div class="txt-box">
|
||||
<div class="title">유령이 된 리더들</div>
|
||||
<spna class="state">미진행</spna>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="comment-wrap">
|
||||
<!-- 🔥 드래그 리사이저 추가 -->
|
||||
<div class="comment-resizer">
|
||||
<div class="resizer-handle"></div>
|
||||
</div>
|
||||
<!-- 댓글 목록 -->
|
||||
<div class="comment-list-wrap">
|
||||
<ul class="comment-list">
|
||||
<li class="empty">등록된 댓글이 없습니다.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- // 댓글 목록 -->
|
||||
<!-- 댓글 입력 -->
|
||||
<div class="comment-box">
|
||||
<textarea placeholder="댓글을 작성해주세요"></textarea>
|
||||
<div class="btn-area">
|
||||
<button class="btn-cancel" disabled>취소</button>
|
||||
<button class="btn-save" disabled>작성</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 댓글 입력 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!-- 비디오 모달 템플릿 -->
|
||||
<div class="modal video">
|
||||
<div class="modal-content">
|
||||
<div class="modal-body">
|
||||
<div class="video-contents">
|
||||
<div class="video-area">
|
||||
<div class="video-box">
|
||||
<iframe
|
||||
id="videoFrame"
|
||||
width="100%"
|
||||
height="100%"
|
||||
src=""
|
||||
frameborder="0"
|
||||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
|
||||
allowfullscreen
|
||||
>
|
||||
</iframe>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-info">
|
||||
<div class="tit-box">
|
||||
<div class="meta">
|
||||
<span>인사이트</span>
|
||||
<em>경제와사회</em>
|
||||
</div>
|
||||
<h3>회계를 조금이라도 이해하면 인생이 달라지는 이유</h3>
|
||||
<div class="tit-right">
|
||||
<button class="btn-comment"><i class="ico-comment"></i>0</button>
|
||||
<label class="bookmark" for="video-bookmark-chk">
|
||||
<input id="video-bookmark-chk" type="checkbox" value="" />
|
||||
<span>북마크</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="desc"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="video-side">
|
||||
<div class="video-header">
|
||||
<h5 class="tit">관련영상</h5>
|
||||
<span class="badge">소통</span>
|
||||
<span class="close">×</span>
|
||||
</div>
|
||||
<div class="video-list">
|
||||
<ul>
|
||||
<!-- JS(loadRecommendedVideos)로 동적 렌더링 -->
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="comment-wrap">
|
||||
<!-- 🔥 드래그 리사이저 추가 -->
|
||||
<div class="comment-resizer">
|
||||
<div class="resizer-handle"></div>
|
||||
</div>
|
||||
<!-- 댓글 목록 -->
|
||||
<div class="comment-list-wrap">
|
||||
<ul class="comment-list">
|
||||
<!-- JS(get_comments.php)로 동적 렌더링 -->
|
||||
</ul>
|
||||
</div>
|
||||
<!-- // 댓글 목록 -->
|
||||
|
||||
<!-- 댓글 입력 -->
|
||||
<div class="comment-box">
|
||||
<textarea placeholder="댓글을 작성해주세요"></textarea>
|
||||
<div class="btn-area">
|
||||
<button class="btn-cancel" disabled>취소</button>
|
||||
<button class="btn-save" disabled>작성</button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- // 댓글 입력 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user