170 lines
5.7 KiB
PHP
170 lines
5.7 KiB
PHP
<!-- 비디오 모달 템플릿 -->
|
|
<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>
|