-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
180 lines (153 loc) · 10.7 KB
/
index.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
170
171
172
173
174
175
176
177
178
179
180
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="preload" as="image" href="images/purple.jpg">
<link rel="preload" as="image" href="images/syd_w_book.png">
<link rel="preload" as="image" href="images/syd_phone.png">
<link rel="preload" as="image" href="images/syd_zapcode.png">
<link rel="preload" as="image" href="images/rock.png">
<link rel="preload" as="video" href="video/title_ogg.ogg">
<link rel="preload" as="video" href="video/clouds.mp4">
<link rel="prefetch" as="image" href="images/john.jpg">
<link rel="prefetch" as="image" href="images/jules.jpg">
<link rel="prefetch" as="image" href="images/spencer.jpg">
<link rel="prefetch" as="image" href="images/stuti.jpg">
<link rel="prefetch" as="image" href="images/tran.jpg">
<link rel="prefetch" as="image" href="images/matt.jpg">
<link rel="prefetch" as="image" href="images/katniss.jpg">
<link rel="prefetch" as="image" href="images/peeta.png">
<link rel="prefetch" as="image" href="images/effie.jpg">
<link rel="prefetch" as="image" href="images/cinna.jpg">
<link rel="prefetch" as="image" href="images/rue.jpg">
<link rel="prefetch" as="image" href="images/haymitch.jpg">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">
<title>588 Final</title>
</head>
<body>
<div>
<div class="banner">
<!-- <embed src="video/clouds.mp4" autostart="true" height="auto" width="100%" /> -->
<video autoplay muted width="100%" class="video-responsive">
<source src="./video/clouds.mp4" type="video/mp4">
<source src="./video/title_ogg.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<!-- <img src="images/hungergames.jpeg" alt="Hunger Games: AR Adventure" width="100%" class="img-responsive"> -->
<span class="overlay-section"><button class="overlay" onclick="scrollToNav()">v Accept the Challenge! v</button></span>
</div>
<!--Navbar-->
<nav id="navbar" class="navbar navbar-custom navbar-expand">
<div class="container-fluid flex-column">
<div class="navbar-header justify-content-center">
<span class="navbar-brand h1">The Hunger Games: AR Adventure</span>
</div>
<ul class="navbar-nav justify-content-center">
<li class="nav-item active"><button class="nav-link" onclick="scrollToNav()">The Game</a></li>
<li class="nav-item"><button class="nav-link" onclick="scrollToPromo()">Promo</button></li>
<li class="nav-item"><button class="nav-link" onclick="scrollToRules()">How to Play</button></li>
<li class="nav-item"><button class="nav-link" onclick="scrollToDemo()">Demo</button></li>
<li class="nav-item"><a class="nav-link" href="team.html">About Us</a></li>
</ul>
</div>
</nav>
<!-- End Navbar -->
<div class="container p-5 justify-content-center">
<div class="mb-5">
<h1 class="center">The next tribute selected for the Hunger Games is... YOU!</h1>
</div>
<div class="d-flex">
<div flex-shrink-0 class="pic">
<img src="images/syd_w_book.png" alt="Girl holding up Hunger Games book with ZappAR code attached" width="100%">
</div>
<div class="flex-grow-1 ms-3 sans-serif-font">
<div class="mb-3">
Instead of Katniss, you get to go through the Hunger Games firsthand, making important decisions that lead you through the competition. Experience your reaping, take center stage in the tribute parade, train in the Capitol, and survive the games.
</div>
<div>
Health and safety concerns surrounding the pandemic have limited children’s opportunities to get outside and get active. A lot of their favorite spaces were either shut down or strictly limited for safety purposes. However, as the country gets a better handle on the pandemic, it’s becoming safer for kids to get back out and explore the world around them, and we hope to make it a little more interesting for them.
</div>
</div>
</div>
<div class="fancy-box mt-5 mb-5">
The Hunger Games: AR Adventure is an augmented reality experience designed to increase activity in kids in a COVID-safe outdoor environment, while enriching the reading of one of their favorite novels: The Hunger Games.
</div>
<div class="mb-5" id="promo">
<h2 class="center">Promo Video</h2>
</div>
<div class="container d-flex justify-content-center mb-5">
<div class="ratio ratio-16x9">
<iframe width="100%" height="70%" title="Youtube Player with Promo Video"
src="https://www.youtube.com/embed/j7uUJSvT24M?rel=0">
</iframe>
</div>
</div>
<div class="mb-5" id="rules">
<h1 class="center">How to Play</h1>
</div>
<div class="d-flex">
<div class="flex-grow-1 sans-serif-font">
<div class="mb-3">
The Hunger Games: AR Adventure is a choose your own adventure game powered by ZappAR. Players should download the free Zappar app on the iOS app store and Google Play before beginning.
</div>
<div class="mb-3">
The Zappar smartphone app is used to scan the different codes spread throughout the area, leading players along the story. Players will find the initiating code within the book. Scanning this code begins the adventure, providing hints that lead to the first story-based code.
</div>
</div>
<div flex-shrink-0 class="ms-3 pic">
<img src="images/syd_phone.png" alt="Girl holding up Hunger Games book with ZappAR code attached" width="100%">
</div>
</div>
<div class="d-flex">
<div flex-shrink-0 class="mt-3 pic">
<img src="images/rock.png" alt="ZappAR code out in the wild" width="100%">
</div>
<div class="flex-grow-1 sans-serif-font ms-3">
<div class="mb-3">
Scanning codes in the game not only provides necessary hints for players to find the next step of their story in the real world, but also give players opportunities to shape the story they are working through. Each story-based code will present decisions that ultimately shape the outcome of the Games. Whether you are choosing your outfit for the tribute parade, picking the skills you want to show off in training, or deciding between weapons at the cornucopia, the decisions made are important.
</div>
</div>
</div>
<div class="d-flex">
<div class="flex-grow-1 sans-serif-font">
<div class="mb-3">
Battling in the Games presents players with an experience with aspects that are unique to this section. Here, your actions are the most important. Players have an inventory system along with a point tracker that determines their overall battle strength. Collecting as many weapons as possible, along with the strongest weapons, is the best way to assure victory in the rock-paper-scissors styled combat system surrounding weapon types. A weak inventory will likely see your journey come to an end, but strong decisions can get you crowned as victor!
</div>
</div>
<div flex-shrink-0 class="mt-3 pic">
<img src="images/syd_zapcode.png" alt="Girl scanning ZappAR code" width="100%">
</div>
</div>
<div class="d-flex">
<!-- <div flex-shrink-0 class="mt-3 pic">
<img src="images/syd_exercise.png" alt="Girl exercising" width="100%">
</div> -->
<div class="flex-grow-1 sans-serif-font mt-3">
<div class="mb-3">
Win or lose, The Hunger Games: AR Adventure emphasizes replayability through the freedom of choice for players. Don’t like how your first run of the game turned out? Pick a different weapon next time, work on different skills during training, or maybe choose a different outfit to catch the eyes of more sponsors. Ultimately, the choices are all yours. May the odds be ever in your favor!
</div>
</div>
</div>
<div class="mt-5 mb-5" id="demo">
<h2 class="center">Tech Demo</h2>
</div>
<div class="center">
<video autoplay muted loop class="video-responsive">
<source src="./video/theinventory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
</div>
</div>
<!-- Bootstrap Bundle with Popper-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> -->
<script src="app.js"></script>
<noscript>You need to enable javascript to view the full site.</noscript>
</body>
</html>