-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage6-hallway.html
131 lines (97 loc) · 3.39 KB
/
page6-hallway.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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
<title> hallway</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta charset="utf-8">
<link href = "page6-hallway.css" rel="stylesheet">
<!-- <link href = "http://webdev.scs.ryerson.ca/~j29long/project/page6-hallway.css" rel="stylesheet"> -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Homemade+Apple&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Nosifer&display=swap" rel="stylesheet">
</head>
<body>
<!--ALERT BOX ON TOP OF TEH PAGE-->
<div class="alert-box">
<div class="alert">
<span class="closebtn" onclick="this.parentElement.style.display='none';">×</span>
Click on the arrow to enter room
</div>
</div>
<!--TIMER-->
<div id="timer"> </div>
<!--WRAPPER CONTAINER FOR THE POSTER AND SANITIZER-->
<div id="wrapper">
<img class= "poster" src ="images/posteredit.png" alt="poster">
<div id= "sanitizer" class ="default"></div>
<div>
<img class= "sanitizer" src ="images/sanitizer.png" alt="sanitizer">
</div>
<div id= "arrow" class ="arrowbox"> <img class="arrow" src="images/arrow.png" alt="arrow" onclick="redirect()"></div>
<!--HINT BOX ELEMENTS-->
<div class="box">
<a class="button" href="#popup1">Hint</a>
</div>
<!--POPUP BOX WHEN CLICK ON HINT BUTTON-->
<div id="popup1" class="overlay">
<div class="popup">
<h2>Hint</h2>
<a class="close" href="#">×</a>
<div class="content">
Pay Attention to the numbers on items! <br>
Order: poster -> sanitizer
</div>
</div>
</div>
</div>
<!--MUSIC-->
<audio autoplay loop>
<source src="HospitalBackground.mp3">
</audio>
<!--TIMER-->
<script type="text/javascript">
//var timePassed=0;
var timePassed = parseInt(sessionStorage.getItem('timePassed'));
let timerInterval = null;
document.getElementById("timer").innerHTML = `
<div class="base-timer">
<svg class="base-timer__svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g class="base-timer__circle">
<circle class="base-timer__path-elapsed" cx="50" cy="50" r="45"></circle>
</g>
</svg>
<span id="base-timer-label" class="base-timer__label">${formatTime(
timePassed
)}</span>
</div>`;
startTimer();
function startTimer() {
timerInterval = setInterval(() => {
timePassed += 1;
document.getElementById("base-timer-label").innerHTML = formatTime(
timePassed
);
}, 1000);
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
let seconds = time % 60;
if (seconds < 10) {
seconds = `0${seconds}`;
}
return `${minutes}:${seconds}`;
}
</script>
<!--AFTER EACH PAGE, BEFORE LINE DIRECTING TO NEXT INPUT-->
<script type="text/javascript">
function redirect()
{
sessionStorage.setItem("timePassed", timePassed);
window.location.href="http://webdev.scs.ryerson.ca/~j29long/project/page6-pin.html";
}
</script>
</body>
</html>