188 lines
7.1 KiB
PHP
188 lines
7.1 KiB
PHP
<?php
|
|
if (session_status() === PHP_SESSION_NONE) {
|
|
session_start();
|
|
}
|
|
?>
|
|
<!doctype html>
|
|
<html lang="ko">
|
|
<head>
|
|
<?php include(__DIR__ . "/_include/_head.php") ?>
|
|
<link rel="stylesheet" type="text/css" href="/css/intro.css" />
|
|
</head>
|
|
<body>
|
|
<div class="wrap intro">
|
|
<!-- =============================================
|
|
인트로 페이지 구조
|
|
- Section 1: 사용자 인사 (타이핑 애니메이션)
|
|
- Section 2: 업데이트 소개 + 기능 카드 4종
|
|
- Section 3: CTA (시작 버튼)
|
|
============================================= -->
|
|
<div class="container">
|
|
<!-- 메인 애니메이션 섹션 (Section 1, 2 공통) -->
|
|
<section class="text-ani">
|
|
<!-- 텍스트 영역: 인사 ↔ 업데이트 소개 전환 -->
|
|
<div class="text-area">
|
|
<!-- [1] Section 1: 사용자 맞춤 인사 (타이핑 효과) -->
|
|
<div id="section1Text" class="greeting" data-section="1">
|
|
<p>
|
|
<span class="name" id="typedName"></span
|
|
><span class="cursor" id="cursor">|</span>
|
|
<br class="m-br" />안녕하세요!
|
|
</p>
|
|
<p class="welcome" id="welcome"></p>
|
|
</div>
|
|
|
|
<!-- [2] Section 2: 업데이트 소개 텍스트 (애니메이션 순차 노출) -->
|
|
<div id="section2Text" class="update-text hidden" data-section="2">
|
|
<div class="update-line">
|
|
<span id="line1">이번 업데이트에서</span>
|
|
</div>
|
|
<div class="update-line">
|
|
<span id="line2"
|
|
>더 <em>편리하고 즐겁게 학습</em><br class="m-br"> 하실 수 있도록</span
|
|
>
|
|
</div>
|
|
<div class="update-line bold">
|
|
<span id="line3">배움터가 이렇게 달라졌어요</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 콘텐츠 영역: 기능 카드 4종 (Section 2에서만 노출) -->
|
|
<div class="content-area">
|
|
<div class="card-list" id="cardsContainer">
|
|
<div class="card" id="card1" data-card="1">
|
|
<div class="card-num">01</div>
|
|
<div class="card-title">
|
|
<em>내 학습</em>을 <em>차곡차곡</em><br />
|
|
<em>모아</em>보세요
|
|
</div>
|
|
<div class="card-desc">
|
|
<em>"콘텐츠를 저장"</em>해두고<br />
|
|
언제든 다시<br />
|
|
참고할 수 있어요.
|
|
</div>
|
|
</div>
|
|
<div class="card" id="card2" data-card="2">
|
|
<div class="card-num">02</div>
|
|
<div class="card-title">
|
|
<em>중요한 공지사항</em>도<br />
|
|
놓치지 않아요
|
|
</div>
|
|
<div class="card-desc">
|
|
상단 <em>"알림기능"</em>을 통해<br />
|
|
새 소식을 빠르게<br />
|
|
확인할 수 있어요
|
|
</div>
|
|
</div>
|
|
<div class="card" id="card3" data-card="3">
|
|
<div class="card-num">03</div>
|
|
<div class="card-title">
|
|
좋은 학습 <em>콘텐츠를</em><br />
|
|
<em>공유</em>할 수 있어요
|
|
</div>
|
|
<div class="card-desc">
|
|
팀원들과 함께<br />
|
|
학습할 수 있도록<br />
|
|
<em>"콘텐츠를 제안"</em>해보세요
|
|
</div>
|
|
</div>
|
|
<div class="card" id="card4" data-card="4">
|
|
<div class="card-num">04</div>
|
|
<div class="card-title">
|
|
나의 학습 현황을<br />
|
|
<em>확인</em>할 수 있어요
|
|
</div>
|
|
<div class="card-desc">
|
|
마이페이지에서<br />
|
|
학습현황을<br />
|
|
<em>"한 눈에 확인"</em>해보세요
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- [3] Section 3: CTA 영역 (시작 버튼 + 마스크 효과) -->
|
|
<div id="section3Text" class="cta-text hidden" data-section="3">
|
|
<!-- 메인 배경 텍스트 영역 -->
|
|
<div id="mainContainer">
|
|
<div class="text-section" id="ctaBg">
|
|
<p id="ctaLine1">지금부터 <em>나만의 학습으로</em></p>
|
|
<p id="ctaLine2">성장해 볼까요?</p>
|
|
</div>
|
|
</div>
|
|
<!-- 마스크 오버레이 (클릭 시 확대되며 하단 텍스트 노출) -->
|
|
<div class="mask" id="maskContainer">
|
|
<div class="text-section">
|
|
<p class="mask-text" id="maskLine1">
|
|
계속 <em>성장해 나가는 배움터</em>를
|
|
</p>
|
|
<p class="mask-text" id="maskLine2">지켜봐 주세요!</p>
|
|
</div>
|
|
</div>
|
|
<!-- CTA 버튼 -->
|
|
<button
|
|
class="cta-btn"
|
|
id="ctaBtn"
|
|
onclick="location.href = '/skin/index.php';"
|
|
>
|
|
약속
|
|
<i class="ico-arrow"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 스크롤 안내 (Section 1, 2에서만 표시) -->
|
|
<div class="scroll-indicator" id="scrollIndicator">
|
|
<span>Scroll</span>
|
|
<span class="bar"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- =============================================
|
|
인트로 설정 및 상태 (animation.js 등에서 사용)
|
|
※ fullName, welcomeText 등 여기서 수정
|
|
============================================= -->
|
|
<script>
|
|
/** 인트로 페이지 설정 값 */
|
|
const INTRO_CONFIG = {
|
|
// PHP 세션을 사용하여 "이름 + 직책 + 님" 형태로 조합
|
|
fullName: "<?= $_SESSION['member_name'] . ' ' . $_SESSION['rank_name'] ?>님",
|
|
|
|
welcomeText:
|
|
"<em>새로워진</em> <em>배움터</em>에 오신 것을 <em>환영합니다</em>",
|
|
typingSpeed: 100,
|
|
welcomeCharSpeed: 60,
|
|
};
|
|
|
|
/** 인트로 페이지 상태 (섹션, 애니메이션 등) */
|
|
const INTRO_STATE = {
|
|
currentSection: 0, // 0:인사, 1:업데이트, 2:CTA
|
|
typedIndex: 0,
|
|
isScrolling: false,
|
|
isAnimating: false,
|
|
section2AnimDone: false,
|
|
autoScrollTimer: null,
|
|
lastInteractionTime: Date.now(),
|
|
};
|
|
|
|
/** 사용자 이름 변경 시 호출 */
|
|
function setUserName(name) {
|
|
INTRO_CONFIG.fullName = name;
|
|
}
|
|
|
|
/** 설정 객체 병합 (일괄 수정 시) */
|
|
function updateConfig(config) {
|
|
Object.assign(INTRO_CONFIG, config);
|
|
}
|
|
</script>
|
|
|
|
<!-- 인트로 스크립트 (로드 순서: animation → section → events → init) -->
|
|
<script src="/js/intro/animation.js" defer></script>
|
|
<script src="/js/intro/section.js" defer></script>
|
|
<script src="/js/intro/events.js" defer></script>
|
|
<script src="/js/intro/init.js" defer></script>
|
|
</body>
|
|
</html>
|