-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
254 lines (239 loc) · 12.9 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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
<!-- Add your content of head and header -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="description" name="description">
<meta name="google" content="notranslate" />
<meta content="Mashup templates have been developped by Orson.io team" name="author">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<title>Gat-AR Tour</title>
<link href="./main.97292821.css" rel="stylesheet">
</head>
<body>
<!-- Add your content of header -->
<header>
<h1 class="text-center">Welcome to the Gat-AR Tour</h1>
</header>
<!-- Add your site or app content here -->
<div class="background-image-container white-text-container"
style="background-image: url('./assets/images/img-05test.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-xs-12">
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 section-container-spacer">
<h2 class="text-center">About Us</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="fa-container">
<i class="fa fa-bullhorn fa-3x" aria-hidden="true"></i>
</div>
<h3 class="text-center">What This Is</h3>
<p>Hello and welcome to the Gat-AR tour! This is a fun way for students or visitors to explore the
campus and see what UF has to offer. There are a lot of landmarks around campus, see if you can
find them all!</p>
</div>
<div class="col-xs-12 col-md-4">
<div class="fa-container">
<i class="fa fa-mobile fa-3x" aria-hidden="true"></i>
</div>
<h3 class="text-center">In-Person Tour</h3>
<p>If you would like to participate in our in-person tour, you can do so by using the echoAR Go app
at
our destination sites.
At each site, a hologram will pop up that gives you fun facts and new information for you to
learn about UF.
Whether you’re a new student just getting to know the campus or someone who just wants to learn
more about UF's history, this is the tour for you! </p>
</div>
<div class="col-xs-12 col-md-4">
<div class="fa-container">
<i class="fa fa-laptop fa-3x" aria-hidden="true"></i>
</div>
<h3 class="text-center">Online Tour</h3>
<p>Not in Gainesville? No worries! We have also built an online version of the tour for you to
experience the campus’ popular sites and learn a bit about its traditions.
All you need to do is hover the mouse over each image and scan the QR code and then scan the
destination image for a hologram to pop up with tons of cool new information!
Ready to embark on this journey? Try the online version below now!
</p>
</div>
</div>
</div>
</div>
<div class="section-container section-half-background-image-container">
<div class="image-column UFmap" style="background-image: url('./assets/images/Uf_map.jpg')"></div>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-6 text-column">
<h2>How to Participate in the Tour</h2>
<h3>To Complete the In-Person Tour…</h3>
<ul>
<li>1. Go to the destinations in order from 1-10 below.</li>
<li>2. You can find the addresses of each by scrolling down.</li>
<li>3. Use the echoAR Go app in each of the 10 locations to scan around and find a hologram that
pops out a message of fun facts about the location.</li>
<li>4. Continue this at each location to complete the tour and learn more about the University
of
Florida!</li>
</ul>
<h3> To Complete the Online Tour…</h3>
<ul>
<li> 1. Hover your mouse over each image to reveal a QR code.</li>
<li> 2. Use your phone camera to scan the QR code.</li>
<li> 3. This will take you to the echoAR scanner. A pop up that says “console.echoar.xyz Would
like to
Access the Camera.” Click “Allow”</li>
<li> 4. Scan the image of the popular campus site! Now, you should see a hologram pop up with
fun facts
and interesting information on your screen.</li>
<li> 5. Repeat this for each destination site from 1-10.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="section-container">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-12 section-container-spacer">
<h2 class="text-center">The Online Tour</h2>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_ubiquity.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodeubiquity.png" class="marker">
</div>
</div>
<h3 class="text-center">1. Warrington College of Business</h3>
<p class="text-center">Address: 1325 West University Avenue Heavener, Hall 333, Gainesville, FL
32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_library west.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodelibrarywest.png" class="marker">
</div>
</div>
<h3 class="text-center">2. Library West</h3>
<p class="text-center">Address: 1545 W University Ave #7022, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_hare krishna.jpg" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodeplaza.png" class="marker">
</div>
</div>
<h3 class="text-center">3. Plaza of the Americas</h3>
<p class="text-center">Address: 1545 W University Ave #7022, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_university audit.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodeuniversityaudit.png" class="marker">
</div>
</div>
<h3 class="text-center">4. University Auditorium</h3>
<p class="text-center">Address: 333 Newell Dr, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_turling.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodeturling.png" class="marker">
</div>
</div>
<h3 class="text-center">5. Turlington</h3>
<p class="text-center">Address: 330 Newell Dr, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_fries.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodefries.png" class="marker">
</div>
</div>
<h3 class="text-center">6. Marston Library</h3>
<p class="text-center">Address: 444 Newell Dr, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_Reitz unions.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodereitz.png" class="marker">
</div>
</div>
<h3 class="text-center">7. Reitz Union</h3>
<p class="text-center">Address: University of Florida, 655 Reitz Union Drive, Campus, Gainesville,
FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_heismann.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodeheismann.png" class="marker">
</div>
</div>
<h3 class="text-center">8. Football Stadium</h3>
<p class="text-center">Address: 157 Gale Lemerand Dr, Gainesville, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_southwest.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodesouthwest.png" class="marker">
</div>
</div>
<h3 class="text-center">9. Southwest Recreation Center</h3>
<p class="text-center">Address: 3150 HULL RD GAINESVILLE, FL 32611</p>
</div>
<div class="col-xs-12 col-md-12">
<div class="imagecontainer center">
<img src="assets/images/marker_bathouse.png" alt="Avatar" class="marker">
<div class="overlay center">
<img src="./assets/images/qrcodebathouse.png" class="marker">
</div>
</div>
<h3 class="text-center">10. Bat house</h3>
<p class="text-center">Address: Bat1 Museum Rd, Gainesville, FL 32611</p>
</div>
</div>
</div>
</div>
<footer class="footer-container white-text-container">
<div class="container">
<div class="row footertext">
<div>
<p><small>Website created with <a href="http://www.mashup-template.com/"
title="Create website with free html template">Mashup Template</a>/<a
href="https://www.unsplash.com/" title="Beautiful Free Images">Unsplash</a></small></p>
<p><small>Powered by echoAR</small></p>
<p><small>Inspired by the F Book</small></p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="./main.faaf51f9.js"></script>