-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpatients.html
169 lines (140 loc) · 8.45 KB
/
patients.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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SuturingVR</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet">
<link rel="stylesheet" href="vendor/simple-line-icons/css/simple-line-icons.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="device-mockups/device-mockups.min.css">
<!-- Custom styles for this template -->
<link href="css/new-age.min.css" rel="stylesheet">
</head>
<body id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="index.html">SuturingVR</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="patients.html" style = "color: #fdcc52;">Patients</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="training.html">Training Assistants</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="research.html">Research Assistants</a>
</li>
</ul>
</div>
</div>
</nav>
<section class = "patient-head" id = "patient-head" style = "height: 100%; background-image: linear-gradient(0.402turn, #DC2430, #7B4396 55%);">
<div class = "container" style = "display: flex; height: 100%; width: 100%; justify-content: space-between; align-items: center;">
<div class = "section-heading text-center">
<h1 style = "color: white; font-size: 4.5em;">Patients</h1>
<a href="#patient-info" class="btn btn-outline btn-xl js-scroll-trigger" style = "height: 20%;">Learn More</a>
</div>
<div class = "section-image" style = "display: flex; justify-content:flex-end;">
<img class = "patient-img" src = "img/VRPatient.png" style = "width: 67%;">
</div>
</div>
</section>
<section class = "patient-info" id = "patient-info" style = "height: 100%; background-color: #fdbb2d;">
<div class = "container" style = "display: flex; height: 100%; width: 100%; justify-content: space-between; align-items: center;">
<div class = "section-heading text-center" id = "introduction">
<h2 style = "color: white;"> Introduction </h2>
<br>
<p style = "color: black; font-size: 1.4em;">Welcome to SuturingVR! In this virtual reality game, you’re an adventuring photographer in a race to get pictures of the most rare and majestic animals on the planet.
Your goal is to get as many photos as you can of the animals available in each environment from the comfort of your vehicle. The more photos of creatures you get,
the more points you accumulate. The scoreboard to your left shows you the number of points you have currently as well as how many photos of each creature you have taken.
In order to do this you’ll have to throw snacks in order to attract more animals, and engage in mini games that could let you win extra points and see some very rare sights.
Try to get as many points as you can by the end of the journey!</p>
</div>
</div>
</section>
<section class = "patient-instructions" id = "instructions" style = "background-color: white;">
<div class = "container" style = "height: 100%; width: 100%;">
<div class = "section-heading text-center" id = "patient-instructions">
<h2 style = "color: #FDC948; font-weight: bold;"> Patient Instructions</h2>
<br>
<h3>Interactions</h3>
<hr>
<p>As of right now, interactions in the game rely on pointer controls. That is to say, you should point at where you want to interact, and then click the trigger on your controller!
</p>
<br>
<img src="img/SelectingStuffInGame.gif" class="img-fluid" alt="Menu Interactions" style="max-width: 360px;">
<br>
<br>
<h4 class="text-muted">Selecting Menu Options & Taking Photos</h4>
<hr>
<p>The process of taking photos and selecting menu items is the same in SuturingVR. First, use your pointer to select a menu option, or while playing, the creature you’d like to photograph and then click the trigger button on your controller to select the item or capture the photo. You’ll know where you’re aiming because there should be a beam of light extending from your hands in-game. If you’re looking at a menu item, it should shift colors. If it’s a creature, you’ll be able to tell if you succeeded via a particle emission.
</p>
<br>
<figure class="figure">
<img src="img/controllerTRIGGER.png" style = "width: 30%; height: 30%;"class="figure-img img-fluid rounded" alt="The trigger button highlighted in blue">
<figcaption class="figure-caption">The trigger button is highlighted in blue!</figcaption>
</figure>
<br>
<h4 class="text-muted">Throwing Snacks</h4>
<hr>
<p>If you want to throw a snack and attract creatures, you’ll have to use the joystick button on your controller. By pushing the joystick button forward, you’ll be able to throw snacks. The further forward you push the button, the further snacks will go! Feeding the animals will also gain you extra points.
</p>
<br>
<figure class="figure">
<img src="img/controllerJOYSTICK.png" style = "width: 30%; height: 30%;"class="figure-img img-fluid rounded" alt="The joystick highlighted in blue">
<figcaption class="figure-caption">The joystick is highlighted in blue!</figcaption>
</figure>
<br>
<h4 class="text-muted">Traversing Terrain</h4>
<hr>
<p>
Your vehicle is optimized for photography exploration. Instead of having you drive, your vehicle will show you the most ideal spots for photography and take you there when you’re ready.
That’s more time to focus on pictures! The ideal spots (hotspots) will show up as bright orange diamonds in front of you. In order to travel towards a spot, select it in the same way you
select menu items, by using your joystick to line your beam up with the hotspot and pressing the trigger button. You will be able to traverse through three terrains: a forest, ocean, and desert!
At the start menu, you will be able to select which scene you would like to start with. After you have navigated through one scene, you may choose to view another.
</p>
</div>
</div>
</section>
<footer>
<div class="container">
<p>© SuturingVR 2021. All Rights Reserved.</p>
<ul class="list-inline">
<li class="list-inline-item">
<a href="#">Privacy</a>
</li>
<li class="list-inline-item">
<a href="#">Terms</a>
</li>
<li class="list-inline-item">
<a href="#">FAQ</a>
</li>
</ul>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for this template -->
<script src="js/new-age.min.js"></script>
</body>