Initial commit: 교육 프로젝트 배포
This commit is contained in:
송대일
+187
@@ -0,0 +1,187 @@
|
||||
<?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>
|
||||
Reference in New Issue
Block a user