/
index.html
232 lines (219 loc) · 9.74 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
<!--
Tesomas.Camp PWA Rewrite
Written by Jay Poffinbarger
Designed by Ezra Eckerson
This project makes use of the free version of Font Awesome for the icons.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<meta name="Description" content="Tesomas.Camp supplies quick access to information and tools that will make
your visit to Camp Tesomas as fun and engaging as possible.">
<script src="https://kit.fontawesome.com/1b88120e53.js" crossorigin="anonymous"></script>
<meta charset="utf-8">
<title>Tesomas Scout Camp</title>
<!--Import CSS and Web Manifest File-->
<link rel="stylesheet" href="css/main.css" />
<link rel="manifest" href="manifest.json">
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<link rel="preload" href="/css/waltographUI.ttf">
<!--iOS Specific PWA Elements. Can be removed once Apple supports web manifest-->
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="Tesomas Scout Camp">
<meta name="apple-mobile-web-app-title" content="Tesomas Scout Camp">
<meta name="theme-color" content="#517799">
<meta name="msapplication-navbutton-color" content="#517799">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-starturl" content="/index.html">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
<link rel="icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="apple-touch-icon" sizes="128x128" href="/images/touch/icon-128x128.png">
<link rel="icon" sizes="192x192" href="/images/touch/icon-192x192.png">
<link rel="apple-touch-icon" sizes="192x192" href="/images/touch/icon-192x192.png">
<link rel="icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="apple-touch-icon" sizes="256x256" href="/images/touch/icon-256x256.png">
<link rel="icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="apple-touch-icon" sizes="384x384" href="/images/touch/icon-384x384.png">
<link rel="icon" sizes="512x512" href="/images/touch/icon-512x512.png">
<link rel="apple-touch-icon" sizes="512x512" href="/images/touch/icon-512x512.png">
</head>
<body>
<header>
<h1>Tesomas.Camp</h1>
</header>
<!--Tile Elements Wrapper-->
<div class="tile-wrapper">
<!--Banner to show when device is offline-->
<ul id="offlineBanner" style="display: none" onclick="alert('You\'re currently offline.\nConnect to the internet to use all of the apps features')">
<li>
<h2>Your Offline</h2>
<div><a class="fas fas fa-exclamation-triangle fa-5x" style="color: #e8bd18;"></a></div><br>
</li>
</ul>
<ul class="area-wrapper">
<li id="construction">
<a class="fas fa-hard-hat fa-5x" style="color: #e8bd18;"></a>
<h3>Under Construction</h3>
<p>We're currently getting the site ready for this summer. Check back for updates soon!</p>
</li>
</ul>
<!--Main Tiles Wrapper-->
<ul>
<!--Installer Button-->
<li id="installBtn" style="display: none">
<h2>Install App</h2>
<div><a id="installIcon" class="fas fa-download fa-5x"></a></div><br>
</li>
<!--Area Activities Tile-->
<li id="area-activities" onclick="location.href='areas'" style="display: none">
<h2>Program Activities</h2>
<div><a class="fas fa-chalkboard-teacher fa-5x"></a></div><br>
</li>
<!--Leaderboard for the game-->
<li id="game" onclick="location.href='game'" style="display: none">
<h2>Smiley Cup</h2>
<div><a class="fas fa-trophy fa-4x"></a></div><br>
</li>
<!--Social Media Tile-->
<li id="social" onclick="location.href='social'">
<h2>Connect With Us</h2>
<div><a class="fas fa-users fa-4x"></a></div><br>
</li>
<!--Camp Information Tile-->
<li id="guidebook" onclick="location.href='info'">
<h2>Information</h2>
<div><a class="fas fa-info fa-5x"></a></div><br>
</li>
<!--Online Camp Map Tile-->
<li id="campMap" onclick="location.href='https://www.google.com/maps/d/u/0/viewer?mid=11T7dJtmoduWAah2Mf_F-7o4LBmzqYMGb&ll=45.72625565325383%2C-89.42473033938501&z=15'">
<h2>Camp Map</h2>
<div><a class="fas fa-map-marker-alt fa-5x"></a></div><br>
</li>
<!--Offline Camp Map Tile-->
<li id="offlineCampMap" style="display: none" onclick="location.href='https://www.google.com/maps/d/u/0/viewer?mid=11T7dJtmoduWAah2Mf_F-7o4LBmzqYMGb&ll=45.72625565325383%2C-89.42473033938501&z=15'">
<h2>Camp Map</h2>
<div><a class="fas fa-map-marker-alt fa-5x"></a></div><br>
</li>
<!--Store Tile-->
<li id="store" onclick="location.href='store'" style="display: none">
<h2>Store</h2>
<div><a class="fas fa-store-alt fa-4x"></a></div><br>
</li>
<!--Call Tile-->
<li id="call" style="display: none" onclick="location.href='tel:7153653111'">
<h2>Order Firewood</h2>
<div><a class="fas fa-phone fa-4x"></a></div><br>
</li>
<!--Camp Survey Tile-->
<li id="campSurvey" onclick="location.href='http://scouting.co1.qualtrics.com/jfe/form/SV_3kFtafclNWCpSFn'" style="display: none">
<h2>Camp Survey</h2>
<div><a class="fas fa-poll fa-5x"></a></div><br>
</li>
</ul>
</div>
<!--Bottom Image-->
<footer></footer>
<script>
/**
* Check for updates and prompt the user to close the app
*/
window.isUpdateAvailable = new Promise(function(resolve, reject) {
// lazy way of disabling service workers while developing
if ('serviceWorker' in navigator) {
// register service worker file
navigator.serviceWorker.register('service-worker.js')
.then(reg => {
reg.onupdatefound = () => {
const installingWorker = reg.installing;
installingWorker.onstatechange = () => {
switch (installingWorker.state) {
case 'installed':
if (navigator.serviceWorker.controller) {
// new update available
resolve(true);
} else {
// no update available
resolve(false);
}
break;
}
};
};
}).catch(err => console.error('[SW ERROR]', err));
}
});
window['isUpdateAvailable'].then(isAvailable => {
if (isAvailable) {
alert('New Update available! Reload the app to see the new changes.');
}
});
/**
* Attach service worker to application when page is loaded.
*/
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.register('service-worker.js')
.catch(err => {
console.error(err);
});
});
}
/**
* We first check if the device is offline. If true, hide the page elements
* that do not function offline, and tell the user they are offline.
*/
if(!navigator.onLine) {
document.getElementById('offlineBanner').style.display = '';
document.getElementById('game').style.display = 'none';
document.getElementById('social').style.display = 'none';
document.getElementById('campMap').style.display = 'none';
document.getElementById('offlineCampMap').style.display = 'flex';
document.getElementById('campSurvey').style.display = 'none';
document.getElementById('store').style.display = 'none';
document.getElementById('call').style.display = 'flex';
}
/**
* Check if the device is running iOS. iOS does not fully support PWA's so
* we have to inform the user on how to install the app manually.
*/
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
//Check if the device is running the iOS app instead of on the web.
const isInStandaloneMode = () => ('standalone' in window.navigator) && (window.navigator.standalone);
//Checks if we should show the install button for iOS, and creates a listener for it.
if (isIos() && !isInStandaloneMode()) {
document.getElementById('installBtn').addEventListener('click', event => {
alert('To install this app, open Safari, click on the share button, then scroll down till you see the "Add to Home Screen" option.' +
' Click that, then click add to install the application.');
});
document.getElementById('installIcon').className = 'far fa-share-square fa-5x'
document.getElementById('installBtn').style.display = 'flex';
}
/**
* If the device is not an iOS device, check if we can prompt the user to
* install the PWA normally.
*/
else {
let deferredPrompt;
window.addEventListener('beforeinstallprompt', event => {
//Stash the event so it can be triggered later.
deferredPrompt = event;
//Attach the install prompt to a user gesture
document.getElementById('installBtn').addEventListener('click', event => {
//Show the prompt
deferredPrompt.prompt();
//Wait for the user to respond to the prompt.
deferredPrompt.userChoice.then((choiceResult) => {deferredPrompt = null;});
});
//Show install button on screen in case the prompt did not work or was dismissed by the user.
document.getElementById('installBtn').style.display = 'flex';
});
}
</script>
</body>
</html>