-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathintro.html
92 lines (72 loc) · 3.9 KB
/
intro.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="./css/reset.css">
<link rel="stylesheet" type="text/css" href="./css/intro.css">
<link href="https://fonts.googleapis.com/css?family=Noto+Serif+KR:400,700&display=swap&subset=korean" rel="stylesheet">
<script src="https://kit.fontawesome.com/296406b34b.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>인트로 - 센티멘탈 호텔</title>
</head>
<body>
<div class="fade-box"></div>
<div class="nextbox nextbox1"></div>
<div class="nextbox nextbox2"></div>
<div class="dialogue dialogue-1">
<p class="line line-1">축하합니다.</p>
<p class="line line-2">오랜 기간의 취업 준비 끝에,</p>
<p class="line line-3">당신은 센티멘탈 호텔 채용에 합격하셨습니다. <i class="fas fa-sort-down arrow arrow-1"></i></p>
</div>
<div class="dialogue dialogue-2">
<p class="line line-4">귀하의 노고에 감사드리며,</p>
<p class="line line-5">귀하는 오늘부터 센티멘탈 호텔의 직원이자, 가족입니다. <i class="fas fa-sort-down arrow arrow-2"></i></p>
</div>
<div class="dialogue dialogue-3">
<p class="line line-6">오늘은 당신의 첫 출근 날 입니다.</p>
<p class="line line-7">먼저 당신은 센티멘탈 호텔의 직원이 되기 위한 교육을 수료할 예정입니다.</p>
</div>
<div class="link">
<a href="1st_floor_lobby.html">
<div class="linkbox">
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 238.51 231.47"><defs><style>.cls-1{fill:#818181;}</style></defs><title></title><path class="cls-1" d="M236.69,153.21c-19.71-27.05-62-18.94-85.92-12.34a3.22,3.22,0,0,1-3.81-4.4c8.15-18.66,29.54-65.7-.51-100.66-35.23-41-112.62-28-128.18,2.91C-9.32,93.45,27.58,241,27.58,241l157.83.5c23.85.07,50.45-12.47,57.74-35.18C248.18,190.6,248.79,169.83,236.69,153.21ZM55.16,76.55a3.31,3.31,0,0,1-6.63,0l.08-24.31a3.31,3.31,0,0,1,6.63,0ZM78.44,52.32a3.31,3.31,0,1,1,6.63,0L85,76.65a3.31,3.31,0,1,1-6.63,0Zm6.95,74.05a3.31,3.31,0,1,1-6.63,0L78.84,102a3.31,3.31,0,1,1,6.63,0Zm22.88-74a3.31,3.31,0,0,1,6.63,0l-.08,24.31a3.31,3.31,0,1,1-6.63,0Zm6.95,74.05a3.31,3.31,0,1,1-6.63,0l.08-24.31a3.31,3.31,0,1,1,6.63,0Z" transform="translate(-8.03 -9.98)"/></svg>
<span class="line linkbox__text">센티멘탈 호텔 입장하기</span>
</div>
</a>
</div>
<script>
$(document).ready(function(){
// $('.fade-box').fadeOut(2000);
$('.nextbox1').delay(3000).fadeIn(0000);
$('.nextbox1').click(function(){
$('.nextbox1, .dialogue-1').hide();
$('.dialogue-2').show();
$('.nextbox2').delay(2000).fadeIn(0);
})
$('.nextbox2').on('click', function() {
$('.dialogue-2, .nextbox2').hide();
$('.dialogue-3').show();
setTimeout(function(){$('.linkbox').fadeIn(1000);}, 3000);
});
$(".link").on('click', function(event) {
event.preventDefault();
//sessionStorage.setItem("visited", "true");
$('.fade-box').fadeIn(2000);
setTimeout(function() {
window.location = $('a').attr('href');}, 2000);
})
// 이미 방문한 상태일때 마지막 장면이 나오는 기능:
// function hasVisited() {
// if (sessionStorage.getItem("visited") === "true") {
// document.querySelector('.dialogue-1').style.display = "none";
// document.querySelector('.dialogue-3').style.display = "block";
// document.querySelector('.linkbox').style.display = "block";
// }
// }
// hasVisited();
});
</script>
</body>
</html>