-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathInterviewTutorial.html
55 lines (51 loc) · 2.78 KB
/
InterviewTutorial.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI MOCK INTERVIEW SYSTEM</title>
<link rel="stylesheet" href="./assets/css/InterviewTutorial.css">
<script src="./assets/js/jquery-3.6.0.min.js"></script>
<script src="./assets/js/InterviewTutorial.js"></script>
</head>
<body>
<div id='main-contents'>
<div id='main-title'>Tutorial</div>
<div id='sub-desc'>AI 면접에 들어가기 앞서 기초 환경 세팅과 주의사항을 숙지해주세요</div>
<div id='tutorial-section'>
<div class='tutorial-button' id='left-button'><</div>
<div id='tutorial-content'>
<ul id='slidebox'>
<li>
<div class='slide-item'>
<div class='slide-text'>얼굴 전체가 화면에 들어오게 캠을 조정하세요</div>
<img class='img-style' id='face-img1' src="./assets/images/face1.png" alt="FACE1">
<div class='slide-text'>너무 가깝거나 멀다면 얼굴 식별이 힘들 수 있어요!</div>
</div>
</li>
<li>
<div class='slide-item'>
<div class='slide-text'>얼굴 전체가 나오더라도 측면을 비추는 방향으로 캠을 두지 마십시오</div>
<div>
<img class='img-style' src="./assets/images/sideface1.svg" alt="SIDEFACE1">
<img class='img-style' src="./assets/images/sideface2.svg" alt="SIDEFACE2">
</div>
<div class='slide-text'>면접이 진행되는 중에도 얼굴의 측면이 아닌 정면을 잘 비출 수 있도록 캠을 신경써주세요!</div>
</div>
</li>
<li>
<div class='slide-item'>
<div class='slide-text'>질문에 대한 답변이 잘 녹화, 녹음될 수 있도록 유의하세요</div>
<img id='record-img' src="./assets/images/recordimg.svg" alt="RECORD">
<div class='slide-text'>잡음이 발생할 수 있는 주변 환경을 피하고 큰 목소리를 유지해 주세요!</div>
</div>
</li>
</ul>
</div>
<div class='tutorial-button' id='right-button'>></div>
</div>
<button id='next-button' onclick="location.href='./InterviewSetting.html'">확인 완료</button>
</div>
</body>
</html>