-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (129 loc) · 4.59 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
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no,minimal-ui" />
<title>Designer Showcase</title>
<link rel="icon" type="image/png" href="assets/favicon.png" />
<link rel="stylesheet" href="styles.css">
<!-- Do not remove the following scripts -->
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
<script src="https://libs.zappar.com/jute/16.4/index.js"></script>
</head>
<body>
<div id="splash-page">
<div class="inner-wrapper">
<!-- This is the launch button and text -->
<div class="launch-button-container">
<div id="launch-button-text">
<img src="./assets/svg/zapworks-logo.svg" width="327" height="92" alt="Zapworks logo" />
<p>Designer Showcase</p>
</div>
<button id="launch-button">
Launch now
</button>
<div class="qr-container">
<h1>Almost there...</h1>
<p>Use your phone’s camera to scan the QR code.</p>
<img src="./assets/img/qr-code.png" width="125" height="125" alt="Designer Showcase experience QR code">
</div>
</div>
<!-- This is a loading spinner -->
<div id="loading-spinner">
<div class="sk-fading-circle">
<div class="sk-circle1 sk-circle"></div>
<div class="sk-circle2 sk-circle"></div>
<div class="sk-circle3 sk-circle"></div>
<div class="sk-circle4 sk-circle"></div>
<div class="sk-circle5 sk-circle"></div>
<div class="sk-circle6 sk-circle"></div>
<div class="sk-circle7 sk-circle"></div>
<div class="sk-circle8 sk-circle"></div>
<div class="sk-circle9 sk-circle"></div>
<div class="sk-circle10 sk-circle"></div>
<div class="sk-circle11 sk-circle"></div>
<div class="sk-circle12 sk-circle"></div>
</div>
</div>
<!-- This is loading helper texts -->
<div id="loading-helper">
<div id="loading-helper-1">
<div class="loading-helper-title" id="loading-helper-1-title">
Loading...
</div>
<span id="loading-helper-1-body">
It may take a few moments to load the experience over your
connection.
</span>
</div>
<div id="loading-helper-2">
<div class="loading-helper-title" id="loading-helper-2-title">
Still Loading...
</div>
<span id="loading-helper-2-body">
Please check you have a good Wi-Fi or mobile data connection.
</span>
</div>
</div>
<!-- This is where you can add your own cookie and privacy policies -->
<div id="cookie-notice">
<span id="cookie-title">Cookies</span>
<span id="cookie-body">
Once you tap Launch, we'll use cookies to enable operation of the
site, and to measure usage and engagement.
</span>
</div>
<div id="privacy">
<a id="privacy-text" href="https://www.zappar.com/privacy/" target="_blank" rel="noopener noreferrer">
Privacy Policy
</a>
<span> | </span>
<a id="launch-button-only-essential">
Launch w/o Analytics Cookies
</a>
</div>
</div>
</div>
<script>
const launchButton = document.getElementById("launch-button");
const launchButtonOnlyEssential = document.getElementById("launch-button-only-essential");
const launchButtonText = document.getElementById("launch-button-text");
const splashDiv = document.getElementById("splash-page");
let hasLoaded = false;
let onlyEssentialCookies = false;
launchButtonOnlyEssential.addEventListener("click", function() {
// If you use your own analytics tool, Handle launching without analytics cookies
onlyEssentialCookies = true;
launchButton.click();
});
Jute.init({
launchButton: launchButton,
onLoading: function() {
// Called once the used clicks the launch button
// Initiate your analytics tool here (eg. Google Analytics)
// If you do use an analytics tool, please consider the onlyEssentialCookies boolean value
splashDiv.classList.add("loading");
setTimeout(function() {
if (!hasLoaded) splashDiv.classList.add("loading-helper-1")
}, 7500);
setTimeout(function() {
if (!hasLoaded) splashDiv.classList.add("loading-helper-2")
}, 20000);
},
onLoaded: function() {
// Called once the runtime (Jute) is loaded
splashDiv.remove();
hasLoaded = true;
},
onUnsupported: function() {
// Handle unsupported browsers
splashDiv.remove();
},
// A Boolean value indicating whether using only essential cookies or not
onlyEssentialCookies: onlyEssentialCookies
});
</script>
</body>
</html>