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>
|
||||
<!-- // 목표 상세 팝업 레이어 -->
|
||||
Reference in New Issue
Block a user